Most website owners think about image SEO as an afterthought — adding alt text at the last minute and calling it done. The reality is that image optimization affects search rankings in at least four distinct ways simultaneously — page loading speed, Core Web Vitals scores, image search visibility, and structured data signals. Get all four right and images become one of your most powerful SEO assets. Get them wrong and every image on your site actively works against your rankings.
This guide covers every dimension of image SEO in 2026 — from technical performance factors that affect Core Web Vitals directly to on-page signals that help Google understand what your images show and which queries they are relevant to.
Why Image SEO Matters More Than Most People Realise
Images are the largest performance bottleneck on most websites — and page performance is a direct Google ranking factor. According to research tracking the relationship between loading speed and search performance, pages that load in under two seconds rank measurably better than equivalent pages that load in four to five seconds. Images account for more than 50 percent of average page weight. This means image optimisation is not a separate discipline from SEO — it is core to it.
Beyond performance, images create independent ranking opportunities. Google Image Search drives significant traffic — for product-based businesses, recipe sites, travel content, and visual niches, image search can represent 20 to 40 percent of total organic traffic. Optimised images with accurate file names, descriptive alt text, and fast loading times rank better in image search than poorly optimised equivalents with identical surrounding content.
The compounding effect is significant. A single well-optimised image contributes to page speed, Core Web Vitals, image search rankings, and content relevance signals simultaneously. A poorly optimised image hurts all four. On a website with hundreds of images, the cumulative effect of consistent image optimisation versus neglect is a dramatic difference in overall search performance.
Part 1 — Image Format and File Size
Why Format Is an SEO Decision, Not Just a Technical One
Google PageSpeed Insights explicitly flags images in outdated formats — specifically JPG and PNG — under its “Serve images in next-gen formats” recommendation. This recommendation appears on PageSpeed Insights reports and contributes to the overall performance score that Google uses as part of its ranking assessment.
Switching from JPG to WebP reduces image file sizes by 25 to 34 percent at equivalent visual quality. Switching from PNG photographs to WebP reduces sizes by 50 to 80 percent. These reductions directly improve page loading speed — which directly improves PageSpeed scores — which directly affects rankings.
In 2026, WebP is the correct format for all images displayed on web pages. Chrome, Firefox, Safari, Edge, and Opera all support WebP natively — covering over 96 percent of global browser usage. The remaining 4 percent on older browsers are handled automatically through the HTML picture element fallback.
For logos and icons specifically, SVG is better than WebP — SVG files are often 10 to 50 times smaller than equivalent PNG files at retina resolution, and SVG scales to any screen size without quality loss or the need to serve multiple size variants.
Target File Sizes for SEO-Optimised Images
Getting images under these targets eliminates the most common PageSpeed Insights image warnings:
| Image Type | Target File Size | Format |
| Hero / full-width banner | Under 200 KB | WebP |
| Blog featured image | Under 150 KB | WebP |
| Product image | Under 150 KB | WebP |
| Inline blog image | Under 100 KB | WebP |
| Thumbnail | Under 30 KB | WebP |
| Logo (web) | Under 20 KB | SVG or WebP |
These targets are achievable with WebP at 80 to 85 percent quality without any visible quality difference on screen at normal viewing sizes and distances.
How to Convert Images to WebP
Converting existing JPG and PNG images to WebP is the highest single-impact image SEO improvement for most websites. The file size reduction is consistent, measurable, and immediately verifiable in PageSpeed Insights.
Free online conversion tools handle both JPG to WebP and PNG to WebP conversion with batch support — processing multiple images simultaneously. After conversion, the files are consistently smaller at equivalent quality with no visual difference that website visitors would detect.
Part 2 — Image Dimensions and Responsive Delivery
Why Serving Correct Dimensions Is an SEO Factor
Google PageSpeed Insights has a separate recommendation — “Properly size images” — that flags images served at larger pixel dimensions than the display context requires. This is one of the most commonly triggered PageSpeed warnings and one of the most impactful to fix.
A 4000 × 3000 pixel photograph displayed at 800 × 600 pixels downloads 25 times more pixel data than the browser can show. Google PageSpeed measures this waste and penalises the performance score accordingly. The fix is always to serve images at the correct display dimensions — not to rely on CSS or HTML to scale oversized images down.
The Correct Dimensions for Common Web Images
| Image Context | Correct Dimensions |
| Full-width hero image | 1920 × 1080px |
| Blog featured image | 1200 × 628px |
| Product image | 800 × 800px |
| Inline blog image | 800 – 1200px wide |
| Thumbnail | 400 × 300px |
| Open Graph / social preview | 1200 × 630px |
For retina displays — which now represent the majority of consumer devices including all iPhones, MacBooks, and most modern Android phones and Windows laptops — upload at 2× these dimensions. A product image displaying at 400 × 400px CSS should be uploaded at 800 × 800px. Combine with WebP compression to keep file sizes manageable at doubled dimensions.
Responsive Images With srcset
The srcset attribute allows browsers to choose the most appropriate image size for each device and viewport — serving a 480px version to mobile visitors and a 1920px version to desktop visitors from the same HTML element.
html
<img
srcset=”image-480.webp 480w, image-1200.webp 1200w, image-1920.webp 1920w”
sizes=”100vw”
src=”image-1920.webp”
alt=”Descriptive alt text here”
width=”1920″
height=”1080″>
WordPress generates srcset automatically for all uploaded images. Custom websites need to implement srcset manually or through an image delivery service. Google specifically recommends srcset implementation as part of Core Web Vitals optimisation guidance.
Part 3 — File Names and Image SEO Signals
Why File Names Are an Underused SEO Opportunity
Every image file name is an opportunity to provide Google with contextual information about what the image shows. Google’s image crawlers read file names as one of several signals for understanding image content and relevance.
A file named IMG_4829.jpg tells Google nothing. A file named blue-running-shoes-side-view.webp tells Google the image shows blue running shoes from a side angle — relevant for queries about blue running shoes, side-view shoe photography, and related searches.
The impact of file names on rankings is modest compared to alt text — but it costs nothing to get right, and consistent good practice across hundreds of images accumulates into a meaningful signal over time.
File Naming Best Practices
Use descriptive, specific words: Name the image by what it actually shows. protein-powder-chocolate-500g.webp beats product-01.webp. paris-eiffel-tower-sunset.webp beats travel-photo.webp.
Use hyphens, not underscores: Google treats hyphens as word separators — blue-shoes is read as two words: blue and shoes. Underscores (blue_shoes) may be treated as a single word. Always use hyphens.
Use lowercase: URL encoding of uppercase characters creates unnecessary complexity. All lowercase file names are cleaner and more universally compatible.
Keep names concise: Two to five descriptive words are typically sufficient. Keyword stuffing in file names — blue-running-shoes-buy-cheap-free-shipping.webp — is not helpful and may be counterproductive.
Rename before uploading: File names cannot be changed after upload without breaking URLs. Rename files correctly before the first upload.
Part 4 — Alt Text — The Most Important Image SEO Factor
What Alt Text Is and Why It Matters
Alt text — the alt attribute on HTML image tags — is the most important on-page image SEO signal. It was originally created for accessibility — providing text descriptions of images for visually impaired users who use screen readers. Google uses it as the primary signal for understanding what an image shows and which search queries it is relevant to.
Google’s image crawlers cannot see images the way humans do. They analyse alt text, surrounding text, file names, and page context to understand image content. Alt text is the most direct signal — it explicitly tells Google what the image shows.
Poor or missing alt text means Google has reduced information to determine image relevance — producing lower image search rankings and weaker content relevance signals for the overall page.
What Good Alt Text Looks Like
Good alt text describes the actual image content specifically and naturally — not as a keyword list, not as a generic label, and not as a marketing statement.
Good alt text examples:
- alt=”Blue Nike Air Max running shoes on white background” — specific, descriptive, includes relevant detail
- alt=”Screenshot of Google Analytics dashboard showing organic traffic spike in March 2026″ — describes exactly what the screenshot shows
- alt=”Chef slicing fresh sourdough bread on wooden cutting board” — concrete and specific
- alt=”Aerial view of Sydney Opera House at dusk” — clear and informative
Poor alt text examples:
- alt=”shoes” — too vague, provides little information
- alt=”buy blue running shoes cheap” — keyword stuffing, not a description
- alt=”image” or alt=”photo” — describes the format, not the content
- alt=”product photo” — generic label with no descriptive value
When to Use Empty Alt Text
Purely decorative images — dividers, abstract background patterns, decorative shapes — should use empty alt text: alt=””. This tells both screen readers and Google that the image contains no meaningful content. Missing alt text (no alt attribute at all) is technically wrong — empty alt text is the correct way to indicate a decorative image.
Alt Text Length
Keep alt text under 125 characters — the typical limit at which screen readers cut off text. Most images can be accurately described in 50 to 100 characters. Longer descriptions for complex images are occasionally appropriate — a detailed chart or infographic might warrant 100 to 120 characters — but alt text is not the place for extended description.
Part 5 — Core Web Vitals and Images
How Images Affect Each Core Web Vital
Google uses three Core Web Vitals as ranking signals — Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP). Images directly affect two of the three.
Largest Contentful Paint (LCP):
LCP measures how quickly the largest visible content element loads. On most web pages, this element is a hero image or large featured photograph. A hero image at 180KB as WebP loads dramatically faster than the same image at 600KB as JPG on the same connection — directly improving LCP scores.
Google targets LCP under 2.5 seconds for a Good rating. Pages failing LCP commonly do so because of oversized or incorrectly formatted hero images. Fixing the LCP image — converting to WebP, resizing to correct dimensions, preloading — is the most direct path to passing LCP for image-heavy pages.
The LCP image should never be lazy loaded. This is a common mistake that directly and significantly hurts LCP scores. The hero image or whatever image is the LCP element needs to load immediately — adding loading=”lazy” to it instructs the browser to delay it, producing poor LCP.
Cumulative Layout Shift (CLS):
CLS measures visual stability — how much the page layout shifts as content loads. Images without defined width and height attributes cause layout shifts — the browser doesn’t know how much space to reserve until the image loads and downloads, then the page jumps when the image appears.
Adding width and height attributes to every image tag is the fix:
html
<img src=”product.webp” alt=”Product description” width=”800″ height=”800″ loading=”lazy”>
This tells the browser the image’s aspect ratio before it downloads — allowing space to be correctly reserved and eliminating layout shifts. Pair with img { max-width: 100%; height: auto; } in CSS for responsive behaviour without sacrificing the layout hint.
Preloading the LCP Image
For the page’s LCP image specifically, adding a preload hint in the document head tells the browser to start downloading it as early as possible — before it would normally be discovered in the HTML parsing process.
html
<link rel=”preload” as=”image” href=”hero.webp” type=”image/webp”>
Add this in the <head> of the page. Only preloading the single most important above-fold image — preloading multiple images competes for bandwidth and can hurt performance by delaying other critical resources.
Part 6 — Lazy Loading
Why Lazy Loading Matters for SEO
Lazy loading delays image downloads until the user scrolls near them — reducing initial page payload by 20 to 50 percent on image-heavy pages. This directly improves First Contentful Paint and overall loading speed — contributing to better Core Web Vitals scores and better rankings.
Native lazy loading requires a single HTML attribute — supported by all modern browsers without any JavaScript library:
html
<img src=”article-image.webp” alt=”Description” width=”1200″ height=”628″ loading=”lazy”>
The critical rule — never lazy load above-fold images. Hero images, logos, and any image visible without scrolling should load immediately. Lazy loading above-fold images delays content the visitor can already see — hurting both LCP scores and perceived performance.
WordPress has added loading=”lazy” to all images automatically since version 5.5. If your WordPress site is on 5.5 or later, lazy loading is already implemented for all below-fold images.
Part 7 — Image Sitemaps
Why Image Sitemaps Help Google Discover Images
An image sitemap tells Google about every image on your website — including images that might be difficult for crawlers to discover through regular HTML parsing, such as images loaded by JavaScript or images on pages with complex rendering.
Google’s image crawlers discover most images through standard HTML crawling — but image sitemaps provide an additional signal and help ensure comprehensive image indexing across large sites.
Basic image sitemap format:
xml
<?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>https://example.com/product-page/</loc>
<image:image>
<image:loc>https://example.com/images/product.webp</image:loc>
<image:title>Product name description</image:title>
<image:caption>Descriptive caption about the image content</image:caption>
</image:image>
</url>
</urlset>
WordPress plugins including Yoast SEO and Rank Math generate image sitemaps automatically. For non-WordPress sites, image sitemaps can be generated manually or through server-side scripts.
What to Include in Image Sitemaps
Include every image that contributes to page content — product images, featured images, gallery images, infographic images. Exclude purely decorative images that don’t add content value.
The image:title and image:caption fields provide additional context to Google about image content — similar to alt text but within the sitemap rather than the HTML. Fill these fields with accurate, descriptive text for each significant image.
Part 8 — Structured Data for Images
How Structured Data Amplifies Image SEO
Structured data — schema markup — tells Google explicitly about the context of images on your page. When implemented correctly, structured data can unlock rich results in Google Search and Google Image Search — expanded visual formats that attract significantly higher click-through rates than standard results.
Product schema with image:
For eCommerce product pages, Product schema with image markup helps Google associate the product image with the product’s price, rating, and availability — enabling rich product results in both web search and image search.
json
{
“@context”: “https://schema.org”,
“@type”: “Product”,
“name”: “Product Name”,
“image”: [
“https://example.com/product-image-1.webp”,
“https://example.com/product-image-2.webp”
],
“description”: “Product description here”,
“offers”: {
“@type”: “Offer”,
“price”: “29.99”,
“priceCurrency”: “USD”
}
}
Article schema with image:
For blog posts and articles, Article schema with a featured image helps Google understand the article’s primary image and may enable rich results in Google Discover and news results.
Recipe schema with image:
Recipe pages with properly implemented Recipe schema including image markup consistently outperform recipe pages without schema in both web search and Google Image Search.
Part 9 — Image CDN and Delivery Optimisation
Why Image Delivery Affects Rankings
A Content Delivery Network (CDN) serves images from servers geographically close to each visitor — reducing latency. For a visitor in Tokyo loading images from a server in London, each image request carries 200ms+ of latency. A CDN serves the same images from a server in Tokyo — reducing latency to 15 to 20ms.
For a page with ten images, that’s the difference between 2000ms of image latency and 200ms — directly affecting LCP and overall loading speed, which affects rankings.
Cloudflare’s free tier provides CDN delivery for any website. WordPress sites can add CDN through Cloudflare, Jetpack CDN (free), or WP Rocket with CDN support. Shopify includes CDN delivery automatically through Fastly.
Browser Caching for Images
Setting long cache expiration for image files means returning visitors load images from their local browser cache rather than downloading them again. This eliminates image loading time entirely for repeat visitors — every subsequent page view loads instantly for cached images.
For Apache servers, add to .htaccess:
apache
<FilesMatch “\.(webp|jpg|jpeg|png|svg|gif)$”>
Header set Cache-Control “max-age=31536000, public, immutable”
</FilesMatch>
For Nginx:
nginx
location ~* \.(webp|jpg|jpeg|png|svg|gif)$ {
expires 1y;
add_header Cache-Control “public, immutable”;
}
One year cache expiration for images is standard practice — image URLs should include a version hash or version number that changes when images are updated, ensuring browsers download fresh versions when content changes.
Part 10 — Open Graph Images
Why Open Graph Images Affect SEO Indirectly
Open Graph images — the images that appear when a page is shared on social media — don’t directly affect Google search rankings. But they significantly affect click-through rates from social sharing, which drives traffic, which creates engagement signals that Google uses to assess page quality.
A compelling Open Graph image dramatically increases click-through rates on social shares. A page shared on LinkedIn or Facebook with an eye-catching 1200 × 630px image gets substantially more clicks than the same page with a generic or broken preview image. More clicks from social sharing means more traffic, more time on site, more return visits — all signals that correlate with stronger search performance.
Implementing Open Graph images:
html
<meta property=”og:image” content=”https://example.com/page-preview-image.webp”>
<meta property=”og:image:width” content=”1200″>
<meta property=”og:image:height” content=”630″>
<meta property=”og:image:alt” content=”Description of the preview image”>
Use images at 1200 × 630px — the standard Open Graph image size that works correctly across Facebook, LinkedIn, Twitter, and most other platforms. Create specific, visually compelling Open Graph images for your most important pages — homepage, top blog posts, product pages — rather than using the first image on the page by default.
Part 11 — Image Search Optimisation
How to Rank in Google Image Search
Google Image Search drives substantial traffic for visual niches — product photography, recipe content, travel, fashion, home decor, DIY, and anything where people search by appearance. Ranking in image search requires many of the same signals as web search ranking — relevance, quality, page authority — plus image-specific signals.
Signals that influence image search rankings:
Alt text relevance: The most direct signal. Accurate, descriptive alt text that matches the search query significantly improves image search ranking for that query.
File name relevance: A secondary signal. Descriptive file names that include relevant terms reinforce the alt text signal.
Surrounding content relevance: Google uses the text surrounding an image on the page — headings, body text, captions — to understand image context. An image of a product surrounded by relevant product description ranks better in image search than the same image on a page with unrelated content.
Page authority: High-authority pages rank their images better in image search — domain authority and page link equity carry over to image search performance.
Page loading speed: Faster pages rank better in image search, just as they do in web search. The format, size, and delivery optimisations described throughout this guide all contribute to image search rankings.
Image size: Google generally favours larger, higher-resolution images in image search — smaller thumbnails tend to rank below full-size versions of the same image.
Captions: Image captions — text immediately below images in the page content — provide additional context signals. Adding relevant, descriptive captions to important images improves both user experience and image search relevance.
Part 12 — Image SEO for Specific Page Types
Product Pages
Product image SEO is directly connected to eCommerce revenue — better-optimised product images rank higher in Google Image Search, drive more organic traffic, and convert at higher rates because faster-loading product pages have lower bounce rates.
Key priorities for product image SEO:
- Multiple images per product from different angles — Google prefers pages with several relevant images
- Consistent dimensions across all product images — 800 × 800px or 1000 × 1000px
- White or transparent backgrounds for primary product images — standard for image search display
- Descriptive alt text including product name, colour, and relevant detail for each image
- Product schema markup associating images with product data
- WebP format for all product images — smaller files mean faster product pages
- 2× resolution for retina sharpness on high-DPI displays
Blog Posts and Articles
Blog image SEO combines content relevance signals with performance optimization.
Key priorities for blog image SEO:
- Featured image at 1200 × 628px as the Open Graph image simultaneously
- Descriptive alt text for every image explaining what each image shows
- Inline images related to the specific paragraph content — surrounding text context matters
- Lazy loading on all below-fold images
- WebP format for all inline images
- Defined width and height on every image tag
- Image file names matching the specific content of each image
Homepage
Homepage images are among the most important on any site — they affect first impressions, bounce rates, and LCP scores on the highest-traffic page.
Key priorities for homepage image SEO:
- Hero image at correct display dimensions — typically 1920 × 1080px
- Hero image preloaded — <link rel=”preload”> in the head
- Hero image never lazy loaded
- Compressed to under 200KB as WebP
- SVG for logo — sharp on all devices, tiny file size
- Minimal below-fold images on the homepage — prioritise speed over visual density
The Complete Image SEO Checklist
Apply this checklist to every image added to your website:
Format and file size:
- ✅ Saved as WebP (photographs and complex images) or SVG (logos and icons)
- ✅ Compressed to target file size — under 150KB for most images
- ✅ Metadata stripped — EXIF data removed for web images
Dimensions and display:
- ✅ Resized to correct display dimensions — not uploaded at camera resolution
- ✅ 2× dimensions for retina sharpness where applicable
- ✅ Width and height attributes defined in the HTML img tag
- ✅ srcset implemented for responsive image delivery
SEO signals:
- ✅ Descriptive file name — hyphens, lowercase, relevant keywords
- ✅ Accurate alt text — describes image content specifically, under 125 characters
- ✅ Image included in XML sitemap
- ✅ Caption added for important images (optional but beneficial)
Performance:
- ✅ loading=”lazy” added to all below-fold images
- ✅ Above-fold images NOT lazy loaded
- ✅ LCP image preloaded with <link rel=”preload”>
- ✅ CDN delivery enabled (where applicable)
- ✅ Browser caching configured for images
Verification:
- ✅ PageSpeed Insights run — no image-related warnings
- ✅ Core Web Vitals passing for LCP and CLS on mobile
Measuring Image SEO Performance
Google PageSpeed Insights
Run every important page through Google PageSpeed Insights at pagespeed.web.dev. The Opportunities section identifies every image-specific issue — wrong format, oversized dimensions, missing lazy loading, unpreloaded LCP images. Fix each flagged item and re-run to confirm resolution. A fully optimised page should have no image-related items in the Opportunities section.
Google Search Console
Check Core Web Vitals in Search Console under Experience > Core Web Vitals. Pages failing LCP with image-related causes show measurable improvement within 28 days of fixing the underlying images. Monitor the Core Web Vitals report after implementing optimisations to confirm improvement.
Google Search Console Image Search Performance
In Search Console under Performance > Search Type > Image, filter results to see image search traffic specifically. Pages with well-optimised images — descriptive alt text, relevant file names, fast loading — accumulate image search impressions and clicks over time. This report shows which images are driving image search traffic and which queries trigger image results.
Conclusion
Image SEO in 2026 is not a single optimization — it is a collection of technical, on-page, and delivery decisions that together determine how much images contribute to or detract from overall search performance.
The highest-impact changes for most websites are format conversion to WebP, correct pixel dimensions, defined image dimensions in HTML to prevent layout shifts, descriptive alt text on every image, and lazy loading on below-fold images. These five changes address the most common PageSpeed warnings, improve Core Web Vitals scores, and strengthen image search relevance signals simultaneously.
The tools to implement all of this are free. PageSpeed Insights tests are free. The improvements in loading speed, Core Web Vitals, and rankings that follow are permanent and compounding — every visitor to every page benefits from properly optimised images, indefinitely.
For free image conversion and optimisation tools covering every format — JPG to WebP, PNG to WebP, compression, resizing, and background removal — visit ImageConverterTools.com. The complete suite of image converter tools handles every conversion in this guide — batch processing supported, no sign-up required, completely free.
