To feel good a web site should be fast. Now, pictures slow down the rendering of the site. You should therefore tweak the images you display so that your site does not become too slow. To achieve this we can adjust several variables: the picture resolution, the color sampling and the picture format. Using wisely all three at once saves plenty of space and speed.

Obviously it is not always necessary to choose the absolute best image quality and maximum size to display on your site. This is all the more true since images delivered by digital camera are becoming larger and therefore use a lot more space. Also, screens resolutions do not grow as fast. It's not reasonable nowadays to seek to display 12 or 16 megapixels pictures.

To reduce the size of the picture file the first thing to do is obviously reduce its resolution. The right choice of resolution obviously depends on the importance of the picture in your site. For example, you can choose a resolution of 1500 x1000 pixel  to display a full screen picture or smaller for less important pictures. It's up to you to determine the display size you want. Remember that you may need to provide several versions of your picture, like a full screen one,  a thumbnail and an intermediate version. Don't worry too much, more and more CMS automatically generate these different versions starting from the full screen version.

Decrease the resolution of your pictures with your favorite photo editor. Remember to keep the aspect ratio, or your image will be distorted. The file format is also important: a compressed format is better to keep the file small. Currently the convention is to use the JPEG format, since it gives you both good quality and a small file size if you use it correctly.

Also remember to choose the right image sampling for your picture. There's no need to display an RGB image if it is in fact a black and white picture, or to choose a color depth of 32 or 48-bit since screens won't be able to display this many colors. It is possible to take this further this argument by "depleting" (the option is named posterize) voluntarily the number of colors displayed. Used with the JPEG format, this can save you a lot of space and speed. Be careful with this last solution. Quality degrades rapidly when removing too many colors. Remember to experiment.

Here's an example with different resolutions and file sizes: the original is a 4000x3000 picture. The raw file is 14 MB, the JPEG file generated by the camera is 6.7 MB, and the TIFF file weighs 34.3 MB!

Here are 400x300 pixels versions:

Image saved as maximum quality JPEG: 130.3 KB

Image saved as medium quality JPEG: 32,3 KB

Image that shows the differing pixels between the two versions.

Between the first and second version you go from 130.3 KB to 32.3 KB, for a saving of 98 KB, which for a large number of pictures or images can easily make a big difference in rendering speed. As you can see from the diff image, and by comparing the two images yourself, they are slightly different but with a visual result quite acceptable.

There is another widespread technique, which more adapted to painted images than to pictures: The color palette.

This is not the one used to choose color shades but it is related. The principle is to describe the color of the image as belonging to an already established color palette. You can choose already standardized palletes, like the indexed colors palette or any other. The effect is similar to posterize: the purpose here is to reduce the file size by reducing the number of colors, so it only works with images which do not suffer too much to lose color nuances. That is why it doesn't work very well with photos. For painted images it is very effective.

Conclusion: You can gain a lot on your web site display speed by reducing the file size of your images. It will in most cases involve an unnoticeable loss of quality and you can illustrate your site without making it too slow to render.