1

Base64 uri encoding images into a css file prevents and extra request and speeds up a page load.

Assuming you don't have to support the older IE's which don't support base64 uri.

What's the best policy for using base64, I tend to encode the less than 8KB files. But why not just encode everything?

CafeHey
  • 5,699
  • 19
  • 82
  • 145

3 Answers3

4

A few problems with sending everything as base64 inlined images :

  • If your image is used from more than one place, inlining it prevents cache use
  • base64 encoding takes more place than binary (about one third more)
  • the browser starts to render as soon as it can, if your CSS contains even the images not needed for the home page, you make the rendering slower
  • even if having less requests is generally good, having a few requests isn't so bad as the browsers makes them in parallel
  • there is a much better optimization when you consider the set of small images you use on all pages, especially if they share the same palette : sprites
  • you probably change the CSS more often than the images. Having only one file means everything must be downloaded again each time something changed. Not a good use of the cache.

You could stick to your today's policy (as long as you don't inline images in css that you call as separate files from other places, like HTML) but I personally find this less powerful that properly configured cache parameters and sprites.

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
0

(I'm assuming you're talking about embedding images into an external .css file.)

This is an option if:

  • there aren't too many such images
  • the images are small
  • the images apply to virtually all pages the CSS is included in

This is a bad option because:

  • images can be large, the file may easily grow to several megabytes quickly
  • images are even larger base64 encoded vs. raw binary
  • it forces the client to download all images at once, which may not be necessary (see third point above)
  • it doesn't allow the client to manage cached files separately; i.e. it can't discard large image files while keeping small CSS files, possibly forcing it to download both together again very soon
deceze
  • 510,633
  • 85
  • 743
  • 889
-1

Base64 URL might prevent extra requests, but it also significantly increases the size of the images involved, so the performance benefits of having one fewer request may be outweighed by the extra weight in the total download size

Reducing the number of requests may be a good idea, but it's not the only factor involved in your site's performance. In fact, for most sites it's probably relatively low down the list.

In addition, if the images or your CSS ever change, then having them all in a single file actually works against you for people who have already visited your site, because the whole thing will have to be thrown out of the cache and reloaded. If they were separate files, only one of them would need to be reloaded when it changes. Again, you're increasing the total amount of downloading required.

Don't try to optimise blindly; Use a site performance analysis tool to work out where your specific bottlenecks are and fix the most important ones first.

Spudley
  • 166,037
  • 39
  • 233
  • 307