Images are a powerful but often neglected component of search engine optimization (SEO). While many website publishers focus solely on text-based content, images present additional opportunities to improve your search visibility, drive organic traffic, and even earn backlinks.
This comprehensive guide explores the core SEO techniques for image optimization that can boost your search rankings even further.
Where do images appear in Google search?
Although Google search results are often text-heavy, Google uses images in all sorts of places in search results. By optimizing your images for SEO, your content will be considered for these placements, offering additional links to your website. Let's take a look!
Image pack headers
For searches where the user is likely to be seeking an image, the most prominent element is a grid of images right at the top of the page.
Knowledge pack headers
For certain searches, particularly for proper nouns like names or places, a Knowledge Pack is displayed, which usually contains a few top images, as seen here on the left.
Image packs in main columns
For searches where visual content is likely expected, Google might add a Image Pack in the main list of search results.
Image pack sidebars
For searches where images are less central to the user's intent, Google may instead display them in the sidebar.
Alongside featured snippets or AI overviews
When the search request triggers an AI overview or a featured snippet, this usually contains a couple of relevant images.
SERP thumbnails
For other visually-oriented searches, Google will display thumbnails next to all the regular blue-link results.
Structured data
Google offers a variety of other SERP features based around structured data from publishers, many of which include images. For instance, collections of news stories, recipes, shoppable products, hotels are all accompanied by image thumbnails.
Google Image Search
Of course, where the user selects Google Image Search, all the search results will be images!
All told, well-optimized images give you a lot of additional opportunities for inclusion against keywords that Google determines to have a visual intent.
It's always worth manually checking your target keywords to see if the search results include photos, diagrams, graphics or other visuals. Your SEO research tool, like Ahrefs, will also let you filter for keywords with image-heavy components:
How to optimize your images for SEO
1. Put the keywords in the filename
It's better to give your image a descriptive filename, like water-cycle-diagram.png, than something random like BI89adf8A.jpg. Check that your CMS isn't automatically changing it to a random string when it processes the image.
2. Use descriptive keywords in the alt text
Adding a descriptive piece of alt text to every image is crucial, not just for SEO, but also accessibility. Note that you do not need to include words like "A picture of..." or "An image of..." in the description! Avoid 'keyword stuffing' – a succinct but descriptive sentence will do.
<img
src="cheesy-pasta-dish.png"
alt="A steaming plate of pasta and cheese, served on a red tablecloth."
/>
For SVG illustrations, rather than use an alt= attribute, you put a descriptive title tag immediately after the parent SVG tag:
<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
<title>A fluffy grey cloud floating on a sky blue background</title>
<rect width="400"...
3. Offer a high-resolution version of the image
For performance purposes, try to offer images at a range of sizes, depending on the user's device.
Ideally, however, one version should be high resolution, suitable for a large desktop monitor with Retina density. Google can then use this image where it prefers, as image-focused searchers often prefer sharp, high-definition imagery.
Our complete guide to responsive images tells you everything you need to know – and more!
In the example below, we're offering the user (and Google) a large image at 2x resolution for users with large HD screens, while users with a smaller, non-retina screen (say on a basic mobile device) will be served a much smaller image, rather than something needlessly large.
<picture>
<source
media="(min-width: 1200px)"
srcset="
navy-wool-sports-coat-large.webp 800w,
navy-wool-sports-coat-large@2x.webp 1600w
"
sizes="(min-width: 1200px) 50vw"
/>
<source
media="(min-width: 768px)"
srcset="
navy-wool-sports-coat-medium.webp 600w,
navy-wool-sports-coat-medium@2x.webp 1200w
"
sizes="(min-width: 768px) 60vw"
/>
<source
media="(max-width: 767px)"
srcset="
navy-wool-sports-coat-small.webp 400w,
navy-wool-sports-coat-small@2x.webp 800w
"
sizes="100vw"
/>
<!-- Fallback for browsers that don't support WebP -->
<img
src="navy-wool-sports-coat-medium.jpg"
alt="Navy blue wool sports coat displayed on mannequin, showing classic lapel design and tailored fit with two-button closure"
width="600"
height="800"
loading="lazy"
decoding="async"
style="width: 100%; height: auto; max-width: 600px; object-fit: cover;"
/>
</picture>
4. Think about the surrounding page content
Google also learns about your page, and the images on it, from the surrounding text.
Therefore, it's worth adding rich headings, captions, and descriptions. If you know your users are specifically searching for images in their request, then it's wise to optimize your page for this. For example, here we mention all our relevant keywords in the page title, heading and caption.
<title>
Controlling motors with circuits [with circuit diagrams to download]
</title>
...
<h2>Motor controller circuits explained</h2>
What components can we add to our circuit to control the motor's behaviour? This
diagram shows a basic example:
<figure>
<img
src="simple-DC-motor-controller.jpg"
alt="Circuit diagram of a simple DC motor controller."
style="width:100%"
/>`
<figcaption>Figure 1. A diagram of a simple DC motor controller.</figcaption>
</figure>
5. Use actual images in HTML – not CSS techniques
Google doesn't save images referenced in CSS or offer them in search results – only those embedded
in the HTML page using typical tags such as img, picture and figure.
So, avoid elements like galleries that deliver images as CSS backgrounds. These images will also tend to load slower due to the critical rendering path.
6. Ensure the images don't slow down your page
While users love high quality images, delivering them can't come at the expense of page load speed. Optimizing your images for performance will indirectly support your SEO goals, because Google gives preferential treatment to fast-loading pages.
- Deliver images in modern formats like WEBP and AVIF with smaller filesizes
- Compress your images to reduce file size without compromising too much on quality, perhaps using an online image compression tool
- Use responsive image sizing to avoid serving pointlessly large files - Define the height and width of images before they load, to avoid your page layout shifting as they render
- Use lazy loading for images outside the viewport
- Prioritize the loading of any image that appears 'above the fold', especially an LCP image, perhaps by manually setting a fetchpriority
- Avoid delivering large images with inline Base64 data URIs You can learn more about optimizing images for performance in our upcoming article.
Try our free website speed test to see if images are hurting your page speed!
7. Feature your image prominently using the correct code If your page has a hero
image, make sure it appears prominently on the web. One standard approach is to define the key graphic using the Open Graph tag, which ensures it appears as the thumbnail when shared on social media, in chat apps, and so on.
<meta property="og:image" content="https://example.com/ice-cream" />
The result is something like this:
To appear in Google's structured data enrichments - such as lists of recipes,
products or news articles – you'll need to follow the relevant
schema
and ensure your imagery complies with the guidelines.
Google suggests offering three possible images in square, landscape and widescreen formats. Here's how that might look for a news article:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "NewsArticle",
"headline": "A New Flavour Of Candy Has Been Invented",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"datePublished": "2024-01-05T08:00:00+08:00",
"dateModified": "2024-02-05T09:20:00+08:00",
"author": [
{
"@type": "Person",
"name": "Jane Doe",
"url": "https://example.com/profile/janedoe123"
}
]
}
</script>
If you provide a single Open Graph image, go with a size of 1200 x 630 pixels.
8. Create an image sitemap
Alongside your existing sitemap, you can also generate an image sitemap that helps Google discover the images on your website. You can generate these for free using various tools across the web, then upload the result to Google Search Console.
Using images strategically to enhance SEO
Truly optimizing your SEO strategy to incorporate images means thinking bigger than simply tweaking the images you already have. Instead, SEO can inform the images you create, commission and shoot in the first place. Here are a few search-friendly tactics to consider.
Conduct image-related keyword research
When crafting your SEO content strategy, look for datapoints that might inform your visual content requirement. For instance: When considering particular keywords, look for broad matches with words like picture, diagram, photo, etc – these elements could make excellent additions to a page or article.
You can examine your current search traffic using Google Search Console, then use the filter to reveal any impressions or clicks you're getting from Google Image Search.
In your SEO tool, filter keywords by results that have image-heavy enrichments like Knowledge Packs, Image Packs, or AI Overviews.
Use a similar approach when exploring your competitors' backlinks, keywords and top pages. You'll also want to manually check your most important keywords in Google itself, to see if images form part of the search result.
Create original images
Reusing stock photography from elsewhere might make your site look good, but these images appear on thousands of other websites, so your usage is unlikely to appear in a prominent position in search.
For key terms, consider designing a graphic, commissioning original photography, or even generating creative imagery using AI.
Design summary images and infographics
Consider creating custom images that
summarize the key information in your article. For example, perhaps you've
created a list-style article where each item is already illustrated with its own
image. To enhance your SEO, you could create a larger infographic-style image
that brings all these illustrations together into a single visual summary. For
certain searches, these graphics may rank higher. Here's an example where that's
the case: 
Overly 'long' infographics can also perform well on image bookmarking sites like
Pinterest and Tumblr, offering another potential source of backlinks.
Reuse any overlooked image assets you own
It's also worth taking stock of any images in your archive that might be of interest to the public.
For instance, if you're a wedding photographer, you might have captured a lot of photos of different wedding venues. You could add these photos to venue reviews on Google Maps, create a page on your site called 'Wedding venues in Upstate New York - image gallery', and so on.
There are also free stock photography websites where you can upload your own images with a suggested credit - your credit could include a link to your site. (Although currently, Unsplash and Pexels don't suggest external URLs as a credit.)
Use images as backlink generators
Assuming you own an image (for instance it's a diagram you created yourself) you might invite website visitors to make their own use of the image, in return for a backlink to your website. This creates a virtuous circle:
- Content creators search for a relevant image to include in their content
- They discover your image ranking for that keyword
- They use your image in their content, including a backlink
- This boosts the prominence of your image yet further, making it more likely others will use it too
In the example below, you can see a Mighty Networks blog post on self-learning makes use of Sketchplanations diagram about a related topic:
Just ensure you own the rights to the image, and that credit isn't more properly due to another creator.
Check how images impact your Core Web Vitals
Images can help you show up more prominently in Google and deliver a great user experience. But they can also slow down your website and drag down the Core Web Vitals scores that impact SEO.
DebugBear can help you identify page speed issues on your website and shows you how to fix them. Sign up for a free trial.
Monitor Page Speed & Core Web Vitals
DebugBear monitoring includes:
- In-depth Page Speed Reports
- Automated Recommendations
- Real User Analytics Data