get a website

Advertisements

psuedo ad

Images

Optimising Images

Not knowing how to deal with images on your website will cause you serious problems!

Your webpage's need to download as quickly as possible, meaning they should appear to the user without them having to wait. The main reason for pages taking ages to download is that the image file sizes are too big. To bring down file sizes, images that you intend to use on the web need to be compressed.

Image compression takes various forms. First you need to bring down the image resolution. Most computer monitors display at an equivalence of 72/96 dpi (dots per inch), so you need to resample images to match this screen resolution. The default image resolution for print and other media is much higher than this (300 dpi, much bigger file size), so many images you may have on your computer, will likely need resampling if you want to use them on your website. CAUTION: Do not overwrite your original high resolution images with the 72/96 dpi ones. Rename images for the web so you have two sets - one high resolution and one low. Resampling to higher resolutions is impossible.

Other ways of compressing images further relate to the image file format you use. Image formats are just different ways in which the pixel information that make-up an image can be stored as data on your computer. The idea is the same as writing a letter in MS Word and saving as a DOCUMENT (.doc), or writing a letter in Notepad and saving as a TEXT FILE (.txt) Both file formats store text.

There are three image formats you can safely use on the web and all can be compressed - JPEG (.jpg, .jpeg), GIF (.gif) or PNG (.png). Each uses a different method of compression and it's important to choose the right one for the right job, this is explained below.

GIF Image File Format

Gifs compress images by discarding colours. The fewer colours in an image the smaller the file size. The maximum amount of different colours that Gifs allow is 256. This can be compressed all the way down to just two.

Gif's are best used for compressing images that contain areas of flat colour and images that contain text. It is not good for using with images that contain gradients or most photographic images. This is due to the 256 colour limit of Gif's.

With Gif's you can also include transparent parts to your image. This allows you to place Gif's over background elements and have them show though.

GIF Examples

gif example grad gif photo gif

This a perfect image for the Gif format. Text is clean, strong hard lines and colours.
(FILE SIZE: 3k)

Not so great, the upper limit of 256 colours causes 'banding'. Soft edges and gradients don't work.
(FILE SIZE: 4k)

Same problem here. The detail in the photo is lost (background).
(FILE SIZE: 6k)

JPeg Image File Format

JPeg compression uses an algorithm that causes the quality of the image to degrade. This is often referred to as 'lossy' compression. In other words, the higher the compression ratio applied to an image the worse it will look. The good thing about JPeg compression though, is that for certain types of imagery, this loss of quality is hardly noticeable.

Almost opposite to GIFs, the JPeg format is good for compressing images that contain gradients and most photographic materials. It is not suited for use with images that contain areas of flat colour or images that contain text.

JPeg offers no transparency options.

JPEG Examples

jpg example grad jpg photo jpg

Jpeg's lossy compression causes the defined lines in this image to degrade causing nasty artifacts.
(FILE SIZE: 3k)

Jpeg copes fine with the softer lines and gradients in this image. Text doesn't look great though.
(FILE SIZE: 4k)

Now the text has been replaced with a photo (background), Jpeg can do the job it was designed to do.
(FILE SIZE: 3k)

PNG Image File Format

PNG compression attempts to combine the the strengths of the previous two formats; GIF and JPeg. This generally works well.

There are some compatibility issues with PNG in that images won't display on older Browsers. This problem continues to recede though, as time goes by. We're looking at problems with browsers dating from around 2000.

PNG offers the best transparency options because it allows for 'Alpha' transparency. This means you can use varying degrees of transparency, an simple example might be the effect like looking through coloured glass. It should be noted that to use alpha transparency, PNG needs to include a 'alpha channel' (4 channels - RGB plus Alpha). These will therefore need to be saved as 24 bit PNGs.

PNG Examples

png example grad png photo png

PNG's seem to err towards the Gif type of compression, so this strongly defined image looks fine.
(FILE SIZE: 2k)

Nowhere near as good with grads as JPeg. A slight improvement on GIF. PNG's tend to have smaller file sizes also.
(FILE SIZE: 3k)

Again PNG doesn't compare well with a Jpeg on this one. Less banding than Gif though.
(FILE SIZE: 6k)

Compression Software

There are hundreds of dedicated software applications available on the web, designed to help you with image compression. Some of these may even be free to use. Download a few and start getting those image file sizes down.

Lastly, if you have the time and money, invest in an image editing application. For images to look good on screen they need to be enhanced. We often see images that are haphazardly scanned and then just thrown on a web page. The colours are drab and muddy, the sharpness is poor and the whole image covered with grainy artifacts.

Images should be used to enhance the appearance of your website. If your images don't look good - don't use them.

© Getawebsite 2009 - Written & Designed by Frieze Web Design, London.