Due to nature of the way people use the web, whether it is on a desktop pc or a mobile phone, the use of images is vital to hold a visitors attention. The eye is always drawn to the picture or graphic first. The mind will make split second assumptions about the page they are viewing according to the imagery.


So, how can you use images to the best advantage for your website? It goes without saying that if you are selling products then you need to have very good quality images of the product, viewable from different angles with options to zoom in or out to determine intricate detail.

But what about service based web pages or blog posts? Again the image needs to entice the visitor to want to read what you have to say. If the image bears no relevance to that person, their needs or tastes they may not bother to look further unless the headings on the page were very engaging.

Size is everything

However, when adding images to a web page you need to consider the file size of the image, if it is too large then it will seriously affect load time of the page which not only frustrates visitors but doesn’t keep the big G happy either (Google uses page load time as a factor in their ranking algorithm). Save images at no more that 70KB or 500×500 pixels.

So, filling a page with loads of pictures where one would suffice will not help your on-page optimisation either. If you need to have many pictures to sell your product successfully, use small thumbnails to allow the page to load quickly. The visitor can then click to view the image larger if they wish to.

File Type

Using the right file type for the right situation will make all the difference to load times and the quality. Here are the options:

  • JPG—Use the JPG format for photographic images. These are images with millions of colours. This is probably the most popular choice for product images as the quality stays good enough even with the compressed version.
  • GIF—Use the GIF format for flat colour images. These are images with just a few colours like logos or simple graphics.
  • PNG—PNG format can be a good alternative to a GIF as it supports more colours but the fact that there can be issues with them displaying correctly on mobile devices is a disadvantage and possibly a risk not worth taking.


Positioning of the image is important too, on the one hand you need the picture to be above the fold to entice your visitor, but from a search engine point of view you need the text to be above the fold. The simple answer is to do both! Wrap the text around the image letting it take up no more than half the width.

Optimise Your Image

Follow these rules to optimise your pictures, this will enable the image to be found via image search. The more information you can give Google the better. See the example given below:

wind swept hawthorn tree at Blunsdon Castle near Swindon on a winter morning by Darren Moloney

  • Keyword rich file name. – So ‘Blunsdon-Castle-winter.jpg’ not ‘IMG20110711 375632.jpg’
  • Descriptive Alt tag. – ‘wind swept hawthorn tree at Blunsdon Castle near Swindon on a winter morning by Darren Moloney’.
  • Title text – not as necessary for SEO but good for the pop up text when someone mouses over the image. – ‘Blunsdon Castle, Wiltshire – Photograph by Darren Moloney’.
  • Picture Caption – Use a good descriptive caption to keep text near to the image relevant –  ‘Picture by Darren Moloney – knotted and wind swept hawthorn tree taken on an early November morning whilst walking the dog at Blunsdon Castle near Swindon’.
  • Surrounding Text – if the text near the image is also relevant this will be sending a very clear message to Google that the page and image are all about the same thing

Over Eager is not attractive

As with all optimisation now, don’t overdo it! Don’t stuff spammy lists of keywords in. Make it flow like a sentence or Google will penalise you for over eager (unnatural) optimisation.

Check yourself out

For some businesses, image search is a vital way to drive traffic to the site. Go incognito and check if your images come up via image search for the sorts of things you know your customers search for online.

Image site maps

If your website uses javascript or pop-ups for images, use an image site map to help Google to see as much information on the images as possible. Use the image extension on Google Sitemaps to do this.

Do you have any further tips for using images in web content? We welcome your comments 🙂