Image SEO

What is image SEO?

Image SEO is the set of activities performed on a website's images to make them more suitable for ranking higher in image search results and get more clicks from the users. These activities include selecting the right images, optimizing them, using them correctly in the HTML, providing context to them and finally loading them quickly on the user's device.

While working on image SEO, you can keep one thought as the guiding principle - "Does this change benefit my readers or the search engines to understand it better?" That's it! Along the course of this guide, you will realize how this principle holds good almost always. Let's get started.

Selecting the right images for a good user experience

Images enhance your reader's experience, lift the page visually or present information that cannot be conveyed as text. If used correctly, they will increase your reader's engagement,

If the images on your website do not serve any of these purposes, they will end up being a visual overload for your user and slow down the page load time. Here are the rules you should follow when selecting images for your website.

1. Only use good quality images

With websites like Unsplash, Pexels, Pixabay, and many more, it is now easier than ever to source high-quality, royalty-free images to accompany your content.

There is no need to break the bank to get custom pictures clicked (unless necessary), no low-resolution images, and no cliched stock photos — just a pure visual delight for your readers.

2. Only use images when necessary

If adding an image to your content does not improve your readers' experience, don't use it. For example, if you are selling a product on your website, the product image is necessary. However, suppose you are writing a blog advising about managing one's finances. In that case, the text is self-explanatory, and images showing happy people with money on time would be unnecessary.

3. Don’t add a lot of text in images

Adding text in images has quite a few problems from an accessibility point of view. First, it does not scale well across devices. What reads fine on a laptop would not be legible on a mobile device. Second, your users would not be able to select or copy the text on an image if needed. Third, automatic text translation services, now a part of browsers, won't work on such text. Lastly, and more importantly, whether search engines decipher the text on images and how they rank them is still unknown.

Keep the important text like titles and descriptions and your images separate. Your users and search engines will love it.

4. Use vector graphics wherever possible

There are two kinds of graphics - raster (pixel-based) and vector (line-based). JPG and PNG images fall in the former category, whereas SVG images fall in the latter.

You would have probably noticed that if you stretch a JPG or PNG image beyond their size, they start to pixelate. On the other hand, Vector graphics like SVGs don't pixelate at all regardless of how you scale them.

Coupled with their usually smaller size for graphics, you get a single, really light graphic that looks sharp across devices and is SEO-friendly.

Getting your images ready for better image SEO

Once we have collected the images that we want to use on our website, we need to do some preparation before we can start using them on our website.

These activities are are of two types. The first set of activities is related to organizing your images better so that readers and search engines have better context. The second set is about optimizing them so that they can load faster.

1. Naming your image correctly for SEO

Images clicked using DSLRs, or mobile phone cameras often have file names like DSC000123 or IMG_123456. It is very convenient to use the same file name and upload the image to your storage or CMS and start using it.

But, it is a huge opportunity lost in telling search engines about that image, and by the extension of it, what your page contains.

For example, instead of giving a random name to the image below, we can rename it as red-rose.

Extending this idea, if you run a flower business online, you would have many photos of red flowers. Instead of naming them as red-flower-1, red-flower-2, and so on, provide more descriptive keyword-rich names for your images.

For example, the two images below have names red-rose-with-morning-dew and woman-holding-red-rose.

Also, don’t stuff keywords in the image name. Naming your image red-flower-best-flower-for-sale-new-york-discount-valentines-day-flower-bouquet.jpg would not be right. Keep it short and relevant.

Tip: You can rename the images in your storage or CMS like WordPress and use the updated URLs on your website. If you have many images, it could be quite a task renaming all of them and replacing the URLs. To avoid that, you can use ImageKit’s dynamic SEO URL feature to deliver images via ImageKit with the correct name without actually renaming the file.

2. Organizing your images with a good URL structure

Google uses the URL structure of an image, along with its name, to better understand its context.

For example, imagine you have a travel website with images of landmarks from different cities. Instead of placing the images in a single folder and ending with a structure like /images/eiffel-tower-at-night.jpg, you can have a folder structure like /images/cities/france/paris/eiffel-tower-at-night.jpg. This URL structure indicates that the images are organized by their country and city name.

Similarly, you can organize the images in an e-commerce store by product type,  gender and brand, and the URL can look something like this - /images/tshirts/men/polo/lacoste/red-striped.jpg

Tip: Organize your files in the proper folders in your current CMS. If you don’t have that flexibility in your current image storage, you can use ImageKit’s media library to upload and organize images for use on your website.

3. Use resized and responsive images for better image SEO

Loading correctly resized images across devices is critical. For that reason, it is also indicated in web performance reports like Google Lighthouse, WebPageTest, etc., under the head "Properly resize images."

It is not uncommon to see images from cameras or stock photo websites more than 5000 x 3000px. But we rarely need such sizes on our website when it loads on a user's device. The larger the dimensions, the higher the size in Kilobytes, and the slower the load time.

We need to resize the images to a more suitable dimension for different places on our website for desktop and mobile devices.

For example, a mobile device could need smaller image dimensions than a laptop. Similarly, images on your product listing page will be smaller than the zoomed-in image on your product detail page.

You could resize your images manually using tools like Photoshop or any other tool online. It is also possible that your CMS, like WordPress or website platform like Shopify, automatically provides you with in-built resizing. If not, and especially if you need more control over your image sizes, you can use a real-time image transformation tool like ImageKit that helps you resize an original image to any given size just by specifying the output size in the URL.

# For 200 x 300px images on your product listing page
https://ik.imgkit.net/demo/default-image.jpg?tr=w-200,h-300


# For 800 x 800px images on your product detail page
https://ik.imgkit.net/demo/default-image.jpg?tr=w-800,h-800

Example of real-time image resizing and cropping with ImageKit

The case for responsive images

With so many different sizes possible across devices and pages, the best way to handle such complexity across the board is to use responsive images on your website.

Simply put, you provide the browser with a list of image URLs via the srcset attribute instead of a single image URL in the src attribute. The browser automatically loads the image of the right size depending on the user's device. You can read more about responsive images in this guide.

Example of a responsive image tag with srcset attribute:

<img src="image.jpg" 
        srcset="small.jpg 300w,
                medium.jpg 600w,
                large.jpg 900w"
        sizes="(max-width: 300px) 100vw, (max-width: 600px) 50vw, (max-width: 900px) 33vw, 900px"
/>

Again, your CMS or the theme that you use could already be implementing responsive images. If not, you can always use ImageKit's real-time transformations to generate the different sizes you need for your responsive image tag.

Implementing this would require technical changes, like changing your website's theme or template. But, this would be a one-time change. Once done correctly, you can be sure that your browser will use the right image size always.

Tip: Resizing images is just one part. For the best experience and load time across devices, always use responsive images. Use your CMS's capabilities or a tool like ImageKit to get the different sizes needed.

4. Compress your images

Even after you resize the image to the correct dimensions, there is still scope to bring down the file size.

Compressing images will speed up the image load time and the overall page load time, which is a critical factor for SEO. Google too reports this in PageSpeed under the head "Efficiently Encode Images."

Remember, excessive compression would wreck the visual quality. We need to find a balance between the size and the visual quality, which was the first point in this guide. On a scale of 1-100 used in most tools, 100 being the best, you would generally be ok, both in terms of size and visual quality, if you use a quality level between 75 to 85 for your images.

You get options to control output quality, one image at a time, in tools like Photoshop or Squoosh. If you have many images, you can use ImageKit, to compress your images in real-time without distorting the visual quality.

Tip: Compress your images to Quality level 80 for the right balance between visual quality and image size. Go lower and your image would look bad. Go higher and your images would be too heavy. Check the “Efficiently Encode Images” section in the  Google PageSpeed report.

5. Convert images to a suitable format

Not all image formats are suitable for all kinds of images. The wrong format for the wrong image would lead to heavy or visually-poor images.

A simple rule of thumb is to choose JPEG format for anything that is a photograph. Choose PNG for anything that is a logo or a graphic. Choose GIF for any animated images. In most cases, you could substitute PNGs with SVGs for better scalability and smaller size, but creating SVGs could be a challenge if you do not have them already.

It gets more interesting, though. Modern image formats like WebP and AVIF offer far better compression than the formats mentioned earlier at the same or better visual quality. Google PageSpeed also places importance on using modern formats under the "Serve images in next-gen formats" head.

But, and here is the hard part, not all browsers or apps support these formats. So you cannot just send out WebP images to every user. You would need to have all image format variants and load the write one on each device.

One way to do it is to manually convert your images to modern formats and then use the <picture> tag to load the correct format on each device.

<picture>
    <source srcset="/image.webp"
            type="image/webp">
    <source srcset="/image.avif"
            type="image/avif">
    <img src="/image.jpg" />
</picture>

Alternatively, if you use a CDN or content delivery network (and, if not, you should!), your CDN may support automatic conversion to WebP, if not AVIF, when the image is delivered. You can also use ImageKit, a specialized image CDN, to automatically deliver the images in the right format on all devices.

Now that we have our images ready, the next step is to start using them on our pages. These points are related to the website's HTML, and if you are not familiar with HTML, you would want your website developer to read this bit.

Placing images on your webpage for image SEO

We need to take care of two sets of things when we are loading the images on our website. The first set is related to the data we provide with the image to help search engines and users understand it better. The second set is related to when and how do we load the image for better performance.

1. Using alt text with your image

alt stands for alternate. If the image does not load or the user opts out of seeing it, browsers show the alt text that you provide with the image.

The HTML for providing the alt text looks like this <img src="red-car-ferrari-f50.jpg" alt="A Red Ferrari F50 in a showroom" />

And this is how browsers render it when the image does not load.

Using alt text is not just a good accessibility practice for your readers but also presents an opportunity to add relevant keywords on the page and provide more information to search engines about the context of the image on the page.

Note: Other articles would talk about the title attribute as well. The text specified in the title attribute is displayed when a user hovers with their mouse pointer on the image. Given that this is a very desktop-oriented behavior, not suited for mobile, and has accessibility problems on screen readers, it is best to leave out the title attribute and use only the alt attribute. If there is any information that was a part of the title attribute, try including it in the post's main body.

2. Using captions with your images.

Captions are the small text that appears along with your image, usually just below the image. A lot of images in this guide have short captions just below them.

Given people's tendency to "scan" the page rather than read it in full, captions provide a better way to engage the reader. As per some reports on the internet, captions are read over 300% more than the regular text itself. More time spent on the page, more engagement would result in better SEO.

But, at the same time, not all images would need an explanatory caption. Don't stuff your page with them.

3. Adding structured data for images on your page

Google tries to understand your page so that it can display it in the results for relevant queries. Structured data is a way to provide explicit hints to Google about the content on the page and how to classify the content on the page.

While adding structured data may not improve your search ranking, it helps Google present a better-looking search result, which could get you more clicks than a regular search result.

For example, you can use structured data to indicate images associated with a recipe or a carousel of images on your page.

You can also use it to indicate the license associated with an image and let Google use this information to show the relevant tag with your image in its search.

4. Using semantic markup for images

When a search engine like Google crawls your website, it reads your page's HTML. There are certain HTML tags like the img tag or the relatively new picture tag that indicate very explicitly to the search engine that they represent an "image." This is known as semantic markup, where the element conveys the meaning of its content

<img src="semantic-markup-for-loading-images.jpg" />

However, many websites do not load images using the img tag and instead load them as background images using CSS on a generic div tag.

<div style="background: url('non-semantic-markup.jpg')" />
</div>

While, to a user, images loaded using the img tag and the div tag would look the same, since Google does not crawl the CSS background image, using the div tag does not help you with image SEO. You should avoid using it as much as possible.

Optimizing images for safe search

SafeSearch is a feature in Google search that allows users to prevent explicit content, videos, and images from showing up in search results. Google does use machine learning and references of the same image on different kinds of websites to determine whether it can show the image in SafeSearch or not. But, if your website contains such content, you should always help Google identify it.

One method that you should use is to group all the images under the same URL structure. This method is an extension of the URL structure point mentioned earlier and is also recommended by Google. For example, you can group all adult images in the folder adult.

https://images.example.com/adult/adult_image_name_1.jpg
https://images.example.com/adult/adult_image_name_2.jpg

Another method to tell that your website hosts adult content is to tag your pages as adult explicitly. You can do this by adding any of the two meta tags to the page, as shown below -

<meta name="rating" content="adult" />
<meta name="rating" content="RTA-5042-1996-1400-1577-RTA" />

Making your images indexable and discoverable

Now that we have placed the images on our web page, we need to ensure that the images are discoverable and crawlable by search engines.

1. Creating and submitting image sitemaps

Sitemaps are files in XML format that provide Google information about the pages and files on your site. While Google does crawl your website, providing it with a sitemap makes the crawling more efficient.

Also, you might have images that are not discoverable by Google. For example, these could be behind some action, like an image getting loaded after someone logs in. For such images, you can provide Google with sitemaps that make them discoverable.  

You can add the images to your main website sitemap. Or you can create a different sitemap for images alone. Separate image sitemaps also allow third-party domains for image URLs, which means that you can use third-party image CDNs to deliver the images without worrying about discoverability.

Tip: Platforms like Ghost, Shopify, Wix, etc., automatically generate the sitemap for you. If your platform does not do that, there would usually be a plugin, like Yoast for WordPress, to generate the same for you.

2. Using robots.txt file to control crawlable files

By default, Google would crawl everything it finds on your website and add all the information to its search index. Therefore, this point is only valid if you want to prevent Google from accessing particular images on your website.

We can use the robots.txt file to prevent Google search bots, both the images bot and the generic search bot, from accessing images.

For example, if you do not want any files in the icons directory to be indexed by the images bot, then your robots.txt file, which is to be hosted at the root of your domain like https://www.example.com/robots.txt, can contain an instruction like this -

User-agent: Googlebot-Image
Disallow: /icons/*

You can read more about configuring a robots.txt file here.

Loading the images on your website

Let’s look at some of the best practices to load the images on our website. The points in this section impact how quickly we deliver the images to our website’s visitors. This speed-up has a direct impact on image SEO.

1. Use a CDN for image delivery

A CDN or a content delivery network is a global network of servers that can load images in milliseconds on your user’s device regardless of their location. How a CDN works can be found in a detailed guide on CDNs here.

There are a specific set of companies, like ImageKit, that provide specialized image CDNs. These image CDNs, not only ensure fast delivery of your images to the user but also optimize your images to the right format and size and resize them on the fly.

2. Using HTTPS for image loading

In simple terms, HTTPS is a secure way of transmitting data between the user’s device and your servers or the CDN delivering the images.

Security on the web is becoming a norm. Users prefer browsing websites marked as secure, and Google is going all out to push for HTTPS adoption on the web. It has always maintained that HTTPS is one of the multiple ranking factors it uses.

Therefore, it becomes critical to be delivering your images over HTTPS. Most good CDNs and image CDNs come with HTTPS enabled by default and for free.

3. Using HTTP/2 for image loading

HTTP/2 is a relatively recent update to the traditional method of loading content on the web, HTTP/1.1. In simple terms, with HTTP/2, multiple requests to the same domain name can be loaded in parallel by the browser.

Since there will always be many images loading on a page from the same domain name, it is always advantageous to use HTTP/2 to load them in parallel. You can see on this page how HTTP/2 outperforms HTTP/1.1 for loading multiple images on the web.

This parallelization improves the page load time, which in turn improves image SEO.

4. Using lazy loading for your images

Another technique that you should use for loading images on your website is called image lazy loading. This is also a part of popular page speed analysis tools like Google PageSpeed under the section “Defer off-screen images.”

You can read about image lazy loading in detail here.

The general idea of lazy loading is that web pages are pretty long. There would be images that are quite a few scrolls away when the user loads the page, and he can’t see them yet on his screen. Therefore, there is no point in loading those images at the very beginning of the page load. Instead, one should wait till when the user scrolls down and reaches that image to load it.

This reduces the amount of content that has to be loaded up front and, therefore, less competition for the user’s network resources, a faster load time for your page, and better SEO.

5. Using the correct cache time for your images

The user’s browser and the CDN you use for your images can temporarily store the images to ensure fast response times on subsequent requests. This helps improve the image load time and, therefore, image SEO.

Google too recommends serving static content with an efficient cache policy in its PageSpeed report.

While most CDNs would get this right out of the box, you can read more about caching your images correctly in this blog.

Continuous audit of images on your website for image SEO

Once you have implemented the above points, your page is primed for excellent image SEO and performance. However, you should constantly monitor this not to fall behind in your SEO optimization efforts.

1. Using page audit tools to identify image optimization-related issues

You can use tools like Google PageSpeed or WebPageTest to analyze your page and see if any image-related issues are getting reported. The common issues are images not being resized correctly, not in the right format, not being compressed, not being lazy loaded, or not loading fast enough. Run these tests periodically on your website's key pages to ensure that you are always on top of this issue.

If you use ImageKit, you can put this on autopilot. ImageKit optimizes the images to the correct size and format automatically. It also comes with a handy feature called the Performance Center, which checks your page daily for image optimization. It then reports unoptimized images along with ImageKit parameters to use with those images to optimize them.

2. Use tools to identify broken links of images

Broken image links present two problems. One, the image is not loading for your user which is bad for usability. Two, search crawlers too are not able to access that image, which negatively impacts your SEO. You should use tools like SEMRush’s Site Audit tool to identify such broken links and go on to either removing them or fixing them.

If you have many broken image links, or you a huge dynamic website to scan, you should read this guide on different methods of managing displaying images that do not exist.

3. Auditing images for missing alt text

The last thing you can check for your images is whether they have some alt text specified for them. Ahref provides a Site audit tool that can help you identify images not specifying the alt text, making it super easy to fix.

Monitoring the results of image SEO

We have covered all the best practices for improving image SEO on our website. It's time to monitor the results it has in terms of inbound traffic.

To monitor image SEO's contribution to your website traffic, go to the Google Search Console and, under "Performance" > "Search Results", change the "search type" to "Image".

Here you would be able to see the queries that are bringing in traffic via image SEO, which pages and images are they link to, etc. Your goal with all of the above activities should be to improve the image rankings and increase traffic through these image results to your website.

Conclusion

This has been a long post. It covers everything you need to improve your image SEO and get more organic traffic to your website.

Just remember, image SEO is not rocket science. When using images on your website, ask yourself these questions in your head.

1. Does this image enhance my user's experience?
2. Is it the best image I can use?
3. Can I load it faster on my page?
4. Will my readers and search engine crawlers understand it?

If you can answer these questions convincingly, you are on the right path to optimizing your images for SEO.