GIF, PNG, JPG. Which One To Use?

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 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:

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like Foundations of Photoshop.

Comments on this article are closed. Have a question about Photoshop? Why not ask it on our forums?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Sai Bharadwaj

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

  • dougoftheabaci

    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.

  • http://xslt2processor.sourceforge.net boen_robot

    @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/

  • Angie at BlogCoach.org

    Fabulous, easy to understand explanation. Thanks so much!

  • http://blog.thenetgen.com agentforte

    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.

  • http://www.audiomelody.com masm50

    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?

  • Anonymous

    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.

  • http://www.tyssendesign.com.au Tyssen

    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.

  • Bryan Price

    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.

  • http://www.optimalworks.net/ Craig Buckler

    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.

  • http://www.crearedesign.co.uk TomBradshaw

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

  • http://logicearth.wordpress.com logic_earth

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

  • http://www.ktdreyer.com/ ktdreyer

    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 :)

  • Flavio Curella.

    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)

  • Antonio Maggi

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

  • Mr. Toad

    Everyone just lost the game