Skip to content

4 things to do with every image you put on your website

There’s no doubt that almost every element of a web page helps the page rank more highly in the search engines, and some of the most neglected elements are images: the product shot, the scanned-in data table …even the company logo at the top. Search engines can’t look at an image and work out what it is: you need to tell them, explicitly. In return, they will credit your page with being more relevant to a search for the item in the image. Here are four things which you should do with every image to help it play its part.

Firstly, before you upload it, change the filename to something descriptive. If it’s an X32 Red Widget and the filename is “IMG00003.JPG”, then change the filename to “x32-red-widget.jpg”. It’s quite alright to change the filenames of images, it doesn’t hurt them! Then, once added to the page, make sure it has an “alt” attribute and preferably a “title” attribute too. How you define the content of the attributes will be dependent on the system you have for designing and managing your web pages, but the facility will be in there somewhere. What should be in them? The alt attribute is short for “alternative text” and was originally designed for devices which couldn’t show the image …so they would show a box with the “alternative text” instead. It became very useful for visually-impaired people too, and was also a great help to search engines once they arrived on the scene. So it should describe what’s in the image. Don’t get carried away with marketing messages, but if the image is making a point, feel free to put that into words. An example might be: “The Red Widget Company’s X32 Red Widget showing its removable cover”.

The title attribute is the one which appears when you hover over an image with the mouse pointer. Note that in old versions of Microsoft’s Internet Explorer, if there was no “title” attribute (a very common occurrence), then the content of the “alt” attribute would appear on screen instead. This is no longer the case, so it’s useful to have a “title” attribute now. I would use the “title” attribute to put over your marketing message, but keep it concise, because nobody wants to read a paragraph’s worth of information in a tooltip message, and browsers will cut the message off after a few words anyway. Think of it like a magazine picture caption, but a modern one which gets the message over as snappily as possible, e.g “Easy to service: the X32 Red Widget”.

Finally, do try to ensure that the image isn’t any bigger than it needs to be. You can specify the size you want an image to be shown, and the browser will scale the original to be that size, but it’s inefficient and can look awful. If the image is to be shown as 256 pixels wide by 192 pixels high, then get a copy of Photoshop (or use an online image resizer) and make it that size. Don’t upload some enormous multi-megabyte image from your digital camera and then tell the page to display it at a fraction of the size, because every visitor will need to download the larger original, even if they only see a smaller version. And people don’t like to wait.

1 thought on “4 things to do with every image you put on your website”

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.