Nov 05

Images are probably the most used media type in a page. Here are some simple suggestions for improving the performance of a page that uses images:

  • include images in its native size. Do not resize the image by using the width and height attributes of the img tag (or its equivalent CSS properties). If needed, the image should always be resized in a graphical editor before being used in the site. This will at least save your client’s browser some CPU time which might be better used in other important operations;
  • try to avoid making several image requests in a page. When possible, you should use image sprites because they will typically minimize the bandwidth for getting the images and you’ll only need one request to get all the images. Btw, it’s also a good idea to check the results of the sprites before publishing them (the current tools do a good job when the images share the same dimensions, but they tend to do a less than stellar job when you’re joining images of different sizes);
  • when available, go with the png format. A possible exception to this rule is showing images which are categorized as photos (in that case, jpeg might be a better option);
  • use the data URI protocol for small images. Notice that small is the key feature here. Getting the base 64 encoding string that represents the image can be done through one of the free tools available on the web (here’s one);
  • when possible, use svg instead of bitmap images. At the same time, try to avoid complex svg paths because they do take some time to process;

And that’s it for now. Stay tuned for more.

3 comments so far

  1. chrisb
    12:29 pm - 11-5-2012

    The first point may be worth modifying for certain situations – techniques such as Compressive Images may provide a greater benefit in perceived performance through bandwidth savings

  2. luisabreu
    7:50 pm - 11-5-2012


  3. Chris Haines
    12:51 pm - 11-6-2012

    Regarding Data URI images – Visual Studio 2012 now includes the ability to convert an image directly in your CSS to a data URI. It will embed the image and set up the CSS for fall-back automatically for you.