GIF, PNG, JPG. Which One To Use?

By | August 3, 2009 | CSS

16

If you’re starting out in web design you may be familiar with the different types of file formats used for images on the web, but it can be confusing trying to figure out which file type you should use. This is short guide outlines the differences between the file types and also uses a couple of examples to show you how the file size varies depending on which file type you use.

GIF

Let’s start with GIF. Graphics Interchange Format (GIF) is one of the file formats used to display indexed-color graphics and images in HTML documents on the web. Indexed color means that it will only display a maximum of 256 colors. For this reason, GIF is NOT a good format for saving photographic type images with many colors. GIF is good for saving images with flat blocks of color such as logos or simple illustrations. Another very important feature of GIF images is that is allows you to preserve transparency. It uses an LZW-compressed format designed to minimize file size.

JPG or JPEG
Joint Photographic Experts Group (JPEG) format is used to display photographs and other continuous-tone images on the web. JPEG format supports CMYK, RGB (millions of colors), and Grayscale color modes. Unlike GIF format, JPEG retains all color information in an RGB image but compresses file size by selectively discarding data. This is known as lossy compression, and can result in a loss of quality if a high level of compression is applied. In most image editing programs you can specify how much compression/loss of quality you want. Generally, if you choose the maximum quality option, your image will be indistinguishable from your original photograph. However, you can also save your files with lower quality settings that still produces a reasonably good image (or at least good enough for the web) image. Another important difference between GIF and JPG, is that JPG does not preserve transparency.

PNG

Portable Network Graphics (PNG) is a little bit like the best of both worlds. It was developed based on GIF, for lossless compression and for display of images on the web. Unlike GIF, PNG supports 24?bit images and produces background transparency without jagged edges; however, some older web browsers do not support PNG images. PNG format supports RGB, Indexed Color, Grayscale, and Bitmap mode images. PNG also preserves transparency in grayscale and RGB images.

So let’s take at how each of the file formats fare using two different images. I’ve saved a logo and a photograph using Photoshop’s “Save For Web and Devices” command. We’ll start with the logo which is made up of only a few colors.

  1. Logo Saved As Transparent Gif
    File size 10.17 K

    logosavedastransparentgif
  2. Logo saved as JPG.
    File size 63.05K

    logosavedasjpeg

  3. Logo saved as PNG-8

File size 9.16K

logosavedastransparentpng8

4. Logo saved as PNG-24
File size 17.74K

logosavedastransparentpng24

The GIF and the PNG-8 are fairly good quality, but a little bit jagged around the edges when saved with transparency. This can be avoided to a certain extent by setting a matte the same color as your background when saving. The PNG-24 is excellent quality with very smooth lines even when saved with transparency. As you can see the JPG file size is very large when compared with the other file types.

Now let’s take a look at how a photographic image with millions of colors behaves when saved in each format. The image is 500 pixels wide, has a resolution of 72ppi and in its “raw” or unsaved state has a file size of 559K.

1. Photo saved as GIF
File size 119K

picsavedasgif

2. Photo saved as JPEG with quality setting of 8
File size 39K

picsavedasjpg


3. Photo saved as PNG-8
File size 106K
picsavedaspng8

4. Photo saved as PNG-24
File size 153.8K

picsavedaspng24

So to finish up, here are a few rules of thumb when saving for the web. You’re looking for a compromise between the quality of the image and the file size.

~ For photographic type images, JPG is best

~ For logos or images with blocks of flat colour and no gradients, GIF or PNG8

~ For images using effects such as drop shadows or glows, which also require transparency, choose PNG24.

Related Reading:

Learn Responsive Web Design

Join Learnable $29 Includes all SitePoint books

Jennifer Farley

Jennifer Farley is a designer, illustrator and design instructor based in Ireland. She writes about design and illustration on her blog at Laughing Lion Design.

More Posts - Website - Twitter

{ 16 comments }

Mr. Toad November 2, 2011 at 11:47 am

Everyone just lost the game

Antonio Maggi August 25, 2009 at 7:13 pm

Hey, thank you very much for the clarification! very clear

Flavio Curella. August 7, 2009 at 8:05 am

this article is misleading about the png-8 format.

The format actually supports alpha transparency. IE6 will just not show any pixel with opacity < 100. Also, Photoshop can’t export PNG-8 with alpha, so people keep thinking it can’t be possible.

I think nowadays is preferable to use png-8 with alpha transp. than using various iepngfix solutions:

a) they are computable-heavy
b) some of them are complex to deploy
c) it’s just not worth it, given the current market share of IE6 (although YMMV).

Usually jagged borders isn’t really that big deal (and I work for the graphic design industry)

ktdreyer August 5, 2009 at 5:35 am

If I’ve chosen PNG for an image on the web, I like to use optipng to compress the PNG further. It usually saves a few KB, and every little bit helps :)

logic_earth August 4, 2009 at 1:32 pm

@Craig Buckler, PNG-8 can have partially transparent pixels! And multiple colors can be transparent, unlike GIF.

TomBradshaw August 3, 2009 at 10:25 pm

PNG’s are great, though it’s important to use a PNG Fix for IE6 – see here http://labs.unitinteractive.com/unitpngfix.php

Craig Buckler August 3, 2009 at 6:16 pm

IE5.5 and above supports PNG-8. PNG-8 is very similar to GIF in that it only supports 256 colors and pixels are either transparent or not – they cannot be partially (alpha) transparent. In general, I find PNG-8 files sizes to be smaller than GIF for all but the smallest of graphics.

IE also supports 24-bit PNGs. However, IE5.5 and 6.0 does not support alpha transparency unless you use a filter defined in CSS or JS. IE7 and 8 have native support.

It’s probably worth mentioning that PNGs normally specify a gamma (gAMA) correction value that can make colors mismatch in some browsers – especially IE6. The best fix is to remove the gAMA value with TweakPNG or a similar tool.

Bryan Price August 3, 2009 at 12:49 pm

I find it interesting that as I scroll through the pigeon examples, I’m losing the detail of the background because it blurs into black. Move my head up (or down) and I see the full detail, but leave it at the top of the screen where I’m sitting, and it all goes black.

Tyssen August 3, 2009 at 10:45 am

It’s also worth mentioning that the file size of PNGs can be reduced further still using PNG compression tools after being exported from the likes of Photoshop or Fireworks.

Anonymous August 3, 2009 at 9:53 am

Gradients for GIF are ok, so long as the gradient is vertical (ie made up of horizontal stripes). GIF uses run length encoding which roughly translates to “the next X pixels are Y colour”. That’s why it’s so bad at photos because the colour changes nearly every pixel. That’s also why a vertical gradient works ok, but a horizontal one doesn’t.

masm50 August 3, 2009 at 9:14 am

A few issues here

“Portable Network Graphics (PNG) is a little bit like the best of both worlds. It was developed as an [missing word] to GIF…”

More importantly, is there a reason that for each image for comparison of jpeg, gif and png are all displayed as PNGs on this page? That will alter any image results massively surely?

agentforte August 3, 2009 at 4:49 am

I find that graphics with gradients and many colours can have a smaller file size in GIF format. I think that the distinguishing factor of whether a JPG should be used is whether the image is a photo or man made graphic. A straight gradient created in Photoshop does not have nearly as many colours as a natural gradient in a photo.

Angie at BlogCoach.org August 3, 2009 at 4:26 am

Fabulous, easy to understand explanation. Thanks so much!

boen_robot August 3, 2009 at 3:29 am

@dougoftheabaci
Please don’t mislead people.

IE6 supports PNG images. What it doesn’t support (and what the hacks are for) is alpha transparancy in PNG images.

(BTW, the article appears to have forgotten mentioning alpha transparancy – with GIF each pixel can be completely or no transparent, and in PNG you can have transparancy between 0 and 100 percent)

IE7 added support for alpha transparancy[1], but PNG image support was already there, since IE4 actually[2]. IE8 fixed a few bugs with PNG renderings (I think they were related to color profiles or gamma correction or something like that… I’m not sure), but it didn’t include additional “features” from PNG. Most PNG implementations treat(ed?) PNG images differently due to gamma correction issues [3].

[1] http://en.wikipedia.org/wiki/IE7
[2] http://en.wikipedia.org/wiki/Portable_Network_Graphics
[3] http://hsivonen.iki.fi/png-gamma/

dougoftheabaci August 3, 2009 at 2:50 am

Note: By some older browsers the author means IE6 and, to a lesser extent, IE7. IE6 has no support for PNGs. This can be fixed with a bit of javascript. IE7 has support for some PNGs. IE8, as far as I’m aware, supports all PNGs. Firefox, Safari, Chrome and Opera have supported PNGs for long enough that they are safe to use with those browsers.

General rule of thumb is if you need to support IE6 and don’t want to use the JS hack you need to use GIFs and JPEGs. If you don’t mind using the hack or don’t care about IE6 use PNGs and JPEGs.

It should also be noted that PNGs will be lower file size and higher quality than GIFs in most instances when properly compressed.

Sai Bharadwaj August 3, 2009 at 2:40 am

You’ve done it. Wonderful Article & Clean explanation baby.

Comments on this entry are closed.