Standard Digital Image Formats

jpeg-gif-png

There are three formats that are most commonly used  to display images on the web. These three formats are, JPEG, GIF, and PNG. Let’s take a closer look at these formats.

GIF: Graphics Interchange Format

  • A digital image that has been compressed using this algorithm.
  • Uses up to 256 colours when rendering an image.
  • The GIF format is in a way more flexible than the JPEG format in the sense that GIF is a lossless format, meaning that the image maintains the same quality regardless of how many times that image has been edited or saved.
  • GIFs also allow you to animate image files through programs like Adobe Photoshop/Image Ready
  • GIFs are best suitable for single colour images or images with little to no gradient, or with a low colour count.

A more detailed description of the GIF format is available here:http://en.wikipedia.org/wiki/Graphics_Interchange_Format

JPEG: Joint Photographic Experts Group

  • A standard algorithm for the compression of digital images, making it easier to store and transmit them.
  • A digital image that has been compressed using this algorithm.
  • The JPEG format is considered to be lossy format, meaning that each time you save the original image, it loses some data, making the new saved file a lesser quality. In many cases this loss of data is not recognized to the naked eye, but upon closer observance the difference is noticed…especially if the file has been saved several times over.
  • The JPEG format uses millions of colours when rendering an image.
  • This format is best suited for detailed images that have a high colour count with various colour transitions.

A more detailed description of the JPEG format is available here: http://en.wikipedia.org/wiki/JPEG

PNG: Portable Network Graphics

PNG supports palette-based images (with palettes of 24-bit RGB or 32-bit RGBA colors), greyscale images (with or without alpha channel), and RGB[A] images (with or without alpha channel). PNG was designed for transferring images on the Internet, not for print graphics, and therefore does not support non-RGB color spaces such as CMYK.

A more detailed description of the PNG format is available here:http://en.wikipedia.org/wiki/Portable_Network_Graphics

When designing websites or web graphics, it’s a good to understand how these 3 formats work. Once you have an understanding of each image format’s strong and weak points, then you will be able to choose the best format for your design. Keep in mind that you can mix image formats on a singleweb page. There’s no limit here.  If you have any questions on how best to incorporate any of  the image formats in your design, give me a shout, and I’ll try my best to get back at you.