Optimizing The Benefits Of Web Images For Your Website

Optimizing The Benefits Of Web Images For Your Website

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.

Unlimited data backup with BackBlaze


Optimizing The Benefits Of Web Images For Your Website

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.

14 Responses to “Optimizing The Benefits Of Web Images For Your Website”

  1. Margie says:

    I am always browsing online for tips that can assist me.
    Thanks!

  2. Lanny says:

    I’m not certain the place you are getting your information, but great topic. I needs to spend a while studying more or figuring out more. Thanks for excellent info I was looking for this information for my mission.

  3. killara says:

    I have an easy recipes site, so images are important and this post on images may help readers.

    I’ve discovered Smush It! It’s a free Yahoo program that reduces image sizes without loss of quality. It’s brilliant. Here’s the link.

    http://www.smushit.com/ysmush.it/
    The images I’ve loaded have been reduced in size by about 30%, which in my book is heaps.
    You are welcome to have a look at one of my pages with lots of images and consider if the load time is sufficiently ok. This page has loads of images:

    http://www.easy-recipes-for-families.com/cheap-quick-easy-dinner-recipes.html

    The trick with Smush It, I’ve found is to load just a few images at a time – about 5 or 6 otherwise it seems to come up with load errors. Even with one load error, you can’t proceed to down load the rest of the other images that have been successfully reduced.

    I’ve tried both the Uploader and URL button – it’s much faster with the Uploader button.

    Yes, it is time consuming, but worth the effort.

    Warmest,

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.