Blank image encoded as data-uri
HtmlWeb StandardsData UriHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
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.
Solution 3 - Html
The smallest I've ever seen
data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=
update: This seems broken and doesn't work anymore as reported by @bryc, please use the other answers.
Solution 4 - Html
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.
Solution 5 - Html
data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=
is smaller :D
Solution 6 - Html
1px by 1px JPEG image
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9/KKKKAP/2Q==
Solution 7 - Html
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=