consider this - before you use images on your web site
Using images on your web site can be a good way to catch visitors’ attention. But images can also cause much damage and even drive visitors away from your web site.
In this article I will go through some of things to consider before you use images on your web site.
WHY DO YOU WANT TO USE AN IMAGE?
A picture can cost you more than a thousand visitors. Ok, so that is not quite how the cliché goes, but you really can do more damage than good by using images indiscriminately on your web site.
Make sure an image is really serving a purpose before you include it on your web site. Only use images that support the text of your web site.
Images can be a right pain to download. Admittedly, fewer people are using dial-up connections, so the download speed is less of an issue nowadays. Nevertheless some are still on slow connections and even broadband connections can be slow with high-resolution images.
The quality of your image is also important. Lets face it you won’t sell that fancy, thousand pound necklace, if you display it in a blurred, dark photograph.
WHERE WILL YOU GET THE IMAGE?
No, you cannot just download an image from someone else’s web site and use it on your web site. Scanning images from magazines and using them on your web site won’t do either.
Unless you have the explicit permission from the owner of the image, you cannot use the image on your website. To do so is what is commonly known as stealing! Think about it, just because I see your car parked somewhere unlocked, does not mean I can just take it and use it myself.
So you have the option of either producing the image yourself, or hire someone else to create the image for you. Obviously it is likely to be much cheaper up front for you to produce an image yourself. However, unless you are particularly talented in that area, I would recommend you leave it to a professional.
OPTIMISE THE IMAGE FOR YOUR WEB SITE
Always optimise the images you use for your web site. This includes considering which file type, size and quality, you should use.
File type - I do not intend to detail all the advantages and disadvantages of the commonly used file types in this article. However, below is a brief description:
- GIF: The Graphics Interchange Format is a bitmap standard, which is well supported by all browsers. It is best used for images with few colours. GIFs are commonly used for drawings, graphs and animations. GIFs are not very good with detailed images.GIFs were until quite recently patented, but GIFs are now patent-free in most countries. 11 August 2006 is believed to be the expiry date for the last patent, but I recommend you do some research to be sure that it is patent-free in your country.
- JPEG: The Joint Photographic Experts Group is like the GIF a bitmap standard, which is well supported by all browsers. It is best for photographs and detailed images. JPEGs are great for compression and are relatively small in size. However, because of the compression a JPEG loses quality, every time you save it.You can read more about JPEGs at http://www.w3.org/Graphics/JPEG/.
- PNG: The Portable Network Graphics is also a bitmap standard and was designed to replace the GIF format in order to get around the GIF patent issue. In the beginning it suffered from poor browser support, but most browsers now support the format. PNGs are good for both detailed and simple images. Unlike the JPEG, its compression is fully lossless, however the size of a PNG does tend to be slightly bigger than that of a JPEG.You can read more about PNGs at http://www.w3.org/Graphics/PNG/.
- SVG: The Scalable Vector Graphics is a vector graphics standard. It is a language based on XML, which in plain text instructs the browser how to create and display the image. The SVG standard is seen by many as the future format. An SVG keeps its resolution at any size, so it is fantastic for scaling images. Unfortunately, not all browsers support the SVG standard yet.You can read more about SVGs at http://www.w3.org/Graphics/SVG/.
Size and quality - Including images on your web site will mean finding a balance between a file size that downloads quickly and a quality that is actually worth showing.
Invest some time in editing your image. Try saving it as different types, in different sizes and quality. Sometimes you can improve an image by cropping it, so that you focus on a particular section of the image as opposed to showing the entire image.
If you must show big images on your web site, then start by showing a smaller thumbnail version of the image with a link to a bigger version of the image. This way you leave it to your visitors to choose, if they can be bothered waiting for the big version to download.
Of course there is one way to avoid all the preparations and considerations mentioned above - hire a professional!
FURTHER READING
If you would like some help with writing content for your web site, you may want to read: CONSIDER THIS - when you write for your web site
REFERENCES
W3C - Graphics, JPEG: http://www.w3.org/Graphics/JPEG/
W3C - Graphics, PNG: http://www.w3.org/Graphics/PNG/
W3C - Graphics, SVG: http://www.w3.org/Graphics/SVG/
Technorati Tags: web site, images