57

I am thinking of using base64 encoded images for a site I am working on to optimize the load time.

Anyways, before I start, I was wondering: what are the advantages and disadvantages of doing this?

At the moment, I don't see any disadvantage but also I noticed that it is not a technique used very often and that makes me wonder if I didn't miss something.

After googleing the subject I didn't find anything clear so I decided to ask here.

Aniruddh Parihar
  • 3,072
  • 3
  • 21
  • 39
zozo
  • 8,230
  • 19
  • 79
  • 134
  • 2
    Not sure what you are trying to optimize. Do you think base64 is going to compress more than PNG or JPEG? Logically, you'll just end up with images that are four times bigger, so not much of an improvement. – laurent Jul 31 '12 at 08:41
  • Higher image size but I don't do a second request to get the picture. Is sent inside the html. So no headers again. – zozo Jul 31 '12 at 08:43
  • Also I found this usefull but I'm still thinking. http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to – zozo Jul 31 '12 at 08:45
  • @zozo Very similar question: http://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice May be, you can get a exact solution here.. – Mr. Black Jul 31 '12 at 09:20

4 Answers4

67

It's only useful for very tiny images. Base64 encoded files are larger than the original. The advantage lies in not having to open another connection and make a HTTP request to the server for the image. This benefit is lost very quickly so there's only an advantage for large numbers of very tiny individual images.

PhonicUK
  • 13,486
  • 4
  • 43
  • 62
  • Some enterprise CMS (like RedDot) also need CSS images to be "hooked up" - a 4 click process. Depending on your platform it could be a time saver. – ArleyM Sep 21 '13 at 13:17
  • Hello @PhonicUK Sir, can you explain me why another connection is not required when we use data url? After all we need to download image to change it into base 64. I will be grateful if you can explain. Thanks! – Always_a_learner Sep 11 '18 at 09:46
  • Because the data is embedded in the page itself. – PhonicUK Sep 11 '18 at 12:27
  • 3
    Also Google doesn't index base64 encoded images, leads to poorly optimised SEO. – Nishanth Sreedhara Apr 22 '20 at 14:31
  • @NishanthSreedhara you'd only ever use it for small and insignificant images that don't need indexing anyway. Any large images or photos wouldn't benefit from this mechanism in the first place. So there wouldn't be any SEO impact in most cases. – PhonicUK Mar 15 '23 at 12:56
15

the actual length of MIME-compliant Base64-encoded binary data is usually about 137% of the original data length, though for very short messages the overhead can be much higher due to the overhead of the headers. Very roughly, the final size of Base64-encoded binary data is equal to 1.37 times the original data size + 814 bytes (for headers).

In other words, the size of the decoded data can be approximated with this formula:

bytes = (string_length(encoded_string) - 814) / 1.37

Source: http://en.wikipedia.org/wiki/Base64#MIME

Community
  • 1
  • 1
OdinX
  • 4,135
  • 1
  • 24
  • 33
8

Some of downsides as below are already mentioned in this post at How much faster is it to use inline/base64 images for a web site than just linking to the hard file?

  • Most forms of caching are beaten which could hurt a lot if the image is viewed often - say, a logo that is displayed on every page, which could normally be cached by the browser.
  • More CPU usage.
Community
  • 1
  • 1
Anmol Saraf
  • 15,075
  • 10
  • 50
  • 60
  • About caching... the page could be cached itself. The downside here is the processing of the data each time. – zozo Jul 31 '12 at 08:57
  • 4
    Agreed but in case of the logo example there can be different and many pages on the site which won't be cached the first they are visited but the cached image of the logo on all of these pages can be used every time from the first page's cache. – Anmol Saraf Mar 19 '13 at 15:40
  • @zozo Not if the content on the page updates, then both content and images will need to be downloaded and parsed again. – arve0 Jul 30 '17 at 20:11
5

also the response time of the HTML page will increase, because images loads asyn in normal scenario. even if images loads late you can start seeing text.

Another advantage of CDN would lost if only media is being cached in CDN

that advantage will be lost.

Techmaster
  • 1,032
  • 2
  • 12
  • 26