Web Image Formats Explained – JPEG, PNG, GIF

png gif jepg

Image formats are a tricky subject. I’ve compiled a short list, along with some advantages and disadvantages, of the three most commonly known image formats on the web.

Compression

Compression is a means of reducing file sizes.  It involves applying an algorithm and discarding or manipulating non-essential information.

There are effectively two type of compression; lossy and lossless. Lossy is a compression technique that reduces the size of a file with varying or adjustable loss of data. Lossless is a compression technique that allows the original data to be recreated without loss and therefore the data content of the original image is precisely preserved.

The three commonly used graphical compression types on the web:

  • PNG: Portable Network Graphics
  • GIF: Graphics Interchange Format
  • JPEG: Joint Picture Experts Group

All of the above formats are bitmap images. Bitmap images are composed of pixels (picture element) in a grid. Each pixel or “bit” contains colour information for the image. Unlike vector image formats, bitmap images cannot be rescaled without loss of quality. However, bitmap images are better than vector images for complex images such as photographs. There will be more on vector images in a coming blog post.

PNG – Portable Network Graphics

PNG is a graphic format with lossless compression.  There are two variation of the PNG format; PNG-8 (bit) and PNG-24 (bit). PNG-8 is optimised for images with simple colours, such as logos and user interface elements like icons and buttons. PNG-24 is optimised for complex imagery, such as photographs.

Most people pronounce Portable Network Graphics format as ping.

Advantages

  • Variety of colour systems
  • High quality of compression
  • Interlacing progressive download
  • Alpha channels such as transparency
  • Gamma correction
  • Open Standard format

Disadvantages

  • Does not support animation
  • PNG-24 can produce rather large file sizes compared to JPEG

GIF – Graphic Interchange Format

GIF is a graphic format with lossless compression. GIF uses an 8-bit colour (256 colours) system.

Advantages

  • Supports transparency
  • Supports animation
  • Large compression sizes

Disadvantages

  • Limited colour spectrum
  • Larger file sizes when compared to PNG-8
  • Non Open Standard format
  • Poor reproduction on complex imagery and photographs

JPEG – Joint Picture Experts Group

JPEG is a graphic format with lossy compression designed specifically to handle full colour images, especially photographs. It is commonly used in digital camera technology.

Advantages

  • Massive file-size reduction on full colour photographic images
  • Little noticeable affect on the image quality (dependant on the amount of compression used)
  • Will be smaller in file size versus PNG when comparing photographic images

Disadvantage

  • Lossy format, hence information from the image is lost – the higher the compression rate the poorer the image quality
  • No support for transparency
  • Large file sizes when compressing simple imagery

General summary of use

  • Use PNG-8 over GIF and JPEG for images with simple colours
  • Use PNG over JPEG when using transparency
  • Use JPEG over PNG for complex and photographic images
  • Use PNG-24 over JPEG for high quality, complex graphics
  • Use GIF for animated images

Leigh Walker

View posts by Leigh Walker
Hi, I'm Leigh.

Leave a Reply

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

Scroll to top