Image File Types

Gif Images

paris-gif-256-webadaptive

GIF Image 256 Colour Web Adaptive.

This image has 256 colours but only a dozen or so are used – File Size = 51KB

paris-gif-32-webadaptive

GIF Image 32 colour Web Adaptive.

This image gas only a 32 colour palette but still has extra unused colours – File Size = 33KB. No appreciable difference in quality as there are few distinct colours used in this image.

paris-gif-32-indextransparetcy

GIF 32 Colour Index Transparent background. File Size = 15KB

Notice the blocky hard edge. Index transparency is simple. Either a pixel is transparent or it is not. Not a smooth edge transparency like Alpha channel.

GIF images are Lossless IF they contain 256 colours or less.  Their compression algorithm can reduce the number of distinct colours for images with more than 256 colours.

PNG Images

paris--png32-notransparency

PNG image PNG32 ( 32 bit colour depth) – File Size = 306KB

paris--png32-transparency

PNG Image – PNG32 – 32bit colour depth – Transparent background using Alpha channel transparency. File Size = 90KB

Notice the smoothed and blended edge that occurs with Alpha channel transparency compared to the Index transparency example shown above.

PNG images are Lossless. The compression algorithm loses no information from the original image.

JPG (JPeg) images

Joint Photographic Experts Group. JPG is a Lossy format. Image information is traded for size reduction.

Tour_eiffel_at_sunrise_from_the_trocadero-q99

JPG image.  High quality minimal compression. Quality setting = 99%. File Size = 212KB. Image is very sharp and colour rich.

Tour_eiffel_at_sunrise_from_the_trocadero-q60

JPG image. Medium quality image moderate compression. Quality = 60%. File size = 33KB
Loss of sharpness in the image. General fuzzy-ness in appearance. Gained a significant reduction in file size.

Tour_eiffel_at_sunrise_from_the_trocadero-q20

JPG image. Low quality highly compressed. Quality = 20%. File size = 19KB

Image is very poor quality and very blocky in appearance. This blocky pixilation effect is known as Jpeg artefacts. Have gained a major reduction in size at the expense of visual quality.