Which Image Format is Best

This was originally posted on YourTotalSite on June 10, 2005

When developing a web site you may not think much about what image format you use but you could end up saving yourself or your organization a chunk of change in bandwidth costs by making your choice more wisely. On the web today there are three main image format types to choose from and all have their advantages and disadvantages. You have a choice of three different compressed image formats: GIF, JPEG or PNG. They each use different techniques to compress the image information.

GIF

GIF uses a lossless compression which means that no quality is lost in the compression. The uncompressed image stores its information in a linear fashion. Each line of pixels is read from left to right. An interlaced GIF file stores the lines of the image in a different order. First lines 4, 8, 12, 16 and 20 may be read in. Then lines 2, 6, 10, 14, and 18 and so on until the entire image is read. When the image is read in this way, a user with a slower internet connection may be able to understand or read the image before it has fully loaded.

The GIF format achieves its compression by removing repeated patterns within the GIF file and storing references to these sections in a list, also known as a hash. Images with horizontal lines of the same color or pattern benefit most from the GIF format. This would include images like background graphics, images with text and patterned images.

Another great advantage is the ability to create animated images. You’ve no doubt seen them throughout the internet. Especially if you were around for the heyday of the 90’s! An animated GIF is essentially a sequence of GIF files with some timing information included. Animated GIFs, however, can run into large file sizes awfully quickly and with very few frames of animation. While it may be a fairly ubiquitous format, if you have to do animation, you may be better off going with Macromedia Flash. If one frame is 15KB then 20 frames could suddenly find you well over 100KB just for one animated image.

Another advantage to GIF files is transparency. A color within the color table can be selected as the transparent color. In doing so, wherever that color occurs, you’ll be able to see through to the HTML background. One of the largest downfalls to the GIF format is its inability to have a color palette of more than 256 colors. This can create poor looking images when used on a photograph which may originally have thousands of different colors.

JPEG

JPEG uses a lossy compression which means that image quality is lost in the process of compressing the image. JPEG compression works by first converting the image from RGB to YUV which stores information about each pixel using brightness, hue and saturation. Then it reduces the amount of information it stores for hue and saturation since differences are less noticeable to the human eye. In trying to decrease the file size of the JPEG (for example, when using the quality slider in Photoshop), you'll tend to notice artifacts occur in flat color areas and especially near edges. As a result, JPEG is best used for images that have more of a variation in colors. For example, images with gradients or photographs can handle a lower quality setting with little noticeable loss in quality. Images with text or large solid backgrounds are best left for GIF or PNG.

PNG

PNG is the relative newcomer to the list of available image formats and it is a formidable one. It is similar to GIF in many ways but even better in others. It is lossless like GIF but supports 24 bit color, unlike GIF which only supports 8. PNG supports alpha transparency, whereas GIF only supports one-color transparency. PNG uses various compression filters to minimize overall image size and can apply different filters on a per-line basis to achieve higher compression. The big attraction to PNGs is its ability to do alpha transparency. Unfortunately, Internet Explorer currently doesn't have full support for it, although there are hacks out there that can pull it off.

If you are not using alpha transparency or do not need more than 256 colors then exporting as an 8-bit PNG is the way to go. On average, 8-bit PNG will be smaller in file size than GIF with absolutely no difference in image quality. PNG and GIF are also very similar in that they both work better with large lines of the same pattern or color. If you do not need alpha transparency but wish to use a color palette greater than 256 colors then you are looking at a 24-bit PNG. It'll be important to test between a 24-bit PNG and JPEG to see which achieves better results. PNG still suffers the same problem as GIF in that they cannot optimize photographs as well as JPEG can.

Is there a winner?

No format is best in all scenarios. Therefore, it's always best to play around with the various formats and compression levels to achieve the best results.

If you'd like to learn more on the history or inner workings of these file formats, be sure to check out the Wikipedia entries on GIF , JPEG , and PNG .

This article has been graciously translated into Chinese by Robin Pan.

Published August 29, 2006 · Updated September 14, 2006
Categorized as Design
Short URL: http://snook.ca/s/655

Conversation

19 Comments · RSS feed
Jonathan E said on August 29, 2006

This is a great write-up on the different options available to us right now. For me, I usually find myself checking a few different options to determine which will generate the smallest file size without significant loss. Depending on the image, it could be JPG, GIF or PNG - there is no best answer for every single case.

Also, for those interested in using PNG images in IE, I posted an article a while back explaining how to use transparent PNG images in IE using CSS and IE's conditional comments.

Kumar said on August 30, 2006

Like JE above, I tend to use whatever has the smallest file size at the given moment. Adobe Photoshop's Save For Web comparison feature is handy, as well as the Export Wizard in Macromedia Fireworks...

It tends to work out that logos and smaller graphics turn up as gif images, high detail photography as jpg and anything with transparencies work best as png... however not all of the above is true in 100% of instances...

What do you tend to lean towards Jon?

Jeriko One said on August 30, 2006

There's only one reason for still using GIF's, the transparency issue in Internet Explorer. I tend to use no transparency at all whenever possible, and if it's inevitable, I prefer a solution via conditional comments and Internet Explorer specific filters. Overall, the disadvantages (256 colors) respectively the advantages of PNG (smaller file size with same quality) are way too big.

Wolfgang Bartelme said on August 30, 2006

Maybe it's also worth mentioning that colors don't match in certain in browsers if you use PNG on a colored background. Safari and Firefix tend to display PNGS slightly lighter.

Another interesting aspect - the file size of smaller images is generelly a bit larger when using PNG instead of GIF.

Matt Turner said on August 30, 2006

Yeah, I've had experiences similar to Wolfgang. I almost exclusively use GIFs for background 'interface' due to rendering differences with PNGs.

Kalle said on August 30, 2006

Jeriko One, PNG's non-half-transparent pixels work in IE as well.

I prefere PNG over GIF any day except when it comes to animation. If used correctly, the PNG image doesn't have to be so large as some of you seem to think. It's only a matter of optimizing.

The "golden rule" I use is: Small Graphics (buttons 'n stuff) = PNG Photos/Bigger Graphics = JPG.

Johan said on August 30, 2006

pngs have a lot of issues due to the software saving

>The "golden rule" I use is: Small Graphics (buttons 'n stuff) = PNG Photos/Bigger Graphics = JPG.

I would say GIFS and JPEGS FIRST:

GIFS
- for cartoonish images, images with 2 or more full colors like logos, icons like arrows, questionmarks
- semi transparent images (with or without matting) but never shadows which looks awfull

JPEGS
- all photographic images (thousands, millions of colors)
- images which have shadows and /or gradients tend to look better in comparison with saving them as GIFS

PNG-8

- like GIF but has a lot of probs with compressing and saving, especially Safari (Gamma) and IE WIN with color tables
here is a good link which explains all flaws with PNGs
<http://hsivonen.iki.fi/png-gamma/>

PNG-24

alpha channel transparency, below IE7 WIN does not work, big file sizes?

Olly said on August 30, 2006

I thought the colour difference thing was down to a slight difference of opinion between IE and Photoshop, but it appears that IE gets it wrong even though the PS bug has been fixed. PNG color oddities in IE has more on the sybject (esp. in the comments).

Jonathan Snook said on August 30, 2006

8bit PNG beats 8bit GIF hands down almost every time (but not always). As many have mentioned, IE has gamma issues with PNG's (as can be seen by the nav on snook.ca in IE).

24bit PNG vs JPG for things like gradients can be a toss-up. If the image is large, I usually have to go JPG. If it's small to medium, or has sharp edges (eg: along text) then PNG is often the way to go.

Andy Kant said on August 30, 2006

I use PNG unless I have problems with the gamma in IE (didn't know there was a fix until I read some of the other posts), then I use GIF. I limit most of my images to 8bit to save on filesize. I only use JPG for photos.

Sam said on August 30, 2006

Same here, I use GIF for the small images, logos, backgrounds. JPG should be used for the photos and images with full color scheme. Had the same experience with PNG in IE.

Martin said on August 30, 2006

There's only one reason for still using GIF's, the transparency issue in Internet Explorer

I disagree. PNG also supports binary transparency as GIF does. For me, the only reason would be animation.

I use PNG unless I have problems with the gamma in IE [...], then I use GIF

I didn't know this problem, but you could try to save the PNG without gamma information.

For maximum compression, I suggest optimizing the images with tools like PNGOUT.

Martin said on August 31, 2006

I verified that removing the gamma information solves the problem with darker images in IE. No reason to use GIF for non-animated images anymore :)

pawel said on August 31, 2006

If you are not using alpha transparency (...) then exporting as an 8-bit PNG is the way to go.

It's possible to create 8-bit PNG with alpha transparency.
Photoshop 7 (and probably newer versions - I'm not sure) doesn't support 8-bit png with alpha, so I export to PNG-24 and then use command line pngquant that reduces image to 8-bit palette.
(examples)

Justin Makeig said on August 31, 2006

I use pngcrush to compress and, more importantly, remove the gamma information from PNG images saved from Photoshop.

Here’s the rudimentary shell script that I use to do the “crushing”. (It only replaces the file if it’s actually changed.)

#!/bin/sh
#
# Uses pngcrush to crush a given PNG file and remove the gamma.
# Only replaces the file if it was actually changed.
#
if [ -z $1 ]; then
	echo "Usage: ./crush.sh myfile.png"
	exit 2
fi
export CHECKSUM="`md5 -q $1`"
export TMP=".TMP"
export TMPIMG=$1$TMP
pngcrush -rem gAMA $1 $TMPIMG
export NEWSUM="`md5 -q $TMPIMG`"
if [ $CHECKSUM != $NEWSUM ]; then
    cp $TMPIMG $1
    echo "$1 was sucessfully crushed"
else
    echo "$1 was untouched"
fi
rm $TMPIMG
Erick Schluter said on September 09, 2006

Got it bookmarked for future reference! Allthough the differences where known to me, it's always nice to have it nicely written down. Great!

Wolter Hellmund said on April 07, 2007

I think that your blog has a very nice and clean style. I like the date stamp on the left top part.

The information you have was just what i was looking for.

Steve said on September 30, 2008

Surely the best way to avoid IE's issues with PNG is just not to use IE? Firefox is superior in every way (not least security and standards compliance) anyway.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.