Images are very useful in web page layout and design. They add color to and enhance the appeal of a web page. Images files are however, bigger than text and scripts and thus take longer to load. Care should therefore be taken to ensure that images are used well in web pages. Following are some points worth noting:
1. Always optimize your images
All images should be properly optimized (compressed) before incorporating them into your web pages. This ensures that they take minimal time to load with no significant loss in image quality. Use of BMP and TIFF image formats should be avoided. Adobe Fireworks or Photoshop can be used to optimize images.
For accessibility and as a good SEO practice, all images alt and title tags should have a description of that particular image. For SEO purposes, the description should contain keywords. For accessibility purposes, site visitors who use text-only browsers or are visually-handicapped can get an idea of what the image is about.
3. Avoid incompatible image formats, unless really necessary
Not everyone uses the latest CSS compliant browsers. For example, some people still use old versions of Internet Explorer which do not support the PNG alpha transparency properties. When using images, bear in mind that your site will be viewed on different browsers across different operating systems.
4. Image interlacing: What is it?
Interlacing images enables your site visitors to see a partial image as it progressively loads on the web page. The image therefore gets clearer as the page loads, as opposed to only displaying the image after it has been fully downloaded from the web server. It should be noted that interlacing images results in bigger file sizes.
5. GIF, PNG, Webp or JPEG. What is the best format?
There is no exact answer for this one. The lossy compression of the JPEG format makes it ideal for images with gradients. The GIF format is best used for images with consistent color zones or animation. Although the best choice, the PNG format still has compatibility issues with older browsers.
Use of images in web pages cannot be overlooked. In view of network latency, server respose time, browser compatibilty, operating systems and computer hardware capability e.g. system memory. Images should then be used carefully so as to enhance the overall appeal of a web page. Always consider your users first before placing any image on a web page.
