Graphics for the Web
1 June 2011
At SA Web Awards we evaluate websites according to four criteria: content, layout, functionality and overall appeal.
This article explores one aspect of the content category, namely graphics.
Some of the websites submitted to SA Web Awards fall short in the content category because of poor quality graphics.
A website's graphics form a vital part of the content and it is important for every web designer to understand the different types of graphics supported by web browsers.
This article deals with the two most common graphics formats: GIFs and JPEGs.
This article is intended for those whose websites did not score well in the content category as well as for those who are relatively inexperienced at creating graphics for the web.
In this article we assume that you have a graphics package that is capable of creating GIF and JPEG files and that you are familiar with the basics of your graphics package.
We do not deal with issues relating to any specific graphics package.
The two most common image formats used on the Internet are JPEG and GIF.
They are both useful because they compress the image data resulting in smaller file sizes, yet they are suited to different types of image data.
JPEG or GIF - which is best?
The type of image you are working with will usually determine the image format you use.
The JPEG format, which supports over 16 million colours, uses a "lossy" compression process.
"Lossy" means that the compressed image is not identical to the original.
JPEG compression works well with photograph-style images because usually your eye cannot pick up the differences between the compressed and original images, depending on the amount of compression used.
GIFs can contain a maximum of 256 distinct colours.
They use a "lossless" compression process, which means that the compressed image is the same as the original 256-colour image.
GIF compression works well with images that have regions consisting of a single colour, such as buttons that you have created.
Using JPEGs with Photographs
When you create a JPEG image you can select the amount of compression used. The higher the compression, the smaller the file size and the lower the image quality, as shown below.
JPEG (10% compression)
Good quality; Large file (relatively)
File size: 4.5kB
|
JPEG (90% compression)
Poor quality; Small file
File size: 1.5kB
|
Using GIFs with Photographs
GIFs can also be used for photograph-style images, although JPEGs would usually be used for this type of image.
For photograph-style images a GIF's file size will usually be significantly larger than a JPEG's of equivalent quality.
The series of images below shows how to create GIFs of similar quality to JPEGs for photograph-style images.
GIF with standard palette
File size: 4.5kB
|
|
The first image uses the standard 256-colour palette - not very pretty as you can see.
Each colour in the original image is matched to the closest colour in the standard 256-colour palette.
Notice that the file size is about the same as the good JPEG above, but the quality is not nearly as good as the JPEG's.
|
Dithered GIF with standard palette
File size: 13.8kB
|
|
This "dithered" image also uses the standard 256-colour palette.
The dithering process simulates the colours that are missing from the image's palette but the image may be grainy as a result.
GIF compression is not well suited to dithered images so the file size is significantly larger - and the image is still not very pretty!
|
GIF with optimised palette
File size: 12.8kB
|
|
Another option is to use a different palette instead of the standard 256-colour palette.
Your graphics tool analyses the colours in your image and selects 256 colours that closely match those found in your image.
The resulting image may be of similar quality to the good JPEG (above) but the file size is much larger.
|
When to use the GIF format
As mentioned before, GIFs are ideal for storing images that have large regions of solid colour.
The series of images below illustrates the advantage of using a GIF over a JPEG for this type of image.
GIF Image
File size: 1.5kB |
This image is ideally suited to the GIF image format because it has large areas of solid colour and the total number of colours in the image is relatively small.
|
| |
JPEG
10% compression
File size: 4.3kB |
This image is not well suited to the JPEG format.
The colours and quality are not as good as the GIF's due to the JPEG's lossy compression process.
The file size is much larger than the GIF's.
|
| |
JPEG
85% compression
File size: 1.5kB |
We can increase the JPEG's compression factor to reduce the file size but we lose quality.
The file size of the image on the left is about the same as the GIF's but the quality is very poor.
|
The GIF image format can be used for creating images with transparent areas.
The JPEG format does not support transparency.
GIF without transparency |
The first step to create an image with transparency is to fill in the area that will become transparent with a single colour.
We have selected blue to fill the region that will become transparent.
|
| |
GIF with transparency |
Before saving the GIF file you must set the transparency value in your graphics software package.
In this example we set the transparency value to blue before saving the GIF file.
|
Anti-aliasing and Transparency
If your image uses effects like anti-aliasing then you need to take extra care when selecting your transparency value.
The reason for this can be seen if we study how anti-aliasing works.
|
This magnified image shows the effect of anti-aliasing.
The letter e on the left does not use anti-aliasing and looks blocky.
The letter e on the right uses anti-aliasing to create a smoother look.
The smoother look is achieved by blending the edge of the letter e with the white background.
|
| |
 |
This technique works well on a light background...
|
|
... but not too well on a dark background.
Notice the light edges around the letters.
This is because we used white as the background colour.
|
| |
 |
The solution is to create your anti-alias effect using a background colour that is similar to the background on which the image will be placed.
This is so that the blend colours that are used lie somewhere between the image colour and the background colour, rather than between the image colour and white.
|
| |
 |
Ahhh... that's better!
|
In this article we have highlighted some of the common mistakes we encounter with web graphics and we have illustrated some of the techniques used to overcome these mistakes.
We have concentrated on the two most popular image formats (JPEG and GIF) but it might be worth your while to investigate other formats, such as PNG, depending on your image requirements.
The quality of a website's images is an important consideration when we evaluate the content during our review process.
Sometimes the quality of the images can mean the difference between winning an SA Web Award and not quite making it.
Back to top
Comments
Add a Comment
Be the first to comment on this article.
