GIF, JPG and PNG File Formats: Pros and Cons

GIF: Graphics Interchange Format

– 256 number of colors
– uses lossless compression
– suitable for logos, flat areas of color with well defined regions
– suitable for icons with few colors
– support for transparency
– suitable for small animations

– the oldest format for web – 1989
– in most cases it has a bigger file size than PNG

PNG: Portable Network Graphics

– 24bit color / 8bit color(256 colors)
– uses lossless compression
– suitable for flat areas of colors, logos, transparent or semitransparent images
– suitable for icons
– in most cases PNG has a smaller file size than GIF
– it has alpha channel transparency which is more advance than GIF’s transparency
– approved as standard in 1996
– proposed as replacement of GIF by World Wide Web Consortium

– it is wise to avoid using PNG with big photos and images with details because of the big generated file size
– in different situations it has bigger file sizes than JPG

JPG: Joint Photographic Experts Group

– 24bit color
– suitable for images, high details & quality pictures
– uses lossy compression
– it is the most used graphic file format
– approved as standard in 1994
– used in design and photography industry – it is likely to see nature photos in JPG file format
– it is good when you are willing to drop quality from a picture for the sake of file size

– it does not support transparency
– it is not suitable for logos and icons because it does not have transparency and it can generate a bigger file size for small resolution images.

5 ideas on “GIF, JPG and PNG File Formats: Pros and Cons

  1. ChunLum

    GIF, PNG, JPG – Know the difference? A good guide to the basics for my non-web designer peeps:

    This comment was originally posted on Twitter

  2. chathurank

    GIF, JPG and PNG File Formats: Pros and Cons

    This comment was originally posted on Twitter

  3. pavlicko

    I think it would have been better if you’d used images to show the difference as well – also, transparent pngs don’t show in ie6, unless you’re using a hack or javascript.

  4. Al Kamal Md. Razib

    Good ideas for different image format. Thanks all for sharing those are different.

  5. Anton Tsvilikhovskiy

    You forgot to mention the awful artifacts JPG has. I use PNG whenever possible (aside from photographs – obviously)