Image SEO – How to Optimise Images to Get More Traffic

According to MozCast, Google Images accounts for 21% of all web searches.

Yet most sites optimise their text and ignore every image on the page, leaving that entire traffic channel untouched.

So how do you get in on it? Image SEO.

In this guide, we cover everything you need to know about image SEO, from optimising images for search visibility to improving overall page performance.

What is image SEO and why does it matter?

Image SEO is the practice of making your images readable to search engines. Unlike humans, search engines cannot see images. They read the text signals attached to each one to determine what it shows and whether it is relevant to a search query.

It matters because:

• Optimised images appear in Google Images, Google Search, and Google Discover, all of which drive organic traffic to your site.
• Infographics with strong SEO signals can rank in Google Images and attract backlinks, strengthening the page’s authority and improving its rankings.

Most sites treat image SEO as an afterthought. Done properly, it is a traffic channel in its own right.

How to optimise images for SEO

• Make your images crawlable.
• Write descriptive alt text.
• Give your images descriptive file names.

#1. Make your images crawlable

Google can only rank images it can find and access. If your images are not crawlable, they will not appear in search, no matter how well they are optimised.

To make sure your images are discoverable:

• Do not block image URLs in robots.txt
  Make sure your /images/ folder or CDN domain is not disallowed. If blocked, Google cannot crawl or index those images.
• Use standard <img> tags
  Google relies on <img src="..."> to find images. Images set via CSS (background-image) are less reliable for indexing.
• Use direct, accessible image URLs
  Each image should have a clean URL that loads in the browser. Avoid setups where images only load after a form submit or behind authentication.
• Implement proper lazy loading
  Use native lazy loading (loading="lazy") and ensure the image src is present in the HTML. Avoid setups where images load only after JavaScript or user interaction.

Before anything else, make sure your images are technically accessible. Crawlability is the foundation, and without it, other image SEO efforts will not matter.

#2. Write descriptive alt text

Alt text is a short description added to an image using the alt attribute.

It was primarily created to help people with visual impairments understand the content of an image. At the same time, search engines like Google use alt text as the primary signal for image SEO to understand what an image is about.

When writing alt texts for SEO, follow these best practices:

• Succinctly describe what the image shows.
• Keep it short, usually 1-2 sentences.
• Include keywords only if natural.
• Use alt="" for decorative images.
• Skip phrases like “image of” or “picture of”.

Remember, alt text is read by people with visual impairments, so focus on writing a clear, natural description instead of stuffing keywords.

#3. Give your images descriptive file names

The file name you give an image matters for SEO, as Google treats it as a secondary relevance signal. When alt text is missing, the file name helps Google understand the image. When alt text is present, it works alongside it to add context and reinforce meaning.

Follow these best practices when naming image files for SEO:

• Use lowercase letters.
• Separate words with hyphens.
• Include clear, relevant keywords.

If you are trying to SEO optimise your existing images, be careful when renaming files.

Here is what you need to do.

First, set up a 301 redirect from the old image URL to the new one. Because these images may have built up links, they could be driving traffic and may also be shared on platforms like Pinterest. So, renaming them without a redirect can lead to lost traffic and broken links.

If you need help with this, you can refer to G Squared’s guide on how to 301 redirect images.

How to optimise images for faster page speed and better rankings

Core Web Vitals are page experience signals that Google uses as a ranking factor. Images often have the biggest impact on these metrics. Large, unoptimised images can negatively affect the overall performance of the page and potentially impact its ranking.

So, to support the page’s SEO performance, it is important to optimise your images for speed and delivery. The following techniques help you improve these metrics.

#1. Choose the right image format

Image format is the single largest lever for reducing file size. Smaller files load faster, which directly improves the page’s SEO performance.

Google Search supports BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF.

Among them, AVIF produces the smallest file sizes at equivalent quality. But a small percentage of older browsers do not support it, which means maintaining a WebP fallback alongside it. For most sites, that is extra work that is simply not worth the overhead.

So, for simplicity, three formats cover every use case.

Use WebP for photos, hero images, and general content. It is significantly smaller than JPEG, supported by virtually every modern browser, and works across all image types.

Use PNG for raster images that require transparency. A product photo or detailed graphic that needs to sit cleanly over any background colour is a common example.

Use SVG for vector-based graphics such as icons and logos. Unlike raster formats, it scales to any size without quality loss and keeps file sizes small.

#2. Compress your images

Uncompressed images are one of the most common causes of poor Largest Contentful Paint (LCP) scores. LCP measures how long it takes for the largest visible element on the page to load, and a poor score harms the page’s organic rankings.

You can compress images in two ways: manually before uploading, or automatically through your CMS or image CDN.

Manual compression means compressing the image yourself before it goes anywhere near your site. Tools like Squoosh and TinyPNG let you upload an image, adjust the quality settings, and download the compressed version. You then upload that compressed file to your site.

Automatic compression happens on upload. Most CMS platforms support compression plugins that process images on upload and save the smaller version to your server. Image CDNs like Cloudinary and Cloudflare do the same automatically. Once set up, you do not need to think about it.

Whichever method you use, there are two types of compression to choose from.

Lossy compression permanently removes some image data to achieve smaller file sizes. At typical quality settings, the visual difference is negligible, but the file size reduction is substantial.

Lossless compression reduces file size without removing any data. It reorganises how the file stores information instead, keeping the image pixel-perfect.

For most images, lossy compression is the right choice. Use lossless when pixel-perfect accuracy matters, such as screenshots or diagrams with fine text.

#3. Serve responsive images with srcset and picture

A responsive image serves the right resolution for each user’s screen.

Without it, every user downloads the same large image regardless of their device, wasting bandwidth and increasing LCP. For example, a mobile user with a small screen receives the same image as a desktop user with a large monitor, even though they only need a fraction of the size.

The srcset attribute solves this. It lists multiple versions of the same image at different widths, and the browser picks the version that best fits the current viewport:

<img
  srcset="cat-nap-320w.jpg 320w, cat-nap-480w.jpg 480w, cat-nap-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  src="cat-nap-800w.jpg"
  alt="A tabby cat napping on a windowsill in afternoon sunlight">

srcset handles resolution.

But if you also want to serve different formats to different browsers, the <picture> element handles that. It lets you offer AVIF to browsers that support it and fall back to WebP, JPEG, or any other format for everything else:

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="An 1800s oil painting of The Great Pyramid">
</picture>

Always include an <img src="..."> as the last child of a <picture> element. Some crawlers and older browsers do not recognise <source> tags. The <img> fallback ensures the image is always found and displayed.

#4. Use lazy loading

Lazy loading fixes this. It defers the loading of images that are outside the current viewport until the user scrolls towards them. The result is a faster initial page load and a better LCP score, since the browser focuses its resources on what is visible first.

Adding lazy loading to an image requires a single attribute:

<img src="image.jpg" alt="Description" loading="lazy">

Never apply lazy loading to the hero image or any image visible above the fold on page load. Lazy loading those images delays them unnecessarily and directly harms your LCP score.

Instead, add fetchpriority="high" to your hero image to tell the browser to load it as a priority. Reserve loading="lazy" for images that appear further down the page.

Image SEO checklist

Use this checklist when uploading new images or auditing existing ones.

Alt text

• Every meaningful image has descriptive alt text.
• Alt text describes the subject, context, and keyword where it fits naturally.
• Every alt text is short, usually 1-2 sentences.
• No alt text is keyword-stuffed or repetitive.
• Decorative images use an empty alt="" attribute.

File names

• File names are lowercase with hyphens between words.
• File names are descriptive and keyword-relevant.
• No generic file names like IMG_4823.jpg or photo1.png.
• 301 redirects are in place before renaming any live image URL.

Format and compression

• WebP is the default format for photos and general content.
• PNG is limited to images requiring transparency.
• SVG is used for icons, logos, and illustrations.
• Images above 200KB are compressed before upload.
• Lossy compression is applied to WebP and JPEG images.
• The srcset attribute is used to serve responsive image sizes.
• fetchpriority="high" is added to the hero image.
• loading="lazy" is applied to all images below the fold.

---

How to write alt text at scale

Writing alt text for every image on a large site is easy to defer and hard to catch up on. For sites with hundreds or thousands of images, the backlog can feel unmanageable.

The practical approach is to split the work into two tracks: new uploads and existing images.

For new uploads, make alt text part of the upload process. Every image that goes onto the site gets alt text written at the point of upload. This stops the backlog from growing.

For existing images, start with the pages that matter most. Priority pages, landing pages, and pages with high organic traffic should be audited first.

To find missing alt text across your site at scale, use WebYes Accessibility. It identifies every image missing alt text across your entire site, so you know exactly where the gaps are.

Once you have the gaps, there are tools out there that can generate alt text in bulk using AI, saving you from writing hundreds of descriptions manually.

If you are on WordPress, our AI alt text generator plugin does this directly inside the media library. Review and edit the output for accuracy and context before publishing.

Do not treat alt text purely as an SEO tactic

Alt text exists for people who cannot see your images. Screen reader users, typically those who are blind or visually impaired, rely on alt text to understand what an image shows. Without it, the image is invisible to them in every meaningful sense.

Yet when alt text is written with only search engines in mind, it shows. Keyword-heavy descriptions that do not accurately describe the image fail the very people the alt text was designed for. A screen reader user does not benefit from stuffed keywords

So write alt text as if you are describing the image to someone who cannot see it. Describe it as succinctly as possible, but also as detailed as the image requires. Say what the image actually shows, not what you want to rank for.

When you do that, the SEO benefit follows naturally. It is a byproduct of doing the right thing for your users, not the goal itself.

FAQs on Image SEO