Instant Web Images

Features of Image Files Formats

Images can be saved as files in lots of different formats.

It’s handy to understand the differences between the most common formats:

• Bitmaps: saved as imagefilename.bmp
• Jpegs: saved as imagefilename.jpg
• Gif: saved as imagefilename.gif
• Png: imagefilename.png

Bitmaps contain data that identifies the colour content of each pixel that makes up an image.
Displayed on your computer screen, an image usually consists of 72 or 96 pixels every inch horizontally and vertically.
One byte of data is needed for each primary colour – Red, Green and Blue with an extra A or ‘alpha’ channel byte used to define transparency.
So every square inch of screen image needs 72 (one inch wide) x 72 (1 inch high) x 4 (Red, Green, Blue, Alpha) = 20736 bytes = approx 20 kBytes

For a 6 x 4 image = 20k x 6 x 4 = approximately 500kBytes
Printing uses colors Cyan, Yellow, Magenta and Black, again needing 4 bytes per dot.
High quality printing needs at least 300 dots per inch and preferably 600 dots per inch.
This requires (300 x 6) x (300 x 4) x 4 = approx 13Mbytes
Or 4 x 13 = 52Mbytes printing at 600 dots per inch

Camera companies often refer to bitmap data as ‘Raw’ data.

 JPEGs allow image data to be compressed in a way that keeps the image looking like the original bitmap.

JPEG stands for Joint Photographic Experts Group who did a fantastic job of creating an algorithm that allows images to be saved using as little as 5% of the data needed for a bitmap.
The downside of transforming a bitmap to a JPEG is that data is lost and can never be recovered – so it is possible for fine detail to be missing. This may be a problem for high quality photography but not usually for images used on website.

An additional feature of JPEGs is that the transformation allows quality to be defined over a range 0 to 100
File size does not linearly correspond with the quality parameter, but it does allow images to be saved to extremely small files yet remain recognisable.

JPEG files do not include ‘Alpha’ channel data and so cannot be used to include transparent areas.

 GIF files are stored in a Graphics Interchange Format that not only compresses bitmap data but uses just one byte to represent colour data.

This allows files of only a third the size JPEGs to be created using colour palattes of just 256 rather that 16million colours.
It is also possible to define one ‘colour’ as transparent – allowing areas to be fully tranparent.

An additional feature of GIF files is that they allow more than one image to be added to ‘layers’.
Websites can display GIF image layers one after the other – creating the illusion of animation – this remains the main use of GIF images online.

PNG files are Portable Network Graphic files.

PNG files compress original bitmap data in a completely lossless way meaning it is possible to recover the original bitmap exactly.

The amount of compression a PNG file can achieve depends very much on the bitmap image. For example large areas of a single colour can be very highly compressed, but images with lots of fine detail may result in a file size not much smaller than the original bitmap.

PNG files also store ‘Alpha’ channel data – allowing every pixel of an image to be shown anywhere from fully transparent to fully opaque.

In summary

• Bitmap files are very large – but contain exact information about any image.
• JPEG files are lossy versions of bitmaps that ‘look right’ using much less storage data
• GIF files are smaller lossy versions of bitmaps than JPEGS, because they only use 256 colours to be used per image. Multiple images can be saved in GIF files then displayed one after the other on websites to create the illusion of animation.
• PNG files provide a lossless compression version of original bitmaps including the ‘Alpha’ channel allowing transparent or semi-transparent images to be stored. Compression varies widely depending on the content of original bitmaps resulting in file sizes much larger than JPEGs but usually still smaller than orginial bitmaps

Best Choice of Image strage Formats

• Use JPEGs for most images unless you need to recover original bitmaps exactly or need transparency or animation.
• Use GIF files for website animation
• Use PNG files to save smaller but recoverable copies of bitmaps that can include any transparency level