Each of image file types has their own pros and cons. They were created for specific, yet different, purposes. What’s the difference, and when is each format appropriate to use?

Let us tackle the five most common image formats for the web and computer graphics: JPEG, GIF, BMP, TIFF and PNG.


JPEG is short for Joint Photographic Experts Group, and is the most popular among the image formats used on the web. JPEG files are very ‘lossy’, meaning so much information is lost from the original image when you save it in a JPEG file.

This is because JPEG discards most of the information to keep the image file size small; which means some degree of quality is also lost.

Original File:

JPEG Medium Compressed File:

As shown above, image compression is not that evident at first glance. But if you take a closer look, the JPEG image is not as sharp as the original image. The colors are paler and the lines are less defined and the picture is noisier. If you zoom in there are JPEG artifacts like any other JPEG files.

JPEG compression of varying levels, from highest to lowest.

Almost every digital camera can shoot and save in the JPEG format. JPEG is very web friendly because the file is smaller, which means it takes up less room, and requires less time to transfer to a site. Moreover it is less grainy then GIF, the old king of the internet roost. Since 1994, JPEG has been considered the standard.

Pros of JPEG:

  • 24-bit color, with up to 16 million colors
  • Rich colors, great for photographs that need fine attention to color detail
  • Most used and most widely accepted image format
  • Compatible in most OS (Mac, PC, Linux)

Cons of JPEG:

  • They tend to discard a lot of data
  • After compression, JPEG tends to create artifacts
  • Cannot be animated
  • Does not support transparency


GIF, short for Graphics Interchange Format, is limited to the 8 bit palette with only 256 colors. GIF is still a popular image format on the internet because image size is relatively small compared to other image compression types.

Image by If.ufrgs.br

GIF compresses images in two ways: first, by reducing the number of colors in rich color images, thus reducing the number of bits per pixel. Second, GIF replaces multiple occurring patterns (large patterns) into one. So instead of storing five kinds of blue, it stores only one blue.

Image by Cloudsper

GIF is most suitable for graphics, diagrams, cartoons and logos with relatively few colors. GIF is still the chosen format for animation effects.

Image by Westnet

Compared to JPEG, it is lossless and thus more effective with compressing images with a single color, but pales in detailed or dithered pictures. In other words, GIF is lossless for images with 256 colors and below. So for a full color image, it may lose up to 99.998% of its colors.

One edge of the GIF image format is the interlacing feature, giving the illusion of fast loading graphics. When it loads in a browser, the GIF first appears to be blurry and fuzzy, but as soon as more data is downloaded, the image becomes more defined until all the date has been downloaded.

Pros of GIF:

  • Can support transparency
  • Can do small animation effects
  • ‘Lossless’ quality–they contain the same amount of quality as the original, except of course it now only has 256 colors
  • Great for images with limited colors, or with flat regions of color

Cons of GIF:

  • Only supports 256 colors
  • It’s the oldest format in the web, having existed since 1989. It hasn’t been updated since, and sometimes, the file size is larger than PNG.


The Windows Bitmap or BMP files are image files within the Microsoft Windows operating system. In fact, it was at one point one of the few image formats.

These files are large and uncompressed, but the images are rich in color, high in quality, simple and compatible in all Windows OS and programs. BMP files are also called raster or paint images.

BMP files are made of millions and millions of dots called ‘pixels,’ with different colors and arrangements to come up with an image or pattern.

It might be an 8-bit, 16-bit or 24-bit image. Thus when you make a BMP image larger or smaller, you are making the individual pixels larger, and thus making the shapes look fuzzy and jagged.

BMP files are not great and not very popular. Being oversized, bitmap files are not what you call ‘web friendly’, nor are they compatible in all platforms and they do not scale well.

Pros of BMP:

  • Works well with most Windows programs and OS, you can use it as a Windows wallpaper

Cons of BMP:

  • Does not scale or compress well
  • Again, very huge image files making it not web friendly
  • No real advantage over other image formats


TIFF was created by Aldus for ‘desktop publishing’, and by 2009 it was transferred to the control of Adobe Systems. TIFF is popular among common users, but has gained recognition in the graphic design, publishing and photography industry. It is also popular among Apple users.

Above is a screenshot of how a TIFF image looks like–TIFF is not compatible for all systems; so to be sure, I uploaded a screenshot in JPEG of a TIFF image preview instead of uploading the original TIFF image here. Notice the crisp quality and rich colors of the photo.

The TIFF image format is easy to use with software that deals with page layout, publishing and photo manipulation via fax, scanning, word processing, etc. TIFF is very flexible, it can be lossy or lossless. TIFF is a rich format and supported by many imaging programs.

It is capable of recording halftone image data with different pixel intensities, thus is the perfect format for graphic storage, processing and printing. This makes TIFF the superior raster image format.

Pros of TIFF:

  • Very flexible format, it supports several types of compression like JPEG, LZW, ZIP or no compression at all.
  • High quality image format, all color and data information are stored
  • TIFF format can now be saved with layers

Cons of TIFF:

  • Very large file size–long transfer time, huge disk space consumption, and slow loading time.


PNG or (Portable Network Graphics) is a recently introduced format, so not everyone is familiar with it. But PNG has been approved as a standard since 1996. It is an image format specifically designed for the web. PNG is, in all aspects, the superior version of the GIF.

Just like the GIF format, the PNG is saved with 256 colors maximum but it saves the color information more efficiently. It also supports an 8 bit transparency.

Image by Hello eBoy

PNG was actually created for the intent to replace the GIF as an image format that doesn’t require a patent license. PNG can support 24 bit RGB color images, grayscale images, both with and without alpha channels. RGB cannot support CMYK color spaces, and is not designed for print graphics.

Pros of PNG:

  • Lossless, so it does not lose quality and detail after image compression
  • In a lot ways better then GIF. To start, PNG often creates smaller file sizes than GIF
  • Supports transparency better than GIF

Cons of PNG:

  • Not good for large images because they tend to generate a very large file, sometimes creating larger files than JPEG.
  • Unlike GIF however, it cannot be animated.
  • Not all web browsers can support PNG.

In a Nutshell

There is no universal image format that is best for all scenarios. Every type of image format has their own advantages and disadvantages. Here is a summation of each image format, their pros and cons, as well as when and where it’s best to use them.

Print Graphics: TIFF is the best and only choice for professionals when images are intended for print. Its ability to read CMYK and YcbCr color, plus its ability to store such high pixel intensity makes it the only choice for designers, photographers and publishers.

Web Graphics: PNG, JPEG and GIF are the most web friendly image formats there is. JPEG is great for images when you need to keep the size small, such as when you need to upload it online. If you don’t mind compromising the quality of the image a bit, use JPEG. If you want to keep the size small, but still retain the image quality, use PNG. GIF is the worst choice, although file sizes are very small, and they load very fast. Plus, if you want to add animation effects, use GIF.

PC & Mac Compatibility: If you are using Mac or PC, or constantly shifting from one to another, JPEG is the best image format for PC and Mac Compatibility.

Logos & Line Art: JPEG is the worst choice, it tends to add artifacts and blur the text, line and edges. JPEG also cannot support transparency, which is often a need for logos or icons. GIF is a good choice, but it pales in comparison to TIFF and PNG.

Both of the latter image formats are lossless, store as much image information, and are not limited to 256 colors, unlike GIF. They also don’t add artifacts (the downfall of JPEG) and keep the logo or line art sharp and concise.

Clip Art: GIF is the best image for clipart and drawn graphics that only use few colors and precise lines & shapes.

Editorial Team

Written by Editorial Team

  • sampal

    Haha, What is the image format used for these original file?

  • pnamajck

    editorial-team … i very much appreciated your in-depth article … you offered concise and easy-to-understand explanations as well as examples with images. however … afraid “gofromiel” is correct. and we cannot stipulate those as being relatively new principles either … that would be folly and total ignorance.

    it should be noted … the above reference is not completely accurate in it’s content. for instance … *.png files are not constrained by only 256 colors … they support millions of colors. another spurious inference is that *.png files cannot be animated. they, in fact, can be manifested into beautiful animations. sadly, only two or three browsers accept *.apng/mng formats. ***



    *** http://boards.straightdope.com/sdmb/showpost.php?p=19940212&postcount=9

    again … thanks for sharing, editorial-team … am certain many have benefited due to your article.

  • zandomorph

    “color” is spelt colour

    • James Richman

      Hey, mate
      It depends where you come from, in American English it’s color and in others it’s preferred to say colour as far as I know :)

    • Not in the United States, you jackass anglo-centric pedant.

    • No, standard English spelling depends on the English-speaking country. In the United States, we follow the sensible orthography proposed, defended, and standarized by Noah Webster and the dictionaries bearing his name: https://www.merriam-webster.com/dictionary/color
      In addition, the standard simple past and past participle of “spell” is “spelled,” not “spelt.”

      Did you make your comment out of ignorance or anglophilia?

  • Prince

    salute to you

  • Aniket

    Nice post really.
    Jpeg & png formats are more friendly for me. But thanx for letting know characteristics & use of each.

  • Ki

    Great article. Thanks Gofromiel for giving a different look… some are valid points. For web development, I believe GIF and JPEG still rules, tho PNG is making it’s way. When it comes to file format, it really depends on what you are doing.

  • Venkatesh

    It’s good article. Just find another detailed information from mebaze.com.

  • Gofromiel

    WHAT ?! This article is just horrible !

    – “Moreover [JPEG] it is less grainy then GIF” : Less grainy ? It’s not about grain, it’s about color reduction and noise dithering. Because GIF only works with indexed colors (called a “palette”), pictures with more than 256 colors are remapped to a reduced set of colors by your application when they are saved in GIF, a dithering filter is also apply on the image to trick the eye making it look better. This also apply to pictures saved in PNG8. If you save a picture with only two colors in them, do you think GIF would be grainier ?

    – “Compatible in most OS (Mac, PC, Linux)” : Mac, PC are not OS, they are machines. File formats are not “compatible”, they are just file formats that applications can read or not. Would you say that Ogg Vorbis is not compatible with MacOS just because iTunes doesn’t support it ?

    – “So for a full color image, it may lose up to 99.998% of its colors”. How come ? Where did you get that number ?

    – “Can support transparency”. I would have added “on a single color”, which is VERY important when comparing to PNG which supports the same feature, and also supports a 8bit opacity mask.


    – “but the images are rich in color, high in quality”. BMP is limited to 24bit colors whereas PNG is limited to 48bit and TIFF 64bit. All three being non destructive, BMP has nothing special in color or quality.

    – “BMP files are made of millions and millions of dots called ‘pixels’” Isn’t it the same for GIF, PNG and TIFF ?


    – “I uploaded a screenshot in JPEG of a TIFF image preview”. A screenshot ? Don’t you use Photoshop or a similar application to resize your images and save them is another format ?

    – “Notice the crisp quality and rich colors of the photo.” How can I notice anything, this is a JPEG image and you don’t provide the original TIFF.


    The illustration you chose to demonstrate the transparency support is really bad because it can be done with GIF too. What PNG brings is a 8bit transparency mask. Using the following picture would have been smarter:
    because it demonstrates the variable levels of transparency of the image.

    – “RGB cannot support CMYK color spaces”: It’s not about RGB not supporting CMYK, its about how well one color space can reproduce the other. Your statement is completely wrong because RGB provides richer greens and blues, but doesn’t cover all the CMYK space, as the CMYK space doesn’t cover the RGB space:

    Well… I’ll stop there. Your article made me sad. Please educate yourself, for you and your readers.

    • ep

      Ok well then stop complaining and write an article and provide a link to what you would refer to as educated material. I hate when people bash someone even if they provode the correct info and then have nothing good to say which tells me the reader is disgruntled!

      • Francis

        Actually, I agree with the “bashing.” Of course some information is true, but sometimes, the author is flat out lying because the reader will never know! I think it is fair, and necessary to let people say what they feel. The author will become a stronger writer in the end. But, you are right, he should post his own article, or link to the correct information!

    • Jen

      I think they may have meant ‘*PNG* cannot support CMYK color spaces,’ and wrote RGB on accident. I mean, there’s enough other typos for me to believe that.

      Also- PNG is a ‘recently introduced’ file format, even though it was ‘standard’ in 1996? So that means… it’s not recent. Not even close.

  • Carlos Viloria

    Great article, I use only two PNG and JPG formats, always good to read such articles to have deeper understanding of the circumstances under which they must use these image formats.

  • masyhury

    Good article.
    I am often confused choose image format, and I was lucky to find a solution here.
    Thank you .. :D

  • IE 6’s issues with PNGs goes beyond how well (or badly) it displays them, but there are also bugs in its handling of certain layout issues when PNGs are present. For example, if you’re using a transparent PNG as a background image for an element and you find that links within that element don’t seem to work, the culprit may be the PNG.

  • Dan Padavona

    Nicely written. For web usage I definitely prefer JPG to GIF. Maybe the smaller GIF file offered some benefits to web designers during the dial-up era. Today high res JPGs really fly. I’ve even gotten to the point where I am using less compression on them before. A high speed connection still brings it in lightning fast.

  • Matt

    Perfect timing!

    Was just looking for an article that explained all the formats. Saved me a ton of time. Thanks Rachael.

  • Renato Alves

    A very complete list explaining every single image file. I actually haven’t understood until now the difference and the pros ans cons of each image file. The tiff format is very new for me.

    I only can say thank you for sharing this information with us.

  • Ben

    one note for clarity — animated pngs do exist, but the standards body for png has voted it down, and its browser support is spotty.

    • zoltan

      thanks baby xxxx

  • Felix

    I tend to use PNG’s for small images and JPG’s more for the larger. I must admit I have learned something. I did not know that PNG’s are not recognised by all browsers. Great article!

  • Ørjan Kvalheim Lønningen

    PNG can actually be animated to
    (downside is that not all web browsers will show animation)

    should at least work in firefox

  • Fazreen

    Thanks for the article. Sometimes I get confuse what format I need to save. This article explain well and help me clear about the image format.

  • Marios

    Great article, PNGs are cool but as you said “Not all web browsers can support PNG.” so jpgs will still be the most used ones on the web,

    • By not all browsers that’s not all browsers made 10 years ago support PNG. About the only browser that can have issues nowadays is IE6 and A) that’s really old but unfortunately still around and B) it mostly deals with PNGs anyway just sometimes having issues.

  • Paper Rocket

    PNG is typically my choice file, followed by JPG… But your article clearly highlights when to use the correct file type.


  • Analdin

    Very nice summary of how the format affects the look; I learned quite a few things I didn’t know before.

    • Lauren Seaborn

      Right on, I just needed some basics reviewed!

  • Freebious

    I just use JPGs or PNGs based on the requirements. More formats means more confusion.