Is it safe to use to display images?

Question

I've learned that it's possible to embed an image in an HTML page like so, instead of linking to a separate image file:

<a href="data:image/png;base64,...(blah blah base64-encoded png goes here)..."
  width="70" height="38" alt="image embedded using base64 encoding!"></a>

Is this "safe", as in will all modern browsers be able to view the image, as long as I stick to common formats like PNG/JPG? Are there any downsides, other than base64-encoding the image increasing the image size by a bit?

Thanks.

Why would you want to use this instead of referring to the image on the server? — Michael D, May 04 '11 at 20:27
We're generating an HTML file with images in it - it'd be better to embed the images in the file, so users only need to move the one file, rather than moving the file and associated images when they want to transfer or upload it. — Colen, May 04 '11 at 21:00
@MichaelD have you heard of private images? If you want to authenticate the image request, the current web spec provides no way to do this. and tags do not provide a means to set authentication headers, and cookies are a thing of the past. Thus you have no choice but to do this ridiculous data URI hack. — JeneralJames, Jan 14 '21 at 11:49

score 20 · Accepted Answer · answered May 04 '11 at 20:26

20

Yes, this is safe - all major browsers support the data URI scheme.

One downside is that if you use the same image a number of times in the page, it will be encoded several times vs downloaded once.

Another is the size limit imposed by some browsers (IE 8 only allows up to 32k).

You can also use this in CSS to mitigate the download issue.

answered May 04 '11 at 20:26

Oded

489,969
99
883
1,009

2

ugh, that size limit ticks me off. :( Thanks for the link, very useful. – Colen May 04 '11 at 20:36
@Oded : does it will work for e-mail/webmail clients? – user2284570 Nov 16 '13 at 16:19
1

@user2284570 - I doubt most email clients would support this. Some webmail clients might strip out such URIs. You will need to test. – Oded Nov 16 '13 at 18:13
@Oded : thank you. This was for putting html page without needing a website. (aka "please click here in the case you've got trouble while reading this e-mail") – user2284570 Nov 16 '13 at 18:35
This no longer works in many browsers. It was never "safe" in terms of "security" – b7kich Jun 22 '20 at 18:58

score 4 · Answer 2 · answered May 04 '11 at 20:28

All modern browsers should be able to view these types of images. I have not verified, but this capability has been around for a good while and is probably widely supported.

But you also asked for downsides. One downside is that it is common that HTML markup is dynamically generated and therefore cannot be cached.

If you have static html pages then your html is cachable in that case using data urls might even be better for performance if the images are not too big.
If you are including this in any dynamic html (php, cgi, jsp, shtml, just about anything other than xml,html,xhtml,htm) Then there will be zero caching and therefore the images will have to load each time instead of just the first time.

More downsides that probably don't relate

Also on a general note, base64 takes exactly one and a third times as much space as having the file straight. That is why for larger images it might be a little less good even if it is a static html page. But if your webserver supports gzip, then it will not quite take an entire third longer for the images.
And even if it is static html, if you use a data url (can be called inlining your images), the whole page will not display before the images like normal. But for pages with small images that should not matter
And finally, if you have large images, you would might want to do this because the browser would not be able to use multiple download connections like it normally does.
Also @Oded's downsides (and upside) that I did not think of

Is it safe to use to display images?

2 Answers2

Linked