Image SEO
Image SEO
Table of Contents
As the name might suggest, image SEO is the process of optimising the images on your website to improve relevancy, indexability and performance. By providing as much context to search engines as possible, and focussing on offering a good user experience, you increase your chances of improving your rankings for both web and image-based searches.
Image dimensions, file sizes, formats, HTML attributes, and structured data are all elements of image SEO. In this guide, we’ll explore why you should keep on top of your images, what to prioritise, useful tools, and more.
Why Is Image SEO Important?
Images help to enrich your content, and generally speaking you should be using them on almost every page and article on your website. Whether it’s a product image or a data chart, images help your reader to better understand context, and Google have consistently highlighted the importance of good imagery over the years.
When talking about the future of search,Google’s MUM update (Multitask Unified Model) utilises AI-powered algorithms to improve results for users. It’s multimodal, meaning it’s able to understand different formats and can identify an image’s contents with alarming precision. As such, MUM seeks to better answer a user’s query by returning helpful articles, videos, and images from across the web.
Ensuring your images are optimised is good for both search engines and for the overall user experience. Here’s some ways it can help:
- Improves accessibility
- Some of the steps involved with image optimisation also aid accessibility. For example, users of screen readers will be able to identify the contents of an image if it has descriptive and information-rich alt text.
- Drives Traffic
- Images have the potential to drive good amounts of traffic depending on the vertical you reside in, especially considering the increase of SERP (search engine results page) features like Featured Snippets that can display images at the top of the search results.As well as this, lots of users start their search on Google Images, and if best practises are followed you can be awarded with badges to help entice clicks.
- Improves User Experience
- Images are a great way to break up text, provide additional context and explain things that would otherwise be hard to describe with text. Google are getting much better at gauging user experience and intent, and in recent updates have stressed the importance of providing unique visuals when reviewing products and services.
What Are Image Attributes?
Images are most commonly inserted onto a page using the <img> HTML element, which embeds an image into the document. In its most raw form, an <img> tag looks like this:
<img src="https://www.screamingfrog.co.uk/images/austrailian-green-tree-frog.jpg" width="850" height="547" >
With the result being:
In the above example, the src, width and height elements of the HTML are referred to as attributes and are used to adjust the behaviour of a HTML element.
There are many attributes that can be applied to an <img> tag, but the main ones to consider from an image SEO perspective are alt and title.
Alt Text
As the name might suggest, the alt attribute (often referred to as an alt tag) provides alternative information about an image if the user (or search engine/bot) cannot view it. An <img> tag with an alt attribute looks like this:
<img src=”https://www.screamingfrog.co.uk/wp-content/uploads/2022/12/Australian-Green-Tree-Frog.jpg” alt=”An Australian green tree frog sat on the end of a leaf.” width="850" height="547">
Good use of the alt attribute is important for two key reasons:
- Accessibility
- Alt text vastly improves the user experience for people who use screen readers or can’t view images, such as those on low-bandwidth connections. This includes people who use speech input software (voice commands) and people who use text to speech or mobile users who are looking to preserve data.
- Search Engine Optimisation
- Google look at the alt text of an image (amongst other things) to understand the subject matter, making it important when it comes to ranking. As well as this, if you’re using an image as a link, the alt text essentially acts as the anchor text.
Alt Text Best Practices
Deciding on what alt text to use often depends on the purpose of the image. For example, decorative images that don’t add additional information to a page should have an empty alt attribute, so that they can be ignored by screen readers and other assistive technology.
Images that complement text on a page, or provide additional context, should have descriptive alt text. It should be useful to users and reflect the text surrounding it, containing keywords where appropriate (without impacting the readability of the alt text).
Google’s official guidelines around alt text have additional pointers, as well as warnings around excessive keyword use.
Below are several different alt text scenarios where it has been used correctly:
- An image of a dog running along a beach
- Alt text: “A golden retriever running along a sandy beach with a ball in its mouth.”
- A product image of a replacement car brake disc
- Alt text: “Pagid brake disk (rear), product Code: 104448338.”
- A decorative ‘splash’ illustration
- Alt text: “”
- As mentioned, purely decorative images should contain a blank alt attribute so they can be ignored by assistive technology.
- A ‘Contact Us’ button
- Alt text: “Contact Screaming Frog.”
- This type of image should describe the action rather than the contents of the image and is particularly important for people using voice input software and devices.
- A graph showing the profit and loss of a company over the last year
- Alt text: “A bar chart showing the profit and loss of XYZ, August 2021 – 2022.”
Including large amounts of text within an image is generally discouraged, as search engines and assistive technology won’t be able to read it. However, if this is required, then the alt attribute should contain the same words as in the image.
Title Text
Like alt text, title text is an attribute that can be applied to the <img> tag. It’s the text that’s shown when a user hovers their mouse over an image (tooltip) and is used to supplement the descriptive alt text. An example of an image with the title=”” attribute is:
<img src=”https://www.screamingfrog.co.uk/wp-content/uploads/2022/12/Australian-Green-Tree-Frog.jpg” title=”An Australian green tree frog sat on the end of a leaf.” width="850" height="547">
Whether or not the title attribute is considered for ranking is a bit of a grey area, but this tweet from Googler John Mu confirms that alt carries more weight when it comes to ranking:
As well as this, Dawn Anderson once tested whether or not Google ranks content based on the title attribute of an image. Dawn found that Google did in fact rank an image based on a unique title attribute, but only for image search (not web).
Generally speaking, you don’t need to worry about the title attribute and it’s not worth the time investment ensuring every image has both an alt and a title attribute. In fact, guidance from W3 discourages the use of the title attribute as it’s reliant on a pointing device, thus impacting accessibility.
Filename and URL Structure
While it’s easy to optimise the file names of your images, it’s often overlooked. Google state that filenames should be succinct but descriptive, to help them interpret the subject matter and context.
You can include keywords within the filename where it makes sense but be cautious of keyword stuffing or inhibiting Google’s ability to glean information from it.
Using the above image as an example:
- IMAGE0212.jpg would be a poor, undescriptive file name that provides no clues around the contents of the image.
- australian-green-tree-frog.jpg is more effective in describing the image contents. Be cautious of length, and remember that further details, such as the fact the frog is sat on a plant bud, can be addressed using the alt attribute.
“Create good URL structure for your images: Google uses the URL path as well as the file name to help it understand your images. Consider organizing your image content so that URLs are constructed logically.”
While this is likely of lower importance in the grand scheme of things, it’s good practise to adopt a clean URL structure for images across your website.
An example of a bad URL structure for images would be:
https://www.screamingfrog.co.uk/dd/images/Some_image.width-1600.433d65b.jpg
Whereas a good URL structure would be:
https://www.screamingfrog.co.uk/media/animals/australian-green-tree-frog.jpg
Our in-depth URL structure guide contains much more information on URL structure best practises.
Captions
If you’re adding captions to your image, the <figcaption> HTML element should be used. This requires wrapping your image HTML in the <figure> element, for example:
<figure>
<img src=”https://www.screamingfrog.co.uk/images/austrailian-green-tree-frog.jpg " alt=”An Australian green tree frog sat on the end of a leaf.”>
<figcaption>A cute Australian green tree frog sits on the end of a leaf, New Guinea.</figcaption>
</figure>
Google states that they extract information about the image from captions (amongst other things), and they also improve user experience, so they are worth utilising.
When writing captions, there’s an opportunity to add more editorial flair and opinion, and they don’t have to be as descriptive as the alt attribute.
Using the above image as an example:
- Alt text
- “A snail on top of an Australian tree frog’s head, which is on top of the shell of a terrapin that is partially submerged in water.”
- Caption
- “Gary, Fred and Tony embark on an exciting adventure through the Amazon rainforest.”
Tying this all together, the code would look like this:
<figure>
<img src="https://www.screamingfrog.co.uk/wp-content/uploads/2023/01/gary-fred-tony-rainforest-adventure.jpg" alt=”A snail on top of an Australian tree frog’s head, which is on top of the shell of a terrapin that is partially submerged in water.”>
<figcaption>Gary, Fred and Tony embark on an exciting adventure through the Amazon rainforest.</figcaption>
</figure>
The caption and alt should always be different, otherwise screen readers and other assistive technology would repeat the same thing twice. You should also avoid the use of <figcaption> for images with an empty alt attribute.
Page Metadata
Metadata, such as page titles and meta descriptions, are some of the most important on-page elements when it comes to SEO. They are highly visible in the traditional search results, as well as the Google Images search results.
In their own words:
“Google Images automatically generates a title link and snippet to best explain each result and how it relates to the user query. This helps users decide whether or not to click on a result.”
As such, it’s important to ensure that any imagery used is relevant to the overall topic of a page and its metadata.
In the above screenshot, the page title (<title> tag) is being pulled in underneath the image, so the user can expect to find information about white’s tree frog care, habitat, diet and more on this page.
Take a look at our guides on page titles and meta descriptions to learn how to craft effective and enticing metadata for your pages.
Speed
Page speed has long been an official Google ranking factor, and research by Google identified that 53% of site visits are abandoned if a mobile site takes longer than 3 seconds to load. So having a quick and responsive site is beneficial to both users and search engines alike.
Images are often the largest assets on a web page, and when not optimised, can significantly impact load times for your users.
Image Formats
One of the first things you should consider when utilising images is format. Choosing the right format isn’t always straightforward, as it should be considered on a case-by-case basis and depends on the image contents and how it’s going to be used.
The following can be used as a general guide:
- JPEG (and JPG)
- JPEG is one of the most popular choices for sharing photos and is universally supported. Their file size is respectable, but if your image contains text, it may look low quality or have poor readability.
- JPEG is a good choice for featured images, product images and headshots/portraits.
- PNG
- PNGs are much better at retaining detail and contrast between colours. If your image contains text, such as a screenshot of a webpage, PNG should be chosen over JPEG. PNGs also support transparency.
- PNGs are useful for logos, screenshots and banners, but shouldn’t be used for photos due to their large file size.
- GIF
- GIFs are globally recognised for their animation support. They have a low file size but can experience limited image quality.
- GIFs aren’t just useful for clips of cats doing silly things, they can also be used to highlight processes or explain tasks within tutorials.
- WebP
- WebP is one of the newest image formats, and as such not all browsers currently support it. At the time of writing, Google Chrome, Firefox, Edge and Opera support WebP. Using the WebP format can save substantial amounts when it comes to file size and bandwidth, without impacting image quality whatsoever.
- Consider using WebP in place of both JPEGs and PNGs but understand that it is not currently supported by some browsers.
- SVG
- SVGs are light, responsive and can be scaled up infinitely with no impact on image quality.
- This makes them a great choice for logos, icons and illustrations, especially if you want them to look good across a range of devices, without impacting quality.
Compression
Compressing images is an easy way to further reduce their file size, with often negligible impact on quality. There are an abundance of third party tools that make it easy to compress images, including completely hands-off approaches if you’re using a popular CMS like WordPress.
Below are some of the most popular tools for image compression:
Removing EXIF data is a further way to reduce file size; however, way back in 2014 Google stated that they reserve right to use EXIF data for ranking. In 2021, John Mu confirmed that this stance remains unchanged. As such, it’s best to leave EXIF data within an image. However, you don’t need to worry about adding it to images that do not have it.
CDN
It’s possible to take things a step further by implementing a CDN. This stands for ‘Content Delivery Network’, and it’s essentially a global network of servers that can serve resources to your users from a location that is closer to them. As well as this, a CDN can offer on-the-fly optimisation based on a wide range of requirements, such as the user’s device.
This can significantly improve performance, not only benefitting users but also making it easier for search engines to crawl your resources.
Properly Sized Images
When uploading images to your website, it’s important to consider the dimensions that it’s going to be served at on the page itself. For example, it’s common for featured images to have a horizontal orientation with a larger width, but images in the article itself may not need to be so large.
If an image is being displayed at 850 x 300 pixels, don’t use an image file that’s 2000 x 900 pixels. The entire image will still have to be downloaded, wasting bandwidth and significantly impacting loading times for the user.
Responsiveness
It’s important that your images look good across a wide range of devices. Thankfully, there are several ways to ensure that your images scale depending on the size of the user’s device.
The below resources contain all the information you need to ensure your images are responsive:
- Google’s own guide on responsive images
- Mozilla documentation on responsive images
- ImageKit.io’s responsive image reference guide
Structured Data
Structured data is an effective way of providing additional information to search engines, and increases the chances of receiving richer listings with badges and labels.
In the above screenshot, the page in question is using the Recipe schema markup, and features a small label letting users know that the page contains a recipe for the subject matter of the image.
As well as this, within the traditional search results Google are currently pulling in images to the ‘Recipes’ search feature, and next to the organic results themselves:
Google have very in-depth documentation around Structured Data and the features available. There are several labels currently supported by Google Image search, including products, recipes, videos, licensable assets and GIFs. Here are some examples of these labels:
It’s important to remember that structured data is seen as explicit clues by search engines, and it’s not a guarantee that you will receive additional features. To help ensure you’re marking things up correctly, you can use Google’s Schema Markup Testing Tool.
You can also test and validate structured data using the Screaming Frog SEO Spider, which helps to make the auditing process more efficient and at scale. Take a look at our tutorial on testing and validating structured data for more information.
OpenGraph & Twitter Cards
Outside of search engines, you can also make your pages look more enticing on social media through the use of OpenGraph and Twitter Cards. Similar to structured data, this is a way of marking up your content with meta tags so that platforms like LinkedIn, Facebook and Twitter can automatically pull in featured images, titles and descriptions.
Using tools like OpenGraph, it’s possible to preview how your pages will look when shared on social media:
As an example, here is the code for generating the above example for Twitter:
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="screamingfrog.co.uk">
<meta property="twitter:url" content="https://www.screamingfrog.co.uk/seo-spider/">
<meta name="twitter:title" content="Screaming Frog SEO Spider Website Crawler">
<meta name="twitter:description" content="The industry leading website crawler for Windows, macOS and Ubuntu, trusted by thousands of SEOs and agencies worldwide for technical SEO site audits.">
<meta name="twitter:image" content="https://www.screamingfrog.co.uk/wp-content/uploads/2020/11/screaming-frog-seo-spider-version-14-dark-mode.jpg">
OpenGraph and Twitter cards do not directly impact your SEO, but it does make your content much more enticing when seen by users on social media.
If you’re using a popular CMS like WordPress, there are lots of plugins available that make it easy to manage your meta data tags, such as Yoast and RankMath.
Original Imagery
Just like your text-based content, you should strive to ensure your imagery is unique, interesting and useful to users. While excessive stock photo use shouldn’t impact you negatively, it also wont help you stand out from the competition.
As part of Google’s product review update, they stressed the importance of using your own or original visuals and audio to support your experience with a certain product or service. This is particularly important for affiliates, where it’s common to use generic stock photography of the products that are being reviewed.
If you can enrich your content around a product, service or topic with your own unique imagery and experiences, this can give you a massive edge over the competition.
Image Sitemap
Sitemaps offer no real value in getting a page ranked in search engines, only discovered. For your images to be included in Google’s search results, they need to be discovered and indexed. While search engines are very good at discovering a website’s resources, you can offer more direction by adding images to your sitemap, or by creating a separate sitemap just for your images.
For most websites it’s not essential to create a dedicated image sitemap, but if your website is heavily focused on imagery, you may benefit from generating one.
The below code example from Google shows a traditional sitemap that has been enriched with image tags, to highlight imagery used on specific pages:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>http://example.com/sample1.html</loc>
<image:image>
<image:loc>http://example.com/image.jpg</image:loc>
</image:image>
<image:image>
<image:loc>http://example.com/photo.jpg</image:loc>
</image:image>
</url>
<url>
<loc>http://example.com/sample2.html</loc>
<image:image>
<image:loc>http://example.com/picture.jpg</image:loc>
</image:image>
</url>
</urlset>
This first page in the sitemap has two images, whereas the second page has one.
The below google specific namespace must be defined within the urlset tag:
xmlns:image=http://www.google.com/schemas/sitemap-image/1.1
Historically there were further tags that could be used, such as caption, geo_location, title and licence, but these have since been deprecated.
How the Screaming Frog SEO Spider Can Help With Image SEO
There are several ways to use the Screaming Frog SEO Spider when it comes to improving your image SEO.
- Finding large images.
- You’re able to crawl a site and filter for large images over 100kb in size. Page speed is extremely important for users and SEO and often large resources such as images are one of the most common issues that slow down web pages.
- Finding speed improvement opportunities.
- By setting up PageSpeed Insights integration within the SEO Spider, you’re able to identify further opportunities around images, such as ‘Properly Size Images’, ‘Defer Offscreen Images’, ‘Efficiently Encode Images’ and ‘Serve Images in Next-Gen Formats Image Elements Do Not Have Explicit Width & Height’ and more.
- Finding images with missing alt attributes and alt text.
- As mentioned previously, the alt attribute is important for both accessibility and SEO. The SEO Spider allows you to find all images on a site that are have an empty alt attribute or are missing it entirely. You can also filter for instances were the text is over 100 characters, which is useful for ensuring your alt attributes are concise and descriptive. Take a look at our guide on finding missing alt text and attributes.
- Finding background images.
- You’re able to discover CSS background and dynamically loaded images across a website, which should be used for non-critical and decorative purposes. Background images are not typically indexed by Google and browsers do not provide alt attributes or text on background images to assistive technology.
- Generating sitemaps.
- As well as creating XML Sitemaps, you’re also able to crawl a site and create Image XML Sitemaps, with advanced configuration over URLs to include, last modified, priority and change frequency. Take a look at our guide on generating XML sitemaps.
- Validate and test structured data.
- The SEO Spider allows you to easily test and validate structured data at scale. Take a look at our tutorial on testing and validating structured data for more information.
Final Thoughts
Image SEO is an often overlooked activity, however it’s also where a lot of low hanging fruit can be found. Be sure to keep on top of your images for both accessibility and SEO benefit.
