Technology Guide: PNG, JPG, GIF, SVG

Giant monitors with AdobeRGB color space are affordable, and monthly releases of new smartphones and tablets compete in resolution and color contrast, but what is this modern technology good for, if the photo is blurry, the color gradients are blocky and there are pixel artefacts everywhere. We can't do anything against blurry pictures, but choosing the right image file format and picking a reasonable compression rate already enables fancy slide shows and accompanying article illustrations.

The history of file formats for internet images was always limited by one constraint: Speed. Yes, there are high speed wireless data connections for mobile phones, but the constraint remains: Save space wherever you can. Browser memory, cellular dead zones and SEO speed-optimized websites are aspects that necessitate photo and image compression. This is the reason why memory consuming formats like TIFF or BMP, well known in print media, are useless for quick rendering in web browsers. Instead, we lay our eyes on PNG, JPG and GIF – where each of those has its own special application.

1. JPG – Allrounder for Photos

Because it can display 16.7 million colors, the JPG format is predestined for pictures with numerous colors or graphics with fine color gradients. The Joint Photographic Experts Group (JPEG) is using a trick to avoid vast file sizes: Based on psychovisual models of the human vision we simply remove data homo sapiens can not or just vaguely detect. That is immediately apparent, once you zoom into a JPG image – halo effects and so called artefacts are visible at color borders and in single colored areas.

How good or bad those compression artefacts are, can be configured. When saving a JPG image, you dictate a compression rate which directly influences file size and image quality. The higher the compression rate the smaller the file and the worse the quality.

Why 16.7 million colors?

16.7 million colors is roughly the range in which the human eye can detect marginal differences between the colors – more colors wouldn’t make any sense, because we cannot distinguish between them. The number comes from the multiplication of 256 shades by the three adaptive base colors reg, green and blue.

 

Example Image

Image Information

Recommendation

Original

image1.png

800 KB (TIFF, uncompressed)

The original photo shows clean separation of the colored areas, you can clearly see the small stones on this volcanco.

Quality 75

image2.png

70 KB (JPG)

More than 90% memory saving compared to the original.

The transitions between cloud, sky and volcano starts to show block artefacts, but overall the photo is acceptable.

Quality 50

image3.png

30 KB (JPG)

Compared to the predecessor another 50% memory saved.

 

Even more blocks at the transitions, the details lose sharpness. This quality is starting to be questionable for web usage.

Quality 25

image4.png

15 KB (JPG)

Very fast transfer, but unusable for the internet.

More loss of details, extreme block building – this is a no-go for the web.

Once the image is saved, lost information can never be recovered from the compressed files. This is the reason why JPG is used only in the browser. If you plan to archive or retouch photos, you must use a lossless format, like PSD, TIFF or PNG.

2. GIF – For simple Graphics

The GIF format comes into play when images don’t use a lot of colors. It can only save 256 different colors, which is insufficient for photorealistic pictures, but just enough for logos, clip-arts or graphical illustrations. GIF files are also compressed, but because of the small number of colors without any loss of quality, so even modifying and saving it multiple times will not create any artefacts.

image5.png
Its limited color palette renders the GIF format useless for photos

 

The 30 year old image file format comes along with one speciality: Animations. By stacking multiple images inside the same file you can create small video clips, just like a flicker book. Of course the file format cannot handle real movies and can never compete with superior movie codecs. Because of these limitations, you encounter GIF animation for small effects; blinking bullet points or jumping hamsters , which naturally became very unfashionable in the 21st century.