Web Image Formats Size and Quality Comparison

Photoshop can save files (and open them) in many formats. The four that I will be discussing are the most popular formats on the web: GIF, JPG, PNG-8, PNG-24. These four image types can be grouped together. The first set is GIF and PNG-8, which are the low palette / pixel perfect group. The second set is JPG and PNG-24 and is the high palette / pixel pooling group. Each image format has it's pro's and it's con's, if they didn't then we wouldn't have four very popular formats.

There are two attributes to an image once it has been saved for web use (exported). These two attributes are file size and quality of appearance which should be as low and as high as possible, respectively. (Both GIF and PNG-8 images look exactly the same as they have the same possibilities for their palette. For this reason the two formats will be treated the same in this tutorial. The deciding factor should be file size).

General rule of thumb: Small images where each pixel matters (affiliate buttons, icons, some avatars) should be in the GIF/PNG-8 format. Larger images with multiple colors (photographs) should be in JPG format. If you want the best of both worlds and your image is formatted in a way that size is minimal, go with a PNG-24 format (this works best with my tutorial screenshots).

Amanda (my ex-girlfriend) will be the guinea pig for this tutorial. This is a vector that I did of her in a bathing suit (I figured if I put up the vector and not the real pic she would punish me less severely if she finds out :p).

GIF with a palette of 8 => 18KB

One of the worst things you can do with a gif is give it a gradient (sunset).

Gif 8 Colors
Gif 8 Colors

GIF with a palette of 16 => 24KB

More colors, gradients still look bad.

Gif 16 Colors
Gif 16 Colors

Gif with a palette of 256 => 70KB

The colors are almost correct but the filesize is huge.

Gif 256 Colors
Gif 256 Colors

PNG-8 with a palette of 16 => 23KB

Looks just like GIf@16 colors, same filesize.

PNG-8 16 Colors
PNG-8 16 Colors

PNG-8 with a palette of 256 => 63KB

Looks just like GIF@256 colors, smaller filesize.

PNG-8 256 Colors
PNG-8 256 Colors

JPG with a quality of 1% => 7KB

Looks like a cheap webcam, however definitely the smallest.

Jpeg 1% Compression
Jpeg 1% Compression

JPG with a quality of 50% => 20KB

Average quality, good compression level for the web.

Jpeg 50% Compression
Jpeg 50% Compression

JPG with a quality of 100% => 101KB

Great quality, however the filesize is huge.

Jpeg 100% Compression
Jpeg 100% Compression

PNG-24 => 173KB

Best quality so for, highest file size so far.

PNG 24 bit
PNG 24 bit

BMP with 24 bits per pixel => 388KB

This is just a joke, really. BMP's use no compression whatsoever.

Bitmap 24 bit
Bitmap 24 bit

Conclusion

These results will vary with different image types. This image has a combination of both simple areas (foreground) and complex areas (background). Using actual photo's would yield much worse results for palette based filetypes and even better results for JPG. Using a simple geometric image would have best results for palette based and show artifacts on the JPG's. No matter what image we use, if the dimensions were the same, the BMP would keep the same filesize.

Our two goals when dealing with compression and web graphics is to 1) have the image look attractive and 2) have the image be as small as possible. If you need animations in your image, you'll need to use a GIF, however if you'd like to do something like transition between images and have good quality, consider using a javascript or flash based slideshow using JPEG's. If you are using a photograph, always use the JPEG formats (I stick with 85% compression). When dealing with non photo-realistic / smaller images/icons, always use GIF or PNG's.

Thomas Hunter II Avatar

Thomas is the author of Advanced Microservices and is a prolific public speaker with a passion for reducing complex problems into simple language and diagrams. His career includes working at Fortune 50's in the Midwest, co-founding a successful startup, and everything in between.