Home > Features > Images and graphics on the web

Graphics and colourful images can really enhance a web site. Unfortunately if those images are low quality, or take too long to download, they can end up making your website (and company) look unprofessional. By following a few simple guidelines your images can be useful, clear and quick to download. Here's how:

1. Don't make images too big

If an image needs to be seen in detail give users the option of 'Clicking to enlarge' from a thumbnail. Thumbnails are normally around 100-200 pixels wide.

2. Focus on detail

If your site needs to display product photos or similar, then crop the images so that space isn't wasted on background image. See example below.

Focus on the actual content of the photograph, cropping our unnecessary background image.

3. Save images at 72dpi

This is currently the most widely used screen resolution and anything bigger will just take longer to download without any increase in quality.

4. JPGs for Photos GIFs for graphics

As a general rule, photographs or graphics with hundreds of different colors should be saved as jpgs. This will give you a smaller file size. Coloured graphics, for example logos, or buttons, should be saved as GIFs.

The images above are the same file size (around 2.5k). The image left being a gif and the the image right a jpg. You can see how the gif reduced a files size by limiting the number of colours, making soft tonal changes look stepped. The jpg compression is based on image quality, and reduces size by compressing the less obvious edges.

These images are also the same file size (2.5k) but this time you will see the benefits of using a gif. The gif can detect the number of colours needed and uses only those required.

5. Utilize Optimization Software

There are lots of software specially for creating and saving images for the web, ranging from free and shareware that's available for download, to professional editing packages.

Net Mechanic's GifBot - Free
http://www.netmechanic.com/accelerate.htm

Web Graphics Optimizer - From 25GBP download free trial version
http://www.webopt.com/

Jpeg Cruncher - Costs about 35GBP download free trial version
http://www.spinwave.com/hvs/

Fireworks
One of the standard image creation and optimization tools used by web designers. Create graphics and optimize and export for web. Costs around 200GPB
http://www.macromedia.com/software/fireworks/

Adobe ImageReady
Bundled with PhotoShop this is also standard software used by web designers, with the added benefit of the photo manipulation and creation tools of PhotoShop. Costs around 450GPB.
http://www.adobe.com

6. Transparent images

A problem that sometimes occurs when putting and existing graphic on a web page is that it seems to have a halo of pixels around it. This happens when the image is transparent but was created on a different color background to the one it has been placed. The best way to get around this problem is to start with the original file, place it on a background the same color as the web page, then save it as transparent.

7. Calculate Download

A good rule of thumb for creating web pages that don't take hours to download is to keep your web pages below 50k. So if you are adding lots of images make sure the combined total of all these images keeps below this figure.