A picture says more than a thousand words. But for search engines, however, it doesn’t – unless you optimize images appropriately!

In this post, we share seven tips on how to optimize images for your webpage. Not only will following these tips give more traffic from image searches, but it’ll also make your websites load faster for your end-users. The first four tips are focused on how to make images load lightning-fast for your end-users. The last three are tips on how you should work with images in order to make them rank in search engines.

So, let’s dive into it! (Or if you want to skip to the appropriate section – use quicklinks here):

• Fewer pixels means smaller size
• File-format matters!
• What is high enough quality for images?
• Compressing images to lose “deadweight”
• Good filenames help images to rank
• Optimize images for the visually impaired
• Images as a part of the content
• Summary
• Checklist

1. Fewer pixels means smaller size

The first, and perhaps most effective, trick to making image files smaller in size, and thereby also faster to load for end-users, is to scale images to the max size they will be available for.

Image files that are 1500 x 900 pixels and are used to fill a 500 x 300-pixel space at the most, will contain a whole lot of pixels that aren’t really used. For every pixel, the image file needs to save the colour information, so fewer pixels = less information. Less information means a smaller file.

2. File-format matters!

Choosing the right file format is important! Both in order to ensure that your visitors actually get to see the picture, but also because the wrong format can double or even triple your image file size.

At the time being, ‘.WebP’ and ‘.svg’ file formats are the highest standards to aim for. ‘.WebP’ can cover all types of images and works just fine to replace both the versatility of .png and the animations of .gif. But if you have images you want to be able to reuse in different sizes, vectorized images (.svg) can also be considered for stuff like your logo and icons.

There are a couple of things to be aware of, however:

• Pro: 78,6% of global users browsers supports .WebP (source)
  • N.B! Safari has yet to add support for .WebP (they are working on a solution as this article was published – see source)
• Pro: 92,8% of global users browsers supports .svg (source)
• Con: A lot of image viewers do not support such image files (yet)

Opting for these formats that aren’t universally applicable like the standard .jpg, .png and .gif should only be done if you don’t need to include fallback solutions. So a quick check-in with Google Analytics to check what browsers your visitors are using is advised.

3. What is high enough quality for images?

As a general rule-of-thumb, you should not be able to spot the pixels when zooming in on a picture with up to 200% zoom. However, spotting pixels at above 200% zoom means you have compressed the file to its bare minimum.

This is for the majority of businesses, but exceptions can occur. While photographers works will more likely be zoomed in on beyond 200%, they will more often than not want people to get their high-quality images online – because that’s what they have to sell. There is less likelihood of theft if the image is in a thumbnail version that pixelates at 150% zoom than there would be if the image quality is very high.

And while most will prefer to see the product live with their own eyes, pictures of high-end expensive products like luxury cars might merit higher quality. There are also brand considerations to include in this. If your company has a branding book, keep to the standards set forth there.

However, always keep in mind that the “lower” quality your image files has (while maintaining good appearance in the given size) the lower their file size will be, meaning they will be faster to download and render for your visitors.

4. Compressing images to lose “deadweight”

Even if you scale your image to size, set the quality down to e.g. 70% and save for web (photoshop/adobe example), opt for the most appropriate format (except WebP and .svg), there is usually some remnant code in the file that goes unused.

Most image files will contain information on how browsers should paint colours that aren’t really necessary. Compression tools will look for pixels that have a colour code that varies extremely little from already used colour coding and swap it to the already used one. All in all, you will be able to reduce the file size by between 5% to 95%, depending on what is portrayed and the quality of the image.

Some images also contain EXIF-information (metadata embedded in the image that can inform about photographers name, date image was taken geo-locations and more). While Google is capable of reading EXIF-information, it has yet to be proven that they apply any SEO-value to this kind of information. Apply some common sense – for some images, EXIF should be present for natural reasons.

A free tool to help apply such compression: tinypng.com. This is a great tool if you only have a few photos to compress, as you do it manually with up to 20 files at a time. If your website has hundreds or thousands of images – ask your front-end developer if they know of a plugin/extension that can do this to the entire archive to save some time.

5. Good filenames help images to rank

If a picture is named “volvo-s90-dashboard.jpg”, then everyone can agree that it does a better job of explaining what is depicted than “_072572.jpg” does. This is also the case for search engines; image file names that explain the depicted content is counted when ranking images.

Image search is often an underutilized feature to drive traffic to a website. Google Images is the world’s 2nd largest search engine – and getting images to rank at the top there does not really require a lot of work.

When deciding what a good filename is, remember that you should keep it short and descriptive – and remove stopwords. If the filename does a good job of setting expectations for the actual image like the example above, then you’re good to go.

However, is the above example something the author wants to rank for the query ‘Volvo s90 dashboard’, or is ‘luxurious car dashboard’ more desirable? Perhaps combining them into “volvo-s90-luxurious-dashboard.jpg” will be even better?

6. Optimize images for the visually impaired

While you may have heard that search engines are getting smarter when it comes to recognizing image content, they aren’t all there yet. I’m sure that most who have tried content search or product search on images can agree – I certainly can.

Alternative text is an attribute you place inside the HTML tag that fetches the picture that should be used to describe the depicted content. Using the example image-file above, the HTML tag should look something like this:

A search engine looking at this HTML tag can pull this information out and know that this picture has merits to rank when someone searches for e.g. “volvo s90 dashboard”, “luxurious dashboard”, “volvo s90 dashboard view from backseat” and more. And truth be told – if you did this and none of the other webpages with appropriate images did – you’d be the 1st image shown for these searches.

Image tags should always have alternative text attributes. This is an attribute for screen readers and people who block images from loading that allows the user to get an impression of what the image contains. It is also a requirement by EU law (for websites to be accessible), so there’s always that as well.

7. Images as part of the content

The last tip on how to make images rank in image search is context. On the majority of pages that include images, there will be something more than just that one image. Most likely, the page will have a headline and text, maybe other images and image captions and perhaps even structured data. These are the elements that surround an image when search engines come across it, and this context weighs in heavily when it comes to ranking images in search results.

To compare with a real-life situation: If you find a photograph in a box in the attic of a house you just bought that depicts a young woman in a crowd – it might be anyone, anywhere. If this image strikes you like something the right owner wants but that you’re curious about learning more about, then the “filename” would be if someone wrote on the back “Katherine Jacobsson”. The alternative text would be if it included “at Jimi Hendrix concert”. If it was found in a photo album labelled “From Woodstock 1969”, then you could consider that the context and be able to say “This is Katherine Jacobsson at the Jimi Hendrix concert in Woodstock in 1969”.

This is how the three different elements work together to improve how images are understood and ranked by search engines such as Google Images.

Summary and additional thoughts

First a quick recap of the 7 tips you can apply to optimize images:

1. Scale your images to actual size, as this means fewer pixels that need information about which colours to portray
2. Choose file formats that, by design, take up less space. But – remember that not all browsers support all file formats (and if images are meant to be downloaded, check that image-viewers support file formats as well)
3. High-quality images take up more space. Compress your images! They shouldn’t look pixelated (before you get to 200% zoom)
4. A lot of images will have a wide variety of colours that users don’t perceive as different colours. Compressing images to reuse existing colour codes means you can shave off the size without compromising the quality
5. Image files should have descriptive names that alone can be used to explain what the image contains
6. Using alt-text to describe images for visually impaired visitors also helps SEO, and makes your website GDPR compliant to boot
7. Images almost always have surrounding content, so make sure the image fits within the content and adds value to the content as well

If you follow these 7 steps to the letter, your images will help your website load faster, and your images will rank in image search – probably also in the main search engine result page (SERP) – at least on Google. But you might get there by just applying 2-3 of the tips as well.

Exactly how much traffic (and potential leads/customers) that will follow when you optimize images will vary from industry to industry. And when it comes to all things SEO, going for 100% is often not necessary. You just need to outperform the competitor, and where images are concerned this will save you on both time and expenses.

However, if there are images you want to give extra attention to (ie. infographics or images of something you know people are searching for), then you should apply these 7 tips.

If you want to know whether or not image SEO should be your top priority, feel free to call one of Curamando’s advisors or consultants, and we can help clarify if this is where you should put your time and effort, or if there are other avenues you will get a higher ROI from pursuing.

Checklist

If you liked this post, you might also like this: These are the 5 SEO KPIs you should monitor.