Is there a "law of diminishing returns" for converting images to Base64 as opposed to simply using the images themselves?

Question

Say I have some icons on my site (32x32, 64x64, 128x128, etc.), then converting them to Base64 makes sense, right?

Now say I have some high resolution images that are 2MB, 3MB, 4MB, and greater that I am using on my site. Does it make sense to convert these larger images to Base64 or is it "smarter" to simply keep using them as .jpg/.png/.gif/etc.?

If there is such a "law", "rule of thumb", etc. what is the line in the sand?

EDIT: While this post was marked as a duplicate, the linked "original" is from over 10 years ago; browser technology, computers, and the web itself, has changed significantly since then. What would be the answer for today's technology?

Possible duplicate of [Base 64 encode vs loading an image file](https://stackoverflow.com/questions/522897/base-64-encode-vs-loading-an-image-file) — Ruzihm, Oct 15 '19 at 15:55
Why *does* it makes sense? Base64 strings aren't cached by the browser, while a file is. — MiK, Oct 15 '19 at 15:55
What is your objective of having them in base64? embedding in the page? — RobMac, Oct 15 '19 at 16:05
Would you mind if I rephrase the question as "Does the law of diminishing — RobMac, Oct 16 '19 at 15:34

score 1 · Accepted Answer · answered Oct 16 '19 at 15:47

The answer to the questions is yes, and it depends.

If we rephrase the question to: Does the law of diminishing returns apply to using base64 for embedding images in a page?

a) Yes, the law applies

b) It depends on: Image count and size, and your setup (ie HTTP (HTTP/2?) connection type, etc)

The reason being that more images require more connections imply more handshakes, unless you are using keep alive connections or HTTP/2 streaming. If the images are bigger and require more computing to convert from base64 back to binary (plus decompression), then the bandwidth saves come with CPU expense.

In general, if you have lots of images (icons, for example), you could embed as base64. But in that case you also have the following options:

a) Image Atlas: Converting all small images to a single image (one load) and showing only the portion that you need through the page.

b) Converting to alternative formats, such as fonts or SVG, and again rendering what you need. Example: Open Iconic.

Thanks for this informative answer! I was going to ask about using a sprite sheet (image atlas), thanks for including it in your answer. — Brian, Oct 17 '19 at 14:28

Is there a "law of diminishing returns" for converting images to Base64 as opposed to simply using the images themselves?

1 Answers1