Making a Multimedia Website

You are here : HomeCreating a Multimedia Website Create Multimedia Webpages

Fact file3.11 File Optimisation

 

When you visit a webpage, all the components that make up the page - text, images, sounds - have to be downloaded onto your PC. This can take some time, depending on the speed of your internet connection, the number of components on the page and their file sizes. With more people having broadband, it’s less of an issue for home users. But increasingly people are accessing websites via mobile devices which may have limited bandwidth. It’s best to optimise your site as much as you can.

File size

File size is measured in bytes or kilobytes. Good quality photographs taken on a digital camera are often measured in megabytes. The more bytes that need to be downloaded, the longer your visitor is going to have to wait to view your page. Web visitors usually have a very short attention span: if the page does not download quickly (within 10-15 seconds) they will click the back button and go elsewhere. It is important to optimise your images to make their file size as small as possible, but without sacrificing the quality of the image.

File format

The file format that you use is very important. There are two main file types for images on the Internet – JPEG (Joint Photographic Expert Group) and GIF (Graphics Interchange Format). For more information see Unit 03 Digital imaging: Section 2: File formats and Section 3B: Optimisation for the web.

Traditionally for photographs the JPEG format is used. Although this uses file compression to produce small files, the loss in quality is not very visible. JPEG files have a large palette of millions of colours. In the example below the photograph saved as a GIF file shows signs of banding in the sky which does not look very attractive; plus the file is almost twice the size of the JPEG!

Compare these files. Click on the thumbnails to see a larger version.

Digital Photograph

digital photograph jpg digital photograph gif

Simple Logo

simple logo jpg Simple logo gif

For simpler graphics with large areas of flat colours, such as logos and navigation buttons, the GIF format is best. A GIF file can have a very simple palette consisting only of the colours used in the image, up to a maximum of 256. In the simple logo above there is no visible difference between the JPEG and the GIF files, but the GIF is only a third of the file size of the JPEG.

Although JPEG and GIF are the main formats used, there is another increasingly popular format that is potentially useful: the PNG (Portable Networks Group) format can be used as an alternative to both JPEG and GIF files. Unfortunately Internet Explorer version 6 (and earlier) does not fully support all the features of this image type such as transparency, so for now many designers still tend to stick to JPEG or GIF formats.

Dimensions

The actual dimensions of the images will also affect the size of the file. If you are making a photo gallery, it is good practice to make two versions of your image. One is a very small version of your image, usually called a thumbnail image. This is usually no bigger than 200 pixels on its longest side. You can then create a hyperlink to link to the full size version of the image. Simply reducing the size of the large image on the page will not decrease file size or download time since the computer will still download the large version before making it appear smaller on the page. By using a gallery of thumbnails, you are giving the site visitor the choice of whether they want to see that photograph or not. If they choose to view it, they are likely to be happy to wait a little longer to download the larger version.

It is worth noting that Serif WebPlus will automatically optimise any images you add to a page when the site is published.
Previous PageMain Site IndexSection indexNext page