Top Tips for using images on the web

By David Lakins, Managing Director of Key Multimedia

Images are good design elements that will enhance a web site when used properly. If you use them well within your copy they will enhance the overall message you are trying to promote and can even lead people to convert quicker.

Photos in particular can convey specific information important to your web page (e.g., a photograph accompanying a news article). Or, they can simply help set the "tone" of the site, or draw the attention of the user.

If you take care with your images, you can create interest and engage the user.

Ten top tips for using images effectively within your website...

1. Use the JPEG (Joint Photographic Expert Group) format, with the .jpg file extension, for photographs. It is designed specifically for photographs. Drawings and logos tend to not look very good when saved in the JPEG format.

2. Use the GIF (Graphic Interchange Format) for images that are not photographs, such as drawings, logos, and maps. The GIF format is designed to display such images as clearly as possible. Don’t forget that GIFs can be transparent or animated.

3. PNG (Portable Network Graphics) are a more recent file format that is being used more widely in the media sector. PNG files are smaller than GIF files, and tend to handle colour better. But, remember that all new browsers display PNGs, but many old ones do not.

4. Web images should have definitions of 72 dpi (dots per inch). PC monitors display at 72 dpi, Macintosh monitors display at 78 – so resolutions higher than that serve no useful purpose because they will not be seen on the screen. The files will be too large and download times too long.

5. If you scan images over 300 dpi or you have the latest 10 mega-pixel camera don’t forget that the resolution will be too large for normal web presentation unless you optimise them before use.

6. Remember that there are only 216 browser safe colors. Browser safe colors are the colors that web browsers such as Internet Explorer and Firefox use in common. While a computer monitor may be able to display up to 32 million colors, browsers have the ability to put only 216 of them on the screen consistently. Mixing pixels of several browser safe colors makes up any other color. A solid block of color may look smooth if it is browser safe, but it will appear blotchy if the color is not browser safe.

7. Big images generally have long download times if they are not optimised. If you are using a software application such as Photoshop or Fireworks make sure the file size of all images is as small as possible. Play around with the image quality settings and adjust the overall file size compression (on JPGs) - you may be surprised how good an image appears despite being half the original file size.

8. JPG images are "lossey." This means you loose data each time you save the image
when you are working with it in an image-editing program. It is the compression process that causes the image to loose detail each time it is saved. To edit a JPG file, convert it into a native file format for your editor, PDS for Photoshop, for instance, edit the image, and then save the finished version as a JPG.

9. Be aware of copyright! It is often tempting to browse the Internet and other company websites looking for appropriate imagery that might sit well within your website. In the majority of cases the imagery being used will be copyrighted in one form or another and will have restrictions on its use. If you are in any doubt – best advice is to ask permission first.

If you are looking for stock library images a simple search on Google will show a number of sites where you can download images for free.

10. The most important thing you can remember about images on the Web is that planning is essential. Know where they will be used, how they will be used, what physical size they should be, and how the file sizes can be reduced.

Example:-

Here are two images that might explain the optimisation issue better. Both images come from the same original digital photo. The left JPEG image is 28KB in size whereas the right image retains the same dimensions but has been compressed by 60% - resulting in a data size of only 6KB. Spot the difference!