SA Web Awards Visit our Facebook page    Visit our Twitter page     log in   |  sign up 
             
 
       

SA Web Awards Blog

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 with 10% compression
JPEG (10% compression)
Good quality; Large file (relatively)
File size: 4.5kB
 
JPEG with 90% compression
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 256-colour palette
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 256-colour palette
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
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.

Ideal GIF 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 with 10% compression
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 with 85% compression
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
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
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.

The effect of anti-aliasing
 

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.

 
Anti-aliased text created with a white background looks good on a light background

 
This technique works well on a light background...

Anti-aliased text created with a white background looks bad on a dark 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.

 
Create the anti-aliased text on a darker background

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.

 
Anti-aliased text created on a darker background

 
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.

Your name
Your e-mail address (Will not be published)
Your website (Optional)
 
To help us prevent spam, please enter the 4-digit code that you see above into the box below.
Your comments
 
 
 
 
 About usAwardsBlogStay in touchMembers
  About us
FAQ
Our awards
Recent winners
Judging criteria
Collect award
Verify award
Blog
Blog archive
Visit our Facebook page   Visit our Twitter page   Subscribe to our newsletter
Contact us
Privacy policy
Log in
Sign up
Forgot password
Submit website
Terms & conditions