Smallest data URI image possible for a transparent image

by

After playing around with different transparent GIFs, some are unstable and cause CSS glitches. For example, if you have an <img> and you use the tiniest transparent GIF possible, it works fine, however, if you then want your transparent GIF to have a background-image, then this is impossible. For some reason, some GIFs such as the following prevent CSS backgrounds (in some browsers).

Shorter (but unstable – 74 bytes)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

I would advise using the slightly longer and more stable version as follows:

⇊ Stable ⇊ (but slightly longer – 78 bytes)

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

As another tip, don’t omit image/gif as one comment suggests. This will break in several browsers.

More Related Contents:

  1. How can I scale an image in a CSS sprite
  2. Tools to make CSS sprites? [closed]
  3. Can I add color to bootstrap icons only using CSS?
  4. Clip/Crop background-image with CSS
  5. How to create one vertical column in between rows in Flexbox [closed]
  6. How can i make this wave effect on both bottom and top
  7. How to apply a CSS filter to a background image
  8. Why is a flex item limited to parent size?
  9. Transparent text cut out of background
  10. Remove blue border from css custom-styled button in Chrome
  11. How do I use /deep/ or >>> or ::v-deep in Vue.js?
  12. React.js inline style best practices [closed]
  13. Internet Explorer’s CSS rules limits
  14. Pure CSS checkbox image replacement
  15. CSS: Set a background color which is 50% of the width of the window
  16. Invalid CSS selector causes rule to be dropped: What is the rationale?
  17. Right to Left support for Twitter Bootstrap 3
  18. How do nested vertical margin collapses work?
  19. What does the dot mean in CSS?
  20. How can I prevent CSS gradient banding?
  21. Why adding version number to CSS file path?
  22. How to display and hide a div with CSS?
  23. Can I define a class name on paragraph using Markdown?
  24. Check scrolling with CSS
  25. How do I keep CSS floats in one line?
  26. Force sidebar height 100% using CSS (with a sticky bottom image)?
  27. How to style the number on a html list?
  28. Horizontal scroll in DIV with many small DIV’s inside (no text)
  29. Creating a droplet like border effect in css
  30. Getting columns to wrap in CSS Grid

Leave a Comment