Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

share|improve this question
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 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 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 at 19:20

1 Answer 1

up vote 1 down vote accepted

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.

share|improve this answer
    
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 at 18:48

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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