I discovered that you can covert images into base64 strings and use those string within img tags and css like this:

<img alt="" src="data:image/png;base64,iVBORw0KGgoAhEUgAAA ... FTkSuQmCC" />

or this:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAA ... uQmCC);

Serving images in this way seems improve website load times, but may have some drawbacks. I have a few questions about this method:

  • Will the browser cache these images?
  • Is it faster for a page to render this string or an image file?

I am interested in other advantages or disadvantages involving this image serving method.

  • 1
    Considering that base64 encoding an image increases its size by about 40% I don't see how this is going to be useful for decreasing page load times. – Digital Chris Mar 20 '14 at 19:13
  • This advantage (in theory): These images do not require an additional HTTP request and separate download from the server. However, this only involves relatively small images that are only used once and are not cached locally. – Hoytman Mar 20 '14 at 19:18
  • I was considering using this method to display icons, then realized that base64 string images that are used repeatedly outside of css rules can create huge html/php files. So far, I have not come up with a good use for base64 string images outside css style sheets. – Hoytman Mar 20 '14 at 19:20

Will the browser cache these images?

Well, what do you mean by caching in this context? Browsers cache static files so they don't have to request them again. If the image data is provided inline in the HTML page itself, no caching is required.

If the image data is supplied in the stylesheet, then since the stylesheet itself will be cached, the image data is cached with it.

Is it faster for a page to render this string or an image file?

I would guess that the difference there is negligible and not worth considering.

Also, answering a question from your comment, I'd generally only consider inlining image data in the HTML source in situations where there are very small images that are only used on that one page.

  • That is a good point to make a bout the cache. Although the image is not cached in the same way as a regular image, it is cached along with the page that it appears on. – Hoytman Mar 21 '14 at 18:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.