Images are the single biggest contributor to slow page load times — and slow pages hurt both rankings and conversions. This complete guide covers next-gen image formats (WebP, AVIF), alt text for accessibility and SEO, responsive images with srcset, lazy loading, and how to use images to improve your Core Web Vitals scores in 2026.
2026 Update: Google's Core Web Vitals now include INP (Interaction to Next Paint) replacing FID. Large unoptimized images can block the main thread and degrade INP scores. Image optimization is more important than ever for both LCP and INP performance.
Check your site's image performance
Scan any URL to find oversized images, missing alt text, CLS issues, and LCP problems affecting your Google rankings.
Images typically account for 50–70% of a webpage's total byte weight. Unoptimized images are the primary cause of slow LCP (Largest Contentful Paint) scores — one of Google's three Core Web Vitals and a confirmed ranking signal since May 2021.
Beyond performance, images affect SEO through:
Impact of image optimization on Core Web Vitals:
LCP
Hero image is often the LCP element — optimize format, preload, and use CDN
CLS
Images without width/height cause layout shifts — always specify dimensions
INP
Large undecoded images block main thread — use decoding="async"
Choosing the right format is the single highest-impact image optimization decision. Here's how each format compares:
| Format | Best For | File Size vs JPEG | Transparency | Browser Support |
|---|---|---|---|---|
| JPEG | Photos, complex images | Baseline | No | 100% |
| PNG | Screenshots, transparency | 20–40% larger | Yes | 100% |
| WebP | Photos + transparency (replace JPEG/PNG) | 25–35% smaller | Yes | 97%+ |
| AVIF | Photos (best compression) | 40–55% smaller | Yes | 93%+ |
| SVG | Logos, icons, illustrations | Varies (resolution-independent) | Yes | 100% |
2026 recommendation: Serve AVIF as primary format, WebP as fallback, JPEG/PNG as legacy fallback using the HTML <picture> element.
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Descriptive alt text" width="800" height="600" loading="lazy">
</picture>Alt text (alternative text) is the written description of an image displayed when the image fails to load and read by screen readers. It's both an accessibility requirement (WCAG 1.1.1) and an SEO signal.
✓ Descriptive and concise (under 125 characters)
Good: alt="Woman in red dress using laptop at coffee shop table"
✓ Include keywords naturally when relevant
Good: alt="PageGuard website health score dashboard showing 94/100 SEO score"
✓ Empty alt for purely decorative images
Decorative: alt="" (empty string, not missing) — tells screen readers to skip the image
✗ Don't start with "Image of" or "Picture of"
Bad: alt="Image of a laptop" — screen readers already announce it's an image
✗ Don't keyword-stuff alt text
Bad: alt="website health seo checker free tool pageguard accessibility" — spammy, hurts SEO
✗ Don't leave alt text missing
Missing alt attribute = WCAG 1.1.1 failure = potential ADA lawsuit risk
| Image Type | Alt Text Approach | Example |
|---|---|---|
| Product photo | Product name + key feature + color | Nike Air Max 270 running shoe in black/white |
| Infographic | Summary of key data points shown | Chart showing 65% mobile vs 35% desktop web traffic in 2026 |
| Screenshot/UI | What the UI shows and its purpose | PageGuard dashboard showing 3 monitored websites with health scores |
| Team photo | Names and context if informational; empty if decorative | Jane Smith, CEO of Acme Corp, speaking at DevConf 2026 |
| Logo | Company name + "logo" | PageGuard logo |
| Decorative divider | Empty alt (alt="") | alt="" — screen reader will skip it |
Responsive images serve different sized images to different devices — preventing mobile users from downloading unnecessarily large desktop images, which significantly improves mobile performance and LCP scores.
<img
src="hero-800.webp"
srcset="hero-400.webp 400w,
hero-800.webp 800w,
hero-1200.webp 1200w,
hero-1600.webp 1600w"
sizes="(max-width: 640px) 100vw,
(max-width: 1024px) 80vw,
1200px"
alt="Website health dashboard showing four score categories"
width="1200"
height="675"
fetchpriority="high"
>The sizes attribute tells the browser how wide the image will be displayed at different viewport sizes, allowing it to choose the optimal image from srcset before the CSS loads.
Use <picture> when you need to serve completely different image crops for different devices (art direction):
<picture>
<!-- Mobile: square crop -->
<source media="(max-width: 640px)" srcset="hero-mobile-square.avif" type="image/avif">
<source media="(max-width: 640px)" srcset="hero-mobile-square.webp" type="image/webp">
<!-- Desktop: wide crop -->
<source srcset="hero-desktop-wide.avif" type="image/avif">
<source srcset="hero-desktop-wide.webp" type="image/webp">
<!-- Fallback -->
<img src="hero-desktop-wide.jpg" alt="Website health dashboard" width="1200" height="675">
</picture>Native browser lazy loading delays image loading until the image is near the viewport, reducing initial page weight and speeding up Time to First Byte (TTFB) and LCP for above-the-fold content.
Above-the-fold / LCP image
<img src="hero.webp" alt="..." width="1200" height="675" fetchpriority="high">
Do NOT use loading="lazy" here. Add fetchpriority="high" to tell the browser to load this first.
Below-the-fold images
<img src="product.webp" alt="..." width="400" height="300" loading="lazy" decoding="async">
Use loading="lazy" for all below-the-fold images. decoding="async" prevents image decoding from blocking the main thread.
For hero images, add a preload hint in the <head> to start loading before the browser parses the body:
<link rel="preload" as="image"
href="hero-1200.webp"
imagesrcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
imagesizes="(max-width: 640px) 100vw, 1200px"
type="image/webp"
>Preloading the LCP image can reduce LCP by 200–500ms by starting the download earlier in the loading waterfall.
Cumulative Layout Shift (CLS) measures visual instability — how much the page layout jumps around as content loads. Images without specified dimensions are the most common cause of CLS failures.
When a browser encounters an <img> without dimensions, it can't reserve space for it. When the image loads, everything below it shifts down — causing a jarring experience and a poor CLS score.
❌ Causes CLS
<img src="product.webp" alt="Product photo">
✓ Prevents CLS — browser reserves space before image loads
<img src="product.webp" alt="Product photo" width="400" height="300">
The width and height attributes set the intrinsic aspect ratio in modern browsers, allowing the browser to calculate the correct space regardless of the actual displayed size (which is controlled by CSS).
For responsive images where CSS sets width: 100%, set the HTML attributes to the image's natural dimensions. The browser will automatically calculate the correct height from the aspect ratio.
Compression reduces file size by discarding visual data that the human eye can't easily perceive. The goal is to find the sweet spot between acceptable quality and minimal file size.
| Format | Recommended Quality | Use Case |
|---|---|---|
| JPEG | 75–85% | Photos, product images |
| WebP (lossy) | 75–85% | General photos (replace JPEG) |
| WebP (lossless) | Lossless | Screenshots, UI elements |
| AVIF | 60–75% (equivalent quality to JPEG 85%) | Photos — best compression |
| PNG | Use pngquant for lossy PNG compression | Transparency required |
An image CDN (Content Delivery Network) serves images from edge servers close to users, automatically converts formats, resizes on-demand, and caches aggressively. For most sites, an image CDN is the single highest-ROI performance optimization.
| CDN | Auto Format | On-Demand Resize | Free Tier | Best For |
|---|---|---|---|---|
| Cloudflare Images | ✓ WebP/AVIF | ✓ | $5/mo for 100K images | Cloudflare Workers sites |
| Cloudinary | ✓ auto format | ✓ | 25 credits/mo free | E-commerce, media |
| imgix | ✓ auto=format | ✓ | $35/mo+ | High-traffic sites |
| Next.js Image | ✓ built-in | ✓ | Free (self-hosted) | Next.js projects |
For Shopify, WooCommerce, and other platforms with built-in image handling, check if your theme or CDN already optimizes images — many modern themes auto-serve WebP. Always verify with a performance scan.
Image filenames contribute to SEO by giving Google additional context about image content. This matters for Google Image Search and, indirectly, for page relevance signals.
❌ Bad filenames (generic, uninformative)
IMG_20240312_094523.jpg, image001.png, photo.webp, DSC_1234.jpg
✓ Good filenames (descriptive, keyword-rich)
website-health-score-dashboard.webp, ada-compliance-checker-results.avif, pageguard-seo-score-report.webp
Filename best practices:
/images/products/ or /images/blog/Install Smush Pro or ShortPixel for automatic WebP conversion and compression. Use Imagify for AVIF support. Enable lazy loading in WordPress 5.5+ (built-in). Add width and height via the Media Library — WordPress sets them automatically. Use Cloudflare Polish (Pro plan+) for edge-level WebP conversion without plugins.
Shopify CDN automatically serves WebP to supported browsers. Use the Liquid img_url filter with size parameters to serve appropriately sized images. Use srcset in product templates with Shopify's image size variants (100x, 200x, 400x, 800x, 1200x, 2000x). Always add descriptive alt text in product/collection admin.
Use the built-in next/image component — it automatically handles WebP/AVIF conversion, responsive srcset, lazy loading, and prevents CLS with required width/height props. Use priority prop for above-the-fold images (equivalent to fetchpriority="high"). Configure remotePatterns in next.config.js for external image sources.
These platforms handle CDN delivery automatically and serve WebP on modern browsers. For Webflow, set custom alt text for every image in the element settings. Avoid uploading images larger than 2MB — these platforms optimize but not aggressively for very large uploads. Use SVG for logos and icons by uploading SVG files directly.
An image sitemap (or image tags within your main sitemap) helps Google discover and index images that it might miss during regular crawling — especially important for JavaScript-rendered images.
<url>
<loc>https://example.com/products/blue-widget</loc>
<image:image>
<image:loc>https://cdn.example.com/products/blue-widget-main.webp</image:loc>
<image:title>Blue Widget — Premium Quality</image:title>
<image:caption>The Blue Widget is made from aerospace-grade aluminum</image:caption>
</image:image>
<image:image>
<image:loc>https://cdn.example.com/products/blue-widget-side.webp</image:loc>
<image:title>Blue Widget Side View</image:title>
</image:image>
</url>Add xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" to your sitemap's urlset element. Image sitemaps are especially valuable for e-commerce sites, photography portfolios, and content sites with many images.
After implementing image optimizations, verify that your pages are passing Core Web Vitals thresholds and that all images have proper alt text for accessibility compliance.
PageGuard scans for missing alt text (WCAG 1.1.1), LCP performance issues, CLS problems from images without dimensions, and overall SEO health — giving you a single score that reflects both image optimization quality and broader page health.
Check your page's image and Core Web Vitals health
Scan any URL to find missing alt text, CLS issues, LCP problems, and image optimization opportunities.
Use WebP as the default format (25–35% smaller than JPEG, 97%+ browser support) and AVIF as a cutting-edge alternative (40–55% smaller than JPEG, 93%+ support). Use the <picture> element to serve AVIF → WebP → JPEG/PNG in order. Use SVG for logos and icons. Never use BMP or TIFF on web pages.
Alt text is important for both SEO and accessibility. For SEO, it helps Google understand image context and contributes to image search rankings. For accessibility, missing alt text creates WCAG 1.1.1 violations and potential ADA legal liability. Write descriptive, concise alt text under 125 characters. Use empty alt="" for purely decorative images.
Target under 200KB for content images, under 100KB for thumbnails, and under 500KB for hero images. Use responsive images with srcset to serve different sizes to different devices. Always specify width and height HTML attributes to prevent CLS. Serve images at their display size, not larger.
Yes for all below-the-fold images using loading="lazy". Do NOT lazy load your hero/LCP image — use fetchpriority="high" instead. Add decoding="async" to below-fold images to prevent main thread blocking. For critical hero images, consider adding a <link rel="preload"> in your <head> to start loading before the browser parses the body.
Images directly impact two Core Web Vitals: (1) LCP — the hero image is often the LCP element; optimize format, preload, and serve from CDN to achieve LCP ≤ 2.5s. (2) CLS — images without specified width/height cause layout shifts; always set dimensions to prevent CLS ≥ 0.1. Images also affect INP indirectly when large undecoded images block the main thread.
Core Web Vitals Optimization 2026
Fix LCP, INP, and CLS for better Google page experience scores
Website Speed Optimization Guide
Complete guide to making your website faster for users and search engines
Technical SEO Checklist 2026
Complete technical SEO audit covering crawlability, indexing, and performance
Website Accessibility Checklist 2026
WCAG 2.1 AA compliance checklist including image alt text requirements