代码片段 → HTML → 1x1px 透明 GIF 的 Base64 编码

1x1px 透明 GIF 的 Base64 编码

Avatar of Chris Coyier
Chris Coyier 于

以防万一你需要一个。你可以根据需要将其拉伸以填充空间。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

或者一个黑色的

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">
Psst! 创建一个 DigitalOcean 帐户并获得 $200 免费信用 用于基于云的托管和服务。

评论

  1. Rafael Ehlers
    评论永久链接#

    非常非常方便！

    回复
  2. zsitro
    评论永久链接#

    我应该在哪里使用它？

    回复
  3. Jan-Marten de Boer
    评论永久链接#

    我在一个窄播解决方案中使用一个透明图标作为光标。这样，当您将浏览器窗口聚焦时，鼠标会消失。非常整洁的技巧。将光标设置为 none，并回退到透明图像。跨平台、跨浏览器工作。

    回复
    • Adam Parkes
      评论永久链接#

      隐藏光标的目的是？

    • Felix Kiunke
      评论永久链接#

      目的是可能是 HTML5 视频（像 YouTube 一样隐藏光标）

  4. Gigi
    评论永久链接#

    也许写下我们可以在哪里使用此代码会很有用。
    我可以使用它与 href 链接一起检索点击统计信息吗？

    回复
  6. MAX
    评论永久链接#

    哇，谢谢，我把它与 lazyload jQ 插件结合使用

    回复
  7. Viswanathan
    评论永久链接#

    不错……但 IE7 不支持 data URI，是否有任何替代方案？

    回复
  8. Juan
    评论永久链接#

    谢谢，但我没有理解这段代码的应用。1×1 的图标？

    回复
  9. Pawel
    评论永久链接#

    我认为 2×1 会更有用。

    回复
    • Julian Cizmic
      评论永久链接#

      是的，重点是创建一个小文件大小。无论如何，您始终可以使用 height 和 width 属性扩展文件。但是，这仅在 HTML 电子邮件中才有用，因为在网页上使用间距 GIF 不是很好的网页设计。

  10. Muthu
    评论永久链接#

    给我一个演示。拜托。

    回复
  11. ApplePi
    评论永久链接#

    听起来周围有很多 n00bs，他们不记得那个久经考验的 1px x 1px 透明 gif hack 的必要性。

    唤起了回忆。大部分都是痛苦的。:-)

    回复
    • Ángel Cervera
      评论永久链接#

      +1 用于

      唤起了回忆

    • Thomas
      评论永久链接#

      我理解你的痛苦 :-D

      非常感谢你提供这段代码，Chris！

  12. Maarten
    评论永久链接#

    谢谢！

    回复
  13. Sri Ganesh.M
    评论永久链接#

    先生，我不熟悉这里的代码。但我认为这个就像在 FLICKR 中使用的相同代码一样，当我们保存图像时，它将保存为 1px 图像！或者如何使用它们！

    回复
  14. 旅行社
    评论永久链接#

    非常非常方便！

    回复
  15. 电子烟
    评论永久链接#

    非常感谢！

    回复
  16. Aaron
    评论永久链接#

    嘿，伙计，Outlook 等是否支持 EDM 的这种功能？

    回复
  17. mike
    评论永久链接#

    好吧，Chris，我认输了。
    你是怎么做到的？

    你的
    “data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=”

    我的最佳 gif
    “data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEHAAEALAAAAAABAAEAAAICTAEAOw==”

    而且我的最佳 png 大小是其两倍
    “data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAA1JREFUeNoBAgD9/wAAAAIAAVMrnDAAAAAASUVORK5CYII=”

    ;o) s'moike

    回复
  18. Alhadis
    评论永久链接#

    哈！透明 GIF 与我自 2007 年以来一直在使用的 GIF 具有相同数量的字节。但是二进制数据略有不同

    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAIBTAA7" alt="" />
    回复
  19. Majid
    评论永久链接#

    这可能的一种用途：替换 此处 描述的第一种方法中的透明 gif，以垂直居中 div 中的文本。

    回复
  20. Adil
    评论永久链接#

    虽然非常具体，但确实很有帮助

    回复
  21. appcropolis
    评论永久链接#

    我正要生成这段代码，但我很高兴我找到了这篇文章。在我的情况下，我有一个包含图像的移动应用程序。图像的 source 值是动态设置的，我需要指向一个占位符图像，而应用程序确定最终图像 URL。当 source 值未设置时，一些浏览器会显示一个难看的图标（损坏或丢失的资源），但拥有一个小的透明图像作为字符串将阻止损坏的图像图标，并节省一个 HTTP 请求。

    非常方便！感谢发布这篇文章。

    回复
  22. George Adamson
    评论永久链接#

    嗨，你用什么生成编码的 GIF？我想要一个不同颜色（#ccc）的 GIF，但在使用在线工具将 1px gif 文件转换为 data-uri 后，结果比你的示例大得多。

    回复
  23. kodtest
    评论永久链接#

    我不太理解。我应该在哪里使用它？

    回复
  24. Juho Viitasalo
    评论永久链接#

    这也可以用来检测浏览器对 data URI 的支持。请参阅 http://weston.ruter.net/2009/05/07/detecting-support-for-data-uris/

    例如 Modernizer 和 Grunticon 使用了它。

    回复
  25. Manuel
    评论永久链接#

    如果有人需要一个半透明的 Base64 编码 PNG 像素作为 CSS RGBA 回退。 请查看 http://px64.net

    回复
  26. Roko C.B.
    评论永久链接#

    只是想分享一个有用的 **使用示例**

    **自包含图像！** (+jQuery)

    想象一下，你想设置任何 (!) W/H 到一个图像，但不想拉伸图像？！
    就像这样

    img style="width:150px; height:150px;" class="self-contained" src="img.jpg"

    我所做的是将 **透明 PNG** 作为图像 src（防止浏览器放置“缺失图像图标”），然后将图像 src 传递给该 IMG background 并将 CSS3 background-size 设置为 cover。

    $(".self-contained").each(function(){
  $(this).css({background: 'url('+ this.src +') no-repeat center center', backgroundSize: 'cover'}).attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
});

    这里有一个演示，供您测试和使用：http://jsbin.com/self-contained-images/1/edit

    回复
  27. Daniel
    评论永久链接#

    抱歉，我不明白这是做什么的？

    回复
  28. Marklets
    评论永久链接#

    我把 PNG 压缩到 41 字节，用于 1x1px

    data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQ

    尝试了一段时间让 GIF 小于 14 字节，但我感觉它已经尽可能小了。 这里有一些测试

    data:image/gif,GIF89a,%C2%B3%00%C3%BF%C3%BF
    1px x 8256
    data:image/gif,GIF89a%01%00@%20%FC%87%E4%10
    16,684×16,705
    data:image/gif,GIF89a,AAAAAAE
    16,684×16,705
    data:image/gif,GIF89a,AAAAAAEAAQAA
    11,265×16,705
    data:image/gif,GIF89a%01,AAAAAAEAAQAA
    257×11,265
    data:image/gif,GIF89a%01%01%01,AAAAAAEAAQAA
    257×257
    data:image/gif,GIF89a%01%01%01%01,AAAAAAEAAQAA

    回复
  29. Jason
    评论永久链接#

    我喜欢宽度为 100% 并且高度为 auto，这样东西就可以自动缩放。 我不想创建一个具有正确尺寸的 GIF 来进行自动缩放，所以给你了，各位。

    https://github.com/sebringj/jquery-transparent-gif

    回复
  30. Fikret
    评论永久链接#

    这里有一个免费的 base64 css 生成器，用于从图像生成代码
    http://www.base64css.com

    我认为这对某些人会有帮助。

    回复
  31. smith
    评论永久链接#

    如果你们专业人士中有人能帮助新手，那真是太好了，记住，你们中有些人曾经也是新手，嘲笑新手可不是什么好行为。 请有人解释一下这个函数的作用吧，善意的行为会让你走得更远。

    回复
  32. avi
    评论永久链接#

    不错的文章，非常有用。
    我使用这个网站进行编码/解码
    用于测试。
    http://www.ebase64encode.org

    回复
  33. Junaid Atari
    评论永久链接#

    酷，非常有用

    回复
  34. __JM__Joy__
    评论永久链接#

    非常棒！

    回复
  35. Jess
    评论永久链接#

    我使用一个透明的 1×1 gif 文件作为虚拟图像，即使一篇博文实际上没有图片，也可以满足谷歌的结构化数据测试工具。 :)

    回复
  36. JustMe
    评论永久链接#

    大家想要一个白色的。
    给我们一个白色的！ :)
    哦，没事… 我会自己做… :(

    回复
  37. Elvis Schwartz
    评论永久链接#

    很适合跟踪，对吧？ BlueGriffon 也生成它们（尽管我不确定效率如何）。

    回复
  38. mark
    评论永久链接#

    各位！现在是 2016 年了，透明像素嵌入？ 像，在哪里？ CodePen，也许？

    回复
  39. Ben Finney
    评论永久链接#

    PNG 像素工具 http://png-pixel.com/ 将生成自定义透明图像的 Base64 编码表示。

    回复
  40. hezedu
    评论永久链接#

    很棒！

    回复
  41. smackjax
    评论永久链接#

    如果还有人访问这个页面，并且好奇它的使用场景…

    我将其用作异步图像的内联 HTML 占位符。 我将 'data-src' 设置为我想要的实际 URL，并将 'src' 设置为这个编码的 gif。
    它很小，而且是内联的，所以我不必担心页面首次加载时链接损坏，因为 JS 接管并用 'data-src' 替换 'src'。
    我也可以将其设置为编码的加载 gif。

    这是链接

    回复
  42. TheGrey
    评论永久链接#

    嗨

    我的页面在 https 协议下运行，并且发送以下错误，因为我不能为 src 添加安全设置吗？

    混合内容：位于 'https://www.page.com/home' 的页面是通过 HTTPS 加载的，但请求了一个不安全的图像 'data: image / gif; base64, R0lGODlhAQABAAAAACw ='. 此内容也应通过 HTTPS 提供。

    这是我的语句
    <img class = “lb-image” src = “http: // data: image / gif; base64, R0lGODlhAQABAAAAACw =” /

    回复
    • Maxwell Bernard
      评论永久链接#

      嗨！
      问题出在你的 <img> 'src' 属性中的 'http' 部分，因为即使页面是安全加载的，浏览器也试图加载一个不安全的图像源。
      但是！这个 gif 的优点是你不需要 'http' 或 'https'，因为所有的图像数据都包含在这个字符串中。

      试试这个（你提供的编码）
      <img class = “lb-image” src="data:image/gif;base64,R0lGODlhAQABAAAAACw =">

      或者这个（来自顶部的示例 gif）
      <img class = “lb-image” src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">

发表评论

Your email address will not be published. Required fields are marked *

© 2024 . All rights reserved.