This webcomic summarizes the views of many developers when comes the question of what image formats to use on the web.

For those who don’t get the joke, JPEG is a lossy format, meaning that each time the file is edited there is a degradation in quality. That’s why the JPEG side of the comic contains visual artifacts.

JPEG’s popularity is helped by the fact that it is the default image file format of most digital cameras, making it the most common image format on the web.

I love JPEG’s too, but I understand that they are not the solution to every problem. In general I believe its a simple solution to determine which format to use.

• If your image has many colors (such as pictures) I recommend using JPEG.
• If small file size is important or your image has less colors (like icons, buttons) I recommending trying PNG8, which produces a 256 color PNG. As points out Stoyan Stefanov, the human eye has difficulty telling the difference between 200 and 1000 colors. If it looks good then go for it.

I recently setup a command line solution for converting and compressing images from JPEG to PNG8 using ImageMagick and PNGCrush.

By also stripping out the color correction I was able to reduce the size on average by 50% for 290×290 image sizes without any visible loss of quality. This can give a real front-end performance boost on web pages that contain many images.