Home Page Appropriate Use Of Animation Selection Of Fonts & Colours Targeting The Intended Audience Navigation Design Appropriate Use Of Table-Based Layout Appropriate Use Of Stylesheets Take Online Test

                                                                                                                      Search

You are in ::::: Home | Images

Appropriate selection of image formats

Problems with image formats

Compression techniques

The GIF (Graphic Interchange Format) file format

The JPG (Joint Photographic Experts Group) file format

The PNG (Portable Network Graphic) file format

 

Problems with image formats

The greatest annoyance when accessing web pages is the long wait for graphic to download and display. Indiscriminate use of graphics, no matter how cool, will only antagonise the reader.
Why is it that some graphics download fairly quickly whilst others take some time? It is not a problem with physical size of the image on-screen. It is purely a function of the number of bytes of data that have to be transferred from the server to the client machine via the telephone system (The file size).

Compression techniques

Using compression techniques large graphic can download and display quicker that a smaller one. The two main graphic file formats used on the web GIF (Graphic Interchange Format) and JPEG (Joint Photographic Experts Group) treat picture compression in different ways. Another format is Portable Network Graphic (PNG).

 

The GIF (Graphic Interchange Format) file format

The GIF file format is for 8-bit (256 colour) images or less. Now, it normally takes 24 bits of data to describe the colour of each pixel on the screen. Eight bits each for Red, Green and Blue. This can give each of these colours a brightness level between 0 and 255 and by mixing them, 16,777,216 colours are possible. GIF compression is non-lossy and good for simple shapes. Better compression with fewer colours.

 

This 8-bit GIF file compresses quite efficiently because of the flat areas of colour.

With GIF compression technique an image that changes consecutive pixel values often, as in the below image, will not compress so efficiently.

A similar enlargement of the photograph in the next section shows very few
horizontal runs of the same colour and is 3971 bytes

In extreme cases, where nearly every pixel changes colour, the 'compressed' file size may be even larger than the uncompressed original.

Interlaced images appear gradually: Good for larger images, slows down smaller images.

 

The JPG (Joint Photographic Experts Group) file format

The JPEG file format works with 24-bit images regardless of whether the monitor can display them correctly or not. This format is best for continuous tones E.g. photographs. JPEG compresses the picture by intelligently removing information to reduce the file size. This process is called 'lossy' because picture information is loosing to simplify the image. However compression level can be set.

 

The GIF picture on the left is 24K and the JPEG on the right 16K On an 8-bit display they will look similar but on a 16 or 24-bit display the JPEG will look better

As a general rule, it is best to use GIF for graphic images - icons, logos, buttons and JPEG for photographic ones.

 

The PNG (Portable Network Graphic) file format

Was developed as a non proprietary alternative to GIF, but does more. It supports a full range of colour depths e.g. 24 bit, transparency, interlacing, automatic correction for monitor gamma, embedded text descriptions useful for searching. But only on later browser versions. Thus not universally available.

Home | Animation | Fonts & Colours | Target Audience | Images | Navigation | Table-Based Layout
Stylesheets | Online Test

Hosted by www.Geocities.ws

1