Blank image encoded as data-uri

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?

Just use empty hash. http://stackoverflow.com/a/28077004/3841049 — iGidas, Feb 12 '15 at 20:09
@iGidas: bad idea, as many browsers will actually make a second request to the main page (causing a far worse performance hit than the original image and creating confusing entries in your server logs), try to interpret the HTML as an image, throw an error, and potentially cause real application errors (e.g. in shopping carts / checkout pages where the 'page refresh' causes more items to be added in the basket or triggers security measures) — Jens Roland, Dec 11 '15 at 10:33
What about the actual `data:image/gif;base64,` used as an `src`? Or even shorter `data:,` ending with a coma. Seems to be valid HTML and working in every modern browser without any errors. Any arguments against using it? — bobo, Jan 02 '17 at 20:55

score 178 · Accepted Answer · edited Sep 11 '13 at 04:00

178

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.

edited Sep 11 '13 at 04:00

Josh Hunt

14,225
26
79
98

answered Apr 01 '12 at 18:47

Jens Roland

27,450
14
82
104

1

If your `img` element is already hidden and you're just trying to avoid HTTP 404 errors, see http://stackoverflow.com/a/14115340/14731 for a shorter data of a non-transparent image. – Gili Apr 09 '14 at 03:07

score 45 · Answer 2 · edited Apr 08 '20 at 14:50

45

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.

edited Apr 08 '20 at 14:50

bryc

12,710
6
41
61

answered Feb 03 '12 at 11:30

Fabrizio Calderan

120,726
26
164
177

4

Can you provide a link to verify that data:null is valid as an image source? – Jens Roland Apr 01 '12 at 18:48
1

@JensRoland, empty data is valid as per this Mozilla KB: http://www-archive.mozilla.org/quality/networking/testing/datatests.html But the non-image is not rendered, so any alt attributes fall through. – K3---rnc Feb 20 '13 at 05:31
1

@K3---rnc: I saw that list from Mozilla; unfortunately, that is not the spec, merely the expected behavior for Mozilla testers; in other words, it reflects Mozillas interpretation of the spec. It's a good sign, but it offers little assurance that any version of IE or Webkit will behave the same. – Jens Roland Feb 21 '13 at 18:43
@fcalderan I am curious, why did you offer a white version since both are the same size? Does the white offer any advantage over the transparent? – Luke Gedeon Oct 21 '18 at 18:39

Adria · Answer 3 · 2015-07-12T22:24:40.847

27

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.

edited Jul 12 '15 at 22:24

answered Jul 12 '15 at 11:12

Adria

8,651
4
37
30

5

I like this one. I see only two weaknesses: First, SVG is not supported in IE<9 (not usually a problem, but it does make it infeasible for some sites); and second, "SVG data needs to be uriencoded to work in IE and Firefox" (see http://caniuse.com/#search=datauri), so you actually have to use: `data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22/%3E` which is still 4 bytes shorter than mine, but it does look a bit messy – Jens Roland Jan 24 '16 at 10:40

azerafati · Answer 4 · 2022-05-13T09:49:20.173

26

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.

edited May 13 '22 at 09:49

answered Jul 03 '14 at 09:05

azerafati

18,215
7
67
72

7

Sure, except that one is Chrome only. Open it in Firefox and you'll get `The image cannot be displayed because it contains errors`. See http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80/[20121112]%20The%20smallest%20transparent%20pixel.html – Jens Roland Jan 24 '16 at 10:23
1

@JensRoland, yeah right I confirm it's not working on Firefox! though when using it over a year ago I don't remember any problem with FF! weird – azerafati Jan 24 '16 at 11:51
@JensRoland That link solved it for me. I needed a transparent PNG: if you change the opacity on an img whose src is the clear gif, when you reset opacity, the clearness is glitched. – Tom Jun 27 '18 at 21:49
1

This doesn't work in Chrome either. If you open `data:image/gif;base64,R0` directly in Chrome and compare it with this answer, it shows the same 'broken' 16x16 image. Thus you are fooling yourself into thinking Chrome is rendering it correctly as a 1x1 transparent GIF. – bryc Apr 07 '20 at 14:59
@bryc, It seems that is completely true, though I have used this 5 years ago and back then it was working or I've been mistakenly thought it's working. therefore everyone now should use https://stackoverflow.com/a/19891866/3160597 I guess – azerafati Apr 07 '20 at 15:26
@azerafati That one is better, but it is **white** in FF and blank in Chrome, which can be an issue if used on a non-white BG. It's also not futureproof as it strips one byte required by most image software. Like you said, what worked then doesn't work anymore... I had an even shorter 14B one that worked back then only in Chrome, which stopped working. Check out this answer here that demystifies the lot: https://stackoverflow.com/a/15960901/815680. I use a 32B version that is transparent everywhere. :D cheers – bryc Apr 07 '20 at 16:17

score 16 · Answer 5 · answered Nov 10 '13 at 16:05

16

data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=

is smaller :D

answered Nov 10 '13 at 16:05

Alex

66,732
177
439
641

1

True -- that one is adorable! But is it a standard compliant gif? Could you elaborate on how you arrived at it? – Jens Roland Nov 11 '13 at 21:07
2

http://proger.i-forge.net/The_smallest_transparent_pixel/eBQ – Alex Nov 12 '13 at 22:22
2

The link states that both this and the 14-byte one are for Chrome only, and that there is no guarantee that it will work across all browsers. Furthermore, the resulting gif doesn't seem to open in any image editor. So I'd be hesitant to use it. – Jens Roland Jan 24 '16 at 10:31
@JensRoland adding one missing byte (LZW header byte) will make it open in most image editors (change `=` to `C`). It is black in PS/Paint/Gimp, white in Firefox, transparent in Chrome, due to no color information present and it is up to the software to decide the default. – bryc Apr 08 '20 at 14:54

score 9 · Answer 6 · answered Apr 14 '14 at 23:07

1px by 1px JPEG image

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

Can be significantly smaller: `/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAP//////////////////////////////////////////////////////////////////////////////////////wAALCAABAAEBAREA/8QAJgABAAAAAAAAAAAAAAAAAAAAAxABAAAAAAAAAAAAAAAAAAAAAP/aAAgBAQAAPwBH/9k`. But if you want a white 1x1 square, might as well use GIF: `data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAAC` — bryc, Apr 07 '20 at 16:55

score 5 · Answer 7 · answered Feb 28 '14 at 15:18

5

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=

answered Feb 28 '14 at 15:18

Maël Nison

7,055
7
46
77

That one is fine if you want a white pixel, but I was looking for a more general-purpose transparent one. – Jens Roland Jan 24 '16 at 10:33

Blank image encoded as data-uri

7 Answers7

The smallest I've ever seen

Linked