JPEG images and PNG images

Derek Bridge

Department of Computer Science,
University College Cork

JPEG images and PNG images

Aims: to understand JPEG images and PNG images well enough to know

• what features they offer
• when to use them
• how to design them

Joint Photographic Experts Group (JPEG) files: overview

JPEG image files:

• use 24-bit truecolour
• use a special lossy compression algorithm
• may display progressively
• do not support transparency
• do not support animation

JPEGs are good for

• images with continuous changing shades and soft transitions
• e.g. photographs

JPEG compression

• JPEG compression is lossy
  • info is thrown away
  • hence decompression cannot recover an exact copy of the original
• Image manipulation tools let you choose the compression rate
• At many compression levels, the loss is not discernable to the human eye
• At the higher compression levels, you see 'compression artefacts' such as loss of edge clarity, bluriness and, at the highest levels, 'blockiness'

Progressive JPEGs

• Progressive JPEGs are like interlaced GIFs: the data is stored and displayed out of normal order to give the user an early impression
• Progressive encoding encodes similar-positioned coefficients in the blocks in one go, followed by the next positioned coefficients in the blocks, and so on
• Furthermore, in all JPEGs, the blocks are stored in a zigzag order

Making small, high-quality JPEGs for the web

• Limit the dimensions of the image (as before)
• Use thumbnails
• Reuse the same image across your web site
• Keep the compression algorithm in mind when designing the image
  • no large areas of solid, flat colour; no sharp edges
  • apply smoothing/a slight blur, especially to unimportant parts of the image
• Optimise
  • tools can maximise the later steps of the compression

Portable Network Graphic (PNG): overview

PNG image files:

• use 8-bit indexed colour or 16-bit grayscale or 24-bit or 48-bit truecolour
• use lossless compression that compresses more than GIF (and was never patented)
• may be progressive (using Adam7 interlacing)
• offer binary transparency but also shades of transparency
• do not support animation (MNG and APNG have not caught on)

PNGs are very flexible

• a good replacement for (single image) GIFs
• not such a good replacement for JPEGs

PNG transparency

• For 24-bit truecolour images:
  • uses an alpha channel (an extra 8 bits), thus allowing 256 different levels of transparency (including binary transparency)
  • but the file becomes 20% bigger
• For 8-bit indexed colour images:
  • any of the 256 colours in the palette can be designated as Transparency Index Colours
  • pixels that are painted with those colours will be transparent to different degrees when viewed in a browser
  • no increase in file size but compete against 'normal' colours for slots in the palette