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.