Someone sitting on the curb

Learn how to optimize pictures for websites without sacrificing quality.

The benefit of small pictures is immediately obvious. Requiring less bandwidth will reduce your cost and the cost to your visitors (time or volume charges). People will not remember your site as being slow and come back again (although slowness might happen for other reasons).
I also reduce the size of personal images I send via email to friends and family.
It is thoughtful not to waste other people's time and mailbox space.
The image on the left is only 13.8kB and can be loaded, even through a dialup connection, in a fraction of a second (the text on this page is bigger). Further optimization could reduce the size of this image to about 10kB without too much loss of quality. To save time, I have automated my workflow (including the final compression), leaving some room for further improvements.
I will demonstrate how to optimize your images with Photoshop, but you should be able to reproduce these steps with just about any Photo Editor

Image Size

Always resize images to the exact size you wish to display on your website.
Many people upload a large file to their web server and reference this file in the html code at a different size. The web browser will always load the entire picture in the background before shrinking it. Save your visitors and yourself the hassle and cost by resizing your images accordingly.
To finalize your layout later, design the page with larger pictures that you can easily resize, but replace them later with an image resized to final specs.
Photoshop Resize Dialog Open the Image Size Dialog in Photoshop (Image -> Image Size). Enter your desired width or height, but keep "Constrain Proportions" selected. Always use the "Bicubic Sharper" method when you shrink images.

Image Formats

Recommending image formats is always a gamble. This section will generate some hate mail, but here is my take on formats.
Today, we can find three dominant image formats on the web. Those are JPG, GIF and PNG.
Each of these formats has advantages and disadvantages.

I always use JPG for photographs. JPG format is using 24-bit to represent colors (8-bit per channel = 256 different shades per channel). To reduce the file size, the JPG algorithm segments your picture into 8x8 squares and frequency-transforms them. Compression cuts out high frequencies (fine details). A higher compression will result in a greater loss of details. This will result in the blocky (from the 8x8 blocks) look of JPG artifacts. Additionally JPG performs a lossless compression (similar to zip, LZW). That is also the reason why you cannot gain much by zipping your jpg files (try it), but you can gain a lot by zipping a word document.
Due to its nature, JPG is perfectly suited for photographs. Compression will not be as obvious on nature pictures (randomness of details) then on large surfaces (architecture). On large areas with uniform color, compression becomes more evident.

For screenshots of dialogs, I always use GIF. In contrast to JPG, GIF does not use lossy compression, but like JPG, it also uses lossless compression. GIF images can be very small, since you can limit the amount of colors. While JPG supports 24-bit colors (=16.7 Million Colors), GIF supports 1-bit to 8-bit (2,4,8,16,32,64,128,256). Dithering interpolates missing colors. This makes it ideal for large uniform colored areas (like dialogs).

Below I have compressed a simple dialog with GIF and with JPG trying to get approximately the same file size. Since JPG uses a lot more colors, the compression needs to increase to make up for the difference. For such images, GIF is always superior. GIF also allows combining multiple images into little animations and you can use transparencies (since pictures are always square, you can have a round ball on a transparent layer where the background of your webpage shines through).

GIF Image with 16 colors

JPG image of same size

Other Formats

PNG was developed to improve GIF and in many ways, it does. Since Compuserve patents some of the algorithms in GIF, open source applications sometimes do not support it. PNG aims to combine the benefits of JPG and GIF. You can either use an 8-bit color palette (similar to GIF), or a 24-bit (like JPG). Since Photoshop lets me reduce the colors of the GIF files even below 8-bit, I have always been able to get smaller files using GIF.

JPG2000 and the new Microsoft HD picture format are all intended to replace JPG, but I do not see this happening any time soon. JPG2000 offers better compression and the Microsoft format offers an increased bit depth. JPG uses 8-bits per channel = 24-bits, Microsoft HD Picture use 8-bits/channel, 16-bits/channel, or 32-bits/channel (that is 96 bits per pixel).

Optimizing with Photoshop

I used Photoshop to optimize Images for the web, because my entire workflow revolves around it.  I am now using a combination of Photoshop and Irfanview to preserve the EXIF data, including the GPS location stamps that I added.
JPG files contain a lot of information besides the pixel values, like EXIF data (camera settings, location …) or thumbnail previews. Not all of this is immediately visible when you are using a picture to illustrate something and can even be unwanted. Image manipulations become obvious if your image editor does not update the preview. EXIF information can reveal more then you want to show. You can strip all this information and optimize the compression level with one simple tool in Photoshop.
Select File -> "Save for Web …" to open the dialog.
A window like this, with your picture loaded will appear.


Experiment a little bit to get a feeling on how the Quality settings affect the picture. I have found that a Quality of 60 satisfies my requirements most of the time. Observe how the Size and predicted download speeds change when you change the quality settings. When you are satisfied, just click the Save button.
Opening the 2-Up tab, will put the optimized image next to the original for better comparison. Opening the 4-Up tab will load two more images with even higher compression (see picture below).



You can also open the context menu by clicking on the right arrow.
Unfortunately, Photoshop CS2 does not offer an option to keep certain EXIF information. Time and location are lost, making this process unfit for Geo-targeting applications.

Optimize GIF File Selecting GIF in the format tab changes the Quality settings menu. The number of colors influences size and quality of the final image. Dithering will then generate in-between colors with dots of available colors. Look at the blue bar of the Image Size dialog box above. For images with only a limited amount of colors, like program dialog boxes, GIF is preferred.
 

Disclaimer

I deliberately kept this article down to earth for everyone to understand.