Some tips to improve the performance of images in web pages

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.


~ by Luis Abreu on November 5, 2012.

3 Responses to “Some tips to improve the performance of images in web pages”

  1. 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. Agreed.

  3. 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.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: