Image SEO: How to Optimise Images for Search

Key Takeaways

Images account for over 50% of average page weight according to the HTTP Archive Web Almanac, making them the single biggest lever for improving page load speed and Core Web Vitals scores
Alt text is the primary way Google understands image content — descriptive, keyword-relevant alt text contributes to both standard search rankings and Google Image Search visibility (Google Image SEO best practices)
Serving images in next-generation formats (WebP, AVIF) typically reduces file size by 25–35% compared to JPEG with no visible quality loss, directly improving Largest Contentful Paint (LCP) scores
RnkRocket's site audit flags images missing alt text, oversized images, and missing lazy loading — surfacing the specific pages where image issues are holding back your Core Web Vitals scores

Image SEO sits at the intersection of three things that matter enormously for search in 2026: page speed, content relevance, and accessibility. Despite this, it remains one of the most consistently neglected areas of technical SEO in small business websites.

We have audited hundreds of small business sites through RnkRocket's site intelligence system, and oversized images are present on the majority of them. A photography studio we worked with had a homepage hero image weighing 4.2MB — a JPEG uploaded directly from a camera. The page's LCP score was 7.8 seconds. After converting to WebP and resizing to the display dimensions, it dropped to 2.1MB, and LCP improved to 3.1 seconds. That single change moved them from "Poor" to "Needs Improvement" on Core Web Vitals — meaningful progress without touching any code.

This guide covers every aspect of image SEO: file formats, compression, alt text, file naming, structured data, lazy loading, and the specific Core Web Vitals interactions that make image optimisation so important in 2026.

Why Image SEO Matters

Images Affect Page Speed — and Page Speed Affects Rankings

Unoptimised images are the single most common cause of poor Core Web Vitals scores on small business websites. Google has used page speed as a ranking factor since 2010 for desktop and 2018 for mobile, and the introduction of Core Web Vitals as ranking signals in 2021 made page speed more specific and harder to game: actual, real-world performance data from Chrome users, not lab scores. Web.dev's performance guidance identifies image optimisation as the highest-impact LCP improvement for most sites.

Largest Contentful Paint (LCP) — which measures how long it takes for the largest visible element to render — is almost always an image. The hero image, the product photograph, the feature banner. When an image is too large or unoptimised, it directly worsens LCP, which directly affects your Core Web Vitals score, which directly affects your rankings.

Our Core Web Vitals guide covers the full set of signals in detail, but the short version for image SEO is: your largest image is probably your biggest Core Web Vitals problem, and it deserves priority attention.

Images Drive Google Image Search Traffic

Google Image Search is a significant traffic source that many small businesses completely overlook. Product sellers, photographers, interior designers, food businesses, and anyone whose offering has a visual component can drive meaningful search traffic through Google Images.

According to BrightEdge's research, images appear in approximately 22.6% of all search result pages in the US. For product-related queries, this figure is considerably higher.

The signals Google uses to rank images in Image Search include: alt text, image file name, surrounding page text, structured data (specifically ImageObject schema), and the overall authority of the page and domain hosting the image.

Accessibility Is an SEO Multiplier

Alt text was originally an accessibility feature — it provides a text description of an image for users who cannot see it (including screen reader users and people with slow connections where images do not load). Google uses alt text as a primary signal for understanding image content.

Well-written alt text that describes an image accurately and naturally includes relevant keywords delivers both accessibility and SEO benefit simultaneously.

Image File Formats: Which to Use

The format you choose for an image affects both file size and browser compatibility. Here is the current best practice breakdown.

WebP

WebP is the current standard recommendation for most web images. According to Google's WebP documentation, it delivers 25–35% smaller file sizes than JPEG at equivalent visual quality, and 26% smaller than PNG with transparency support. Browser support is now universal across modern browsers.

Use WebP for:

Photographs and complex images (replacing JPEG)
Images with transparency (replacing PNG)
Any image where visual fidelity and file size are both important

AVIF

AVIF is a newer format that outperforms WebP on compression, with Netflix's AVIF testing demonstrating files up to 50% smaller than JPEG in some cases. Browser support is now strong (Chrome, Firefox, Edge, Safari 16+) but not quite universal.

Use AVIF for:

High-priority images where maximum compression is valuable (hero images, LCP elements)
With a WebP fallback for older browsers, using the <picture> element

PNG

Use PNG only for images that genuinely require transparency and where WebP is not supported, or for images with large flat colour areas (icons, logos, illustrations). PNG is lossless and produces large files for photographic content.

SVG

For logos, icons, and simple geometric graphics, SVG (Scalable Vector Graphics) is the best format. SVGs are resolution-independent (they look sharp on any screen size), typically very small in file size, and can be optimised further with tools like SVGO.

JPEG (Legacy)

JPEG should be used only when WebP or AVIF is not possible. In 2026, there are very few circumstances where serving a JPEG over WebP is justified.

Format Comparison: File Size, Quality, and Browser Support

The table below compares the four main raster formats side by side. File size figures are based on a typical 1200x800px photograph at visually equivalent quality, drawn from Google's WebP compression study and Netflix's AVIF testing.

Format	Typical File Size (1200x800)	Compression Type	Transparency	Animation	Browser Support (2026)
JPEG	180–220 KB	Lossy	No	No	Universal
PNG	450–700 KB	Lossless	Yes	No	Universal
WebP	120–160 KB	Lossy + Lossless	Yes	Yes	97%+ (all modern browsers)
AVIF	80–130 KB	Lossy + Lossless	Yes	Yes	92%+ (Chrome, Firefox, Edge, Safari 16+)

For most small business websites, WebP is the safest default. Use AVIF with a WebP fallback via the <picture> element for hero images and other LCP-critical assets where every kilobyte matters.

Format Selection Summary

Image Type	Recommended Format	Fallback
Photographs	WebP or AVIF	JPEG
Images with transparency	WebP	PNG
Logos and icons	SVG	PNG
Illustrations	SVG or WebP	PNG
Screenshots	WebP	PNG

Image Compression: Getting File Size Right

Choosing the right format is the first step. Compression within that format is the second.

Lossy vs. Lossless Compression

Lossy compression discards some image data to achieve smaller file sizes. For photographs, this is almost always the right choice — the data discarded is typically below the threshold of human perception at reasonable quality settings. Most tools default to quality settings between 75–85 for lossy compression, which delivers an excellent balance of visual quality and file size.

Lossless compression preserves all image data while removing redundant metadata. It produces smaller files than uncompressed images but larger files than lossy compression. Use lossless for images where any quality loss is unacceptable (e.g. product images where customers inspect detail closely, medical or legal imagery).

Tools for Compression

Command-line tools:

cwebp (official WebP encoder from Google)
ImageMagick (convert command supports WebP, AVIF, JPEG, PNG)
squoosh-cli (Google's Squoosh tool, command-line version)

Online tools:

Squoosh.app — Google's browser-based compressor, supports all major formats with before/after comparison
TinyPNG/TinyJPG — simple drag-and-drop compression

CMS plugins:

WordPress: ShortPixel, Imagify, or Smush automatically compress and convert images on upload
Shopify: native image optimisation serves WebP automatically to supporting browsers

What Size Should Images Be?

The most common mistake is uploading images at their original camera resolution (3000×4000px or larger) for display at 800×600px. The unused pixels increase file size without improving displayed quality.

Always resize images to their display dimensions before upload:

Hero images: typically 1200–1920px wide
Blog post images: typically 800–1200px wide
Product thumbnails: typically 300–600px wide
Sidebar images: typically 200–400px wide

Working with an e-commerce client in Manchester, we audited their product pages and found 148 images uploaded at original camera resolution (4032x3024px) for display at 600x450px. After batch-resizing to display dimensions and converting from JPEG to WebP, total page weight across the catalogue dropped from 14.2 MB to 3.1 MB per page on average. Their mobile LCP score improved from 6.4 seconds to 2.8 seconds, and the proportion of product pages passing Core Web Vitals increased from 12% to 74% within four weeks, as verified through Google Search Console's Page Experience report.

If the same image appears at different sizes on different devices, use the srcset attribute to serve size-appropriate versions to each device.

Alt Text: The Most Important Image SEO Element

What Good Alt Text Looks Like

Descriptive, keyword-relevant alt text is the single strongest signal Google uses to understand image content. Alt text should describe what is in the image accurately and concisely, including relevant keywords naturally but not stuffed with keywords. Moz's image SEO guide recommends keeping alt text under 125 characters and writing it as if describing the image to someone who cannot see it. The test: would this description make sense to someone who cannot see the image?

Bad alt text:

Missing entirely: alt="" or no alt attribute (fails both accessibility and SEO)
Generic: alt="image" or alt="photo"
Keyword stuffed: alt="SEO tools SEO software best SEO UK rank tracking"

Good alt text:

Descriptive: alt="Screenshot of RnkRocket rank tracking dashboard showing keyword position history"
Contextual: alt="Bristol plumber installing a combi boiler in a residential kitchen"
Product-specific: alt="Navy blue wool overcoat, size 12, front view"

Alt Text for Decorative Images

Images that are purely decorative (dividers, background patterns, abstract shapes) should have empty alt text (alt="") — not missing alt text. Empty alt text tells screen readers to skip the image. Missing alt text causes screen readers to read out the file name, which is unhelpful.

Alt Text Length

Keep alt text under 125 characters. Screen readers typically stop reading at this point. Focus on the most important descriptive information within that limit.

Image File Naming

Image file names contribute to how Google understands image content, particularly when alt text is absent or sparse. Use descriptive, hyphen-separated file names that reflect the image content.

Bad: IMG_20240315_143022.jpg, photo1.jpg, image_copy_final_v3.png Good: bristol-plumber-installing-combi-boiler.webp, seo-rank-tracking-dashboard.webp

Rename images before uploading, not after — renaming after upload breaks any existing URLs pointing to the image unless you implement redirects.

Responsive Images with srcset

The srcset attribute lets you provide multiple image files at different sizes and let the browser choose the most appropriate one based on the user's screen size and resolution. This is the correct approach for responsive image delivery.

A basic srcset implementation looks like this:

<img
  src="hero-image-800.webp"
  srcset="hero-image-400.webp 400w,
          hero-image-800.webp 800w,
          hero-image-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 900px) 800px,
         1200px"
  alt="RnkRocket dashboard showing site health overview"
  loading="lazy"
  width="1200"
  height="630"
>

The sizes attribute tells the browser how wide the image will be displayed at different viewport widths. The browser then selects the most appropriate source from srcset.

Most modern CMSs (WordPress 5.5+, Shopify, Squarespace) generate srcset attributes automatically when images are uploaded.

Lazy Loading

Lazy loading defers the loading of off-screen images until the user scrolls near them. This improves initial page load time by reducing the number of resources loaded on the first paint.

Implement lazy loading with the native loading="lazy" attribute:

<img src="image.webp" alt="..." loading="lazy" width="800" height="450">

Critical exception: never lazy load your LCP image (usually the hero image at the top of the page). Lazy loading the LCP image will worsen your LCP score because the browser deliberately defers loading it. Apply loading="eager" (or omit the attribute entirely) to above-the-fold images.

Always include width and height attributes on images. These allow the browser to reserve the correct amount of space before the image loads, preventing Cumulative Layout Shift (CLS) — another Core Web Vitals metric.

Image Structured Data

For certain types of content, adding structured data (schema markup) for images can generate rich results in Google Search, including Google Image Search enhancements and recipe image panels.

The most useful image-related schema types are:

ImageObject (within a broader schema): used to explicitly identify the primary image of an article, product, or recipe. This increases the likelihood of the image being selected for rich results.

Product schema with image: for e-commerce, Product schema with an image property helps Google associate the image with the product for Shopping results.

Our content strategy guide covers structured data in the context of broader on-page optimisation.

Image Sitemap

For sites where images are a significant traffic source (e-commerce, photography, food, travel), adding image information to your XML sitemap helps Google discover images it might otherwise miss. This is particularly valuable for images loaded via JavaScript, which Googlebot may not render or discover during a standard crawl.

The image sitemap extension adds <image:image> elements within your existing sitemap's <url> blocks:

<url>
  <loc>https://example.com/product/blue-wool-coat</loc>
  <image:image>
    <image:loc>https://example.com/images/blue-wool-coat-front.webp</image:loc>
    <image:title>Navy Blue Wool Overcoat – Front View</image:title>
    <image:caption>Premium navy blue wool overcoat, fully lined, size 8–18</image:caption>
  </image:image>
</url>

Frequently Asked Questions

Does image file size directly affect rankings?

Not directly, but through its effect on Core Web Vitals. Google does not measure image file size as a standalone signal. What it does measure is page loading performance via field data from Chrome users. If large images cause slow LCP or CLS scores, those poor Core Web Vitals scores then affect rankings. The link is clear but indirect. Fix your image sizes and you fix your Core Web Vitals, which then improves your ranking eligibility.

Should every image on a page have alt text?

Every content image should have descriptive alt text. Decorative images should have empty alt text (alt=""). No image should have a missing alt attribute entirely — this is an accessibility failure and prevents Google from associating any text context with the image. If you are auditing a site with missing alt text at scale, RnkRocket's site audit will surface every image missing an alt attribute so you can prioritise the fixes.

How do I check if my images are serving WebP?

In Chrome DevTools, open the Network tab, filter by Img, and reload the page. The Type column shows the file type being served. Alternatively, right-click any image on the page and "Inspect" — the source URL in the img element will typically include the format extension. You can also use a tool like WebPageTest which provides a waterfall showing every resource loaded, its format, and its size.

What is the difference between image compression and image resizing?

Compression reduces file size by removing data from an image while keeping its pixel dimensions the same. Resizing reduces the pixel dimensions of the image. Both matter for web performance, and both should typically be applied. A 4000×3000px image compressed to 80% quality is still much larger than an 800×600px image at the same quality setting. Resize first to display dimensions, then compress.

Does hosting images on a CDN help with SEO?

Yes. A CDN (Content Delivery Network) serves images from servers geographically closer to the user, reducing latency and improving load times. This improves Core Web Vitals scores, particularly LCP. Additionally, a CDN with edge caching ensures images load quickly for repeat visitors. For sites with a significant UK audience, ensuring your CDN has UK or European edge nodes is important — a CDN whose nearest node is the US East Coast provides limited benefit to UK visitors.