Request a quote
Images are a critical part of any web page. But how do you make sure that they’re properly optimised, not just so they are aesthetically pleasing site visitors, but also for search engines? After all, crawlers cannot actually see the images that you have used, so no matter how attractive they might be to the human eye, they’ll be invisible unless they have the right attributes set. In this blog, we’ll be taking a quick look at these characteristics, and how you can optimise them to help improve the performance of your images in search.
The Image Filename
The filename is name that the image file is given when it is uploaded to a website. A descriptive filename that also contains the keyword that you’re focusing on in the page is much better than a simple default filename. However, it shouldn’t be stuffed full of keywords either. It should be an accurate description of what the image is!
Words in the filename should be separated by hyphens (-), and not underscores (_). This is because underscores used to be treated as if there was no gap between the words - so image_name.jpg was actually interpreted as imagename.jpg.
You should also not use spaces to separate words. This is because spaces can be represented by different browsers in different ways. Some may insert the character code %20 to represent a space, turning a filename such as stock image.jpg into stock%20image.jpg. Others may not recognise the space at all.
Using hyphens instead of underscores or spaces avoids these pitfalls, while keeping your filenames easy to read. I’ll now run through an example of how to implement this.
Let’s say you were writing an article on how to use Photoshop and you wished to illustrate the first page with a picture of someone reading the guide. You’ll want your guide to rank for the keyword ‘Photoshop Guide’ (a pretty lofty goal, but this is just an example!).
An image filename like psdg1486.jpg offers little value to search engines, and it makes the file much harder for you to understand at a glance as well. Whereas, a name like photoshop-intro-guide.jpg is much more informative, and contains the keyword that crawlers will pick up on. It may only help a small amount, but it’s certainly something to consider, especially when uploading new images.
The ALT Attribute
The image alt attribute, often called alternative text, is often considered to be the most important for SEO. This is the text that displays when an image on a page fails to load for any reason. As search engine crawlers cannot display images, they use this text to determine what the image represents.
In addition, screen reading programs for the visually impaired also use these tags, reading them to describe what the image displays. If you don’t have alt attributes set, these users won’t be able to understand what the image is meant to represent.
As such, the alternative text of an image needs to serve two purposes;
- it needs to provide information about the image for search engine crawlers, which means the text should be well optimised for them (with keywords etc)
- it also needs to be user-friendly, so that if the image fails to load, users can still work out what the image is
Using the example above, the alt attribute for the image could be ‘Photoshop Introductory Guide’. This is both descriptive, for users, and is also well optimised for SEO purposes.
The Image Title Attribute
The image title attribute is displayed in some browsers when the user hovers over the image. It has little SEO value compared to the alt attribute and is often simply duplicated across. It can be used to provide extra context to an image, but it should always accurately describe what the image is. As such, you shouldn’t feel like to need to include a title attribute for all the images on your site, but it’s generally good practice to incorporate it.
The Filesize of the Image
The filesize of the images on your site matters as it affects how fast the page will load - and search engines are known to include load times as part of their ranking signals. Pages that load slowly have a negative impact on user experience, and can also cause the ranking of your site to be affected negatively as search engines penalise you for having poor load times.
To manage the filesize of an image, you can make a number of changes, such as changing the file type, or lowering the quality of the image to recuse the filesize, an example of which can be seen below.
Here we have a PNG image with a filesize of 1.1MB. The quality is high, but the image size is quite large.
Here is the same image in a JPG format. There is a drop in quality, but also filesize, which is 610KB.
Below is a compressed version of the same JPG with a size of just 9KB, but a significant loss in quality.
There is a somewhat noticeable difference in quality between the images, and as such, it’s important to pick the one that’s right for your site, deciding what balance of page loading speed versus image quality will be best for your users.
Hopefully this quick guide will help you to make sure that all the images on your site are well optimised, so that they don’t just look great, but also help your site to rank in search engines as well.
