Blank image encoded as data-uri [duplicate]

StackOverflow https://stackoverflow.com/questions/9127973

  •  22-04-2021
  •  | 
  •  

Question

I've built an image slider (based on the terrific bxSlider) which will preload images just-in-time before they slide into view. It's working pretty well already, but I don't think my solution is valid HTML.

My technique is as follows: I generate the slider markup with the first slide image being inserted as usual (with an <img src="foo.jpg">) and subsequent images being referenced in a data attribute like <img data-orig="bar.jpg">. A Javascript then juggles the data-orig -> src change when necessary, triggering the preloading.

In other words, I have:

<div class="slider">
    <div><img src="time.jpg" /></div> 
    <div><img src="data:" data-orig="fastelavn.jpg" /></div> 
    <div><img src="data:" data-orig="pels_strik.jpg" /></div> 
    <div><img src="data:" data-orig="fashion.jpg" /></div> 
</div>

To avoid empty src="" attributes (which are harmful to performance in some browsers), I've inserted src="data:" to effectively insert a blank image as a placeholder.

The thing is, I can't seem to find anything in the documentation for data-URI saying whether this is a valid data-URI or not. I basically want the minimal data-URI that resolves to a blank/transparent image, so the browser can resolve the src immediately and move on (with no error or network request). Maybe src="data:image/gif;base64," would be better?

Was it helpful?

Solution

I looked into it and the smallest possible transparent GIF image, encoded as a data-uri, was this:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

which is what I'm using now.

OTHER TIPS

If you need a transparent image 1x1 pixel, just set this data uri as src default attribute (keep the /// parts, it encodes byte 255, not a comment). 

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

This is instead a base64 encoding for an image 1x1 white.

data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==

Otherwise you could set data:null and save ~60 extra bytes for each image.

The smallest I've ever seen

data:image/gif;base64,R0lGODlhAQABAAAAACw=

update: This seems broken and doesn't work anymore as reported by @bryc, please use the other answers.

data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>

Valid and highly compressible. Essentially free if there's another inline svg in the page.

data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=

is smaller :D

1px by 1px JPEG image

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9/KKKKAP/2Q==

Fabrizio's "white gif" isn't actually perfectly white : it is rgb(254, 255, 255).

I use the following one (which happens to be smaller), found on this page.

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top