Jul 26 2012

Professional Differences Between JPEG, GIF & PNG

When working with digital image files, it is essential to know the differences between each one, so you know when to use them. The main difference between files formats is how they are used when designing for the web and the outcome they produce. One produces highly optimized simple graphics, another is used for most images, and the third option is used for complex graphics, gradients and transparency. GIF, JPEG and PNG files are all three used for the web.  The difference is the resulting image. Each one has its place for use on websites, and jpeg images can also be used in print files as well, although they need to be print resolution. Web images are typically 72 dpi, making them load quickly.

JPEG – Joint Photographic Experts Group

  1. JPG was a file type developed by the Joint Photographic Experts Group (JPEG) to be a standard for professional photographers.
  2. JPEG is a standardised image compression mechanism. JPEG is designed for compressing either full-colour (24 bit) or grey-scale digital images of “natural” (real-world) scenes.
  3. It works well on photographs, naturalistic artwork, and similar material; not so well on lettering, simple cartoons, or black-and-white line drawings (files come out very large). JPEG handles only still images, but there is a related standard called MPEG for motion pictures.
  4. A useful property of JPEG is that the degree of lossiness can be varied by adjusting compression parameters. This means that the image maker can trade off file size against output image quality.
  5. JPEG has a hard time with very sharp edges: a row of pure-black pixels adjacent to a row of pure-white pixels, for example. Sharp edges tend to come out blurred unless you use a very high quality setting.
  6. Plain black-and-white (two level) images should never be converted to JPEG. You need at least about 16 grey levels before JPEG is useful for grey-scale images.
  7. Jpeg files can be relatively small in size, but they still look crisp and beautiful. Jpegs support up to 16.7 million colours, which makes them the right choice for complex images and photographs.
  8. No background transparency
  9. The JPEG format also is used as the image compression algorithm in many Adobe PDF files.
  10. JPG is great for photos online
  11. JPG, JPEG. Became popular with the invention of the digital camera. High quality images and huge compression allows for big resolutions but small file sizes. This is the most common image format, especially for photos.

GIF – Graphics Interchange Format

  1. The Graphics Interchange Format was developed in 1987 at the request of CompuServe, who needed a platform independent image format that was suitable for transfer across slow connections. It is a compressed (lossless) format (it uses the LZW compression) and compresses at a ratio of between 3:1 and 5:1.
  2. GIF, pronounced either gif or jif, is supported by all Web browsers although licensing may be required in certain instances. GIF is currently the only option for putting animation on the Internet aside from Flash.
  3. It is an 8 bit format which means the maximum number of colours supported by the format is 256.
  4. There are two GIF standards, 87a and 89a (developed in 1987 and 1989 respectively). The 89a standard has additional features such as improved interlacing, the ability to define one color to be transparent and the ability to store multiple images in one file to create a basic form of animation
  5. GIF does significantly better on images with only a few distinct colours, such as line drawings and simple cartoons. Not only is GIF lossless for such images, but it often compresses them more than JPEG can. For example, large areas of pixels that are all exactly the same colour are compressed very efficiently indeed by GIF.
  6. Gif images are great for creating very low resolution files for your website. They support transparency, which is great and (requires image editing/animation program. Transparency allows you to place the gif over any colour background or even photos, and you won’t see a border or background in the image. All you will see is the icon.  You typically use a gif for simple logos, icons, or symbols
  7. Gif files also support a feature called interlacing, which preloads the graphic
  8. GIF also support animation. Gifs don’t support the level of animation that Flash files do, but it still allows you to add movement or transitions to your site, without a lot of programming or coding.
  9. Gif files are also compressed, which gives them a small file size.
  10. GIF is good for illustrations when you do not wish to move to PNG.
  11. GIF is also used for line drawings, icons and simple logos. Should not be used for photos or graphics with complex colours or gradients.

PNG – Portable Network Graphics Format

  1. PNG, pronounced ping, is the newest graphic format and is designed to be an improved, free successor to GIF format. The PNG format is not yet supported by all browsers, although this is changing
  2. PNG files were developed to build upon the purpose of gifs. Designers need the ability to incorporate low-resolution images that load quickly but also look great, too. This is where PNG comes in.
  3. PNG-8 does not support transparency, but PNG-24 and PNG-32 do.
  4. PNG transparency is different from Gif transparency, because they can have different levels of transparency. Gifs are either transparent or opaque.
  5. PNG is great for IE6 and up (will require a small CSS patch to get transparency working well). Great for illustrations and photos.
  6. PNG files are also lossless files retaining color information when they are compressed. Richer images will lead to larger file sizes.
  7. The lossless PNG format is best suited for editing pictures, and the lossy formats, like JPG, are best for the final distribution of photographic images, because JPG files are smaller than PNG files
  8. PNG can achieve greater compression than GIF, but some implementations make poor choices of filter methods and therefore produce unnecessarily large PNG files.
  9. PNG is the Second best way to archive images
  10. In PNG Image quality never degrades with resaves
  11. PNG is mainly used in MAC operating systems but can now be used in Windows Vista.

Ms. Jyoti Wadhwa
CEO – WebTakersIT SCF-117, IInd Floor, Sec-19, Faridabad – 121001
Contact No:  +91-129-2220180, 4310152
Mobile No: +91 – 9910022478
Blog:  http://webtakersit.com/blog
Skype: bestcreativeyouth
MSN: bestcreativeyouth@live.in
Facebook: https://www.facebook.com/ITWebtakers?ref=hl
Twitter: http://twitter.com/#!/WebtakersIT
Linkedin:  http://in.linkedin.com/in/webtakersit


It's only fair to share...Share on Facebook
This entry was posted in Website Design & Development and tagged , , . Bookmark the permalink.
Total Views:


2 Responses to Professional Differences Between JPEG, GIF & PNG

  1. Spot on with this write-up, I absolutely believe that this amazing site needs a lot more attention.
    I’ll probably be returning to read more, thanks for the information!

  2. Hi there i am kavin, its my first occasion to commenting anyplace, when i read this paragraph i thought i could also make comment due to this good post.|

Leave a Reply

Your email address will not be published. Required fields are marked *