Web images are akin to a double-edged sword with conflicting sides. One helps you fight but the other fights against you. Whereas they are important in increasing rankings on search engines and viewership by users they can be what makes users readily click on the back button without second thought.
Why Use Web Images?
Relevant and interesting photos add life to the web page and are just what you need to make the user linger on the site beyond the first five minutes. Pictures do more than entice the viewer they tell a whole story on their own and appeal to the readers emotions. Whereas text will touch the mind of the user, images reach out o their feelings and get them attached to your site. Many a good recommendations have been based on an interesting picture someone saw on the site that delivered a good service.
Caution on Web Images
The other side of the coin is that web images significantly reduce downloading speed of your website decreasing navigation and accessibility of the site. Given the increasing number of Internet users who access it through their iPhones and iPads over those with computers, many users will not bother with a site that takes too long to open. In the long run they end up not viewing the site and great images placed for them
Does this therefore mean that web images should be inclusive of the elements when designing the website? On the contrary, use images to the maximum. Advocating for maximum use of photos does not means stuffing them on the website; it simply means find the ‘satisficing’ solution. The right mix between what satisfies yet suffices. Place what is relevant to the user yet does not compromise your page speed
3 Web Image Formats to Use During Design
Many picture formats are available but only three types should be used in web design, namely JPEG, GIF and PNG.
GIF pictures are advantageous in that they are small hence do not impede the downloading of your page. On the other hand, they are limited to only 256 distinct colors. This means saving a picture in his format will result in banding of colors. Pictures are not as bright and it may be difficult to place particular distinction to similar hues. The pictures are not as sharp and reduce the overall clarity of the site. This file format should not be used to upload photographs that have higher color gradients compared to images. They are suitable in uploading flat color images found in midst of text and as linkages.
PNG are similar to GIF but offer greater compression resulting in a smaller size of the same picture as compared to GIF. You can use PNG to save animation pictures.
JPEG file saving format for pictures is the best to use for photographs given its clarity and compression style that allows visibility of a myriad of colors. Do not use this for mono colors or an image with a large chunk of one color, as it tends to blur solid blocks. The greatest disadvantage of JPEG is that they are heavy and lower page speed. To counter this, resize the image, crop and change the compression settings. Attempt to get a small image as possible without compromising on quality.
The Golden Rules of Images in Web Design
- Always use the graphic software to make all the necessary adjustments to a photo then upload it to the website. You get more room for compression and more features than using the browser to adjust pictures.
- In the site design, ensure there is a provision for alternative text to the image to increase user navigation.
- Include the height and width attributes when placing images on the site to reduce on uploading speed. Otherwise, the browser has to spend a few extra seconds determining the layout and display of all the images in your site, which to the user translates into more time taken to open the site and the consequence, is always the back button.
If your site has several images, which are recurrent on the subsequent pages then use CSS sprites. These cache images enabling the browser to open the subsequent pages faster. They significantly reduce the speed and improve user satisfaction and navigation.