HOME

WORKING WITH IMAGES ON THE WEB

Choosing the best file formats to save images for use on the web.

Sky

Photo of clouds in the sky.

Format: JPEG
Setting: Very High
Size: 30.9K

This image was saved as a JPEG, because of the wide range of colors and extensive gradients. Setting used was 'very high' (80 quality). Final size=30.9 K.

Portfolio Showcase

Photo of a hand holding a large poster.

Format: GIF
Setting: 14 colors
Size: 13.1K

This is image was saved as a GIF, although I did look at some pngs when optimizing. GIF seemed to me to work better, probably because of the lack of gradients. I started with a sixteen color gif, then threw away two peachy colors because they certainly weren't contributing. I was afraid to throw away any more colors and anyway the file size was down pretty small. Setting used was GIF, 14 colors with no transparency. Final size=13.1 K.

Truck

Photo of a text and line drawings, on the back of a truck.

Format: JPEG
Setting: Very High
Size: 39.4K

This image was saved as a PNG, because of the small areas with gradients. Setting used was PNG-8. I started with 64 colors but, oh good grief, there seemed to be so many colors that all just looked like white to me! So I started throwing out some of the white-ish colors. It didn't seem to affect the qualitiy of the image. Throwing out colors was only bringing the file size down a very little bit, however. So I finally settled on 59 colors, for a size of 46.2 K.

Hmmm.... I wondered. Might a JPEG work better? And so I tried a JPEG. While doing that, I noticed that there is an 'auto' setting for the number of PNG colors, so I tried that and found that the 'auto' setting selected 57 colors. But I also discovered that the JPEG high quality image (80 quality) looked every bit as good as the PNG, at a smaller file size. And so I settled, in the end, for a JPEG high quality (80) image. Final size=39.4 K.