Images are often treated as a design concern — get them looking good, compress them "a bit," move on. But images touch nearly every dimension of SEO: page load speed (and therefore Core Web Vitals), topical relevance signals, accessibility, and a distinct traffic channel via Google Image Search. A single uncompressed hero image can push a page below the LCP threshold even when every other technical factor is clean.
The eight techniques below address all of these dimensions. They are ordered by how much ranking impact each typically delivers, starting with the changes that show up fastest in search performance data.
Key Takeaways
- Image file size is the highest-impact SEO issue — a single uncompressed hero image (2MB+) can cause LCP failures that prevent pages from ranking well on Core Web Vitals
- Alt text is how Google understands image content — descriptive alt text contributes to both Image Search ranking and main page topical relevance signals
- WebP format images are 25–35% smaller than JPEG equivalents at the same visual quality — converting to WebP reduces page weight without quality loss
- Always include
widthandheightattributes on images — without them, the browser can't reserve layout space and Cumulative Layout Shift (CLS) worsens - Lazy load all below-fold images with
loading="lazy"— but never add it to the LCP hero image, which should load as fast as possible
Tip 1 — Descriptive File Names
Image file names are read by Google's crawlers and contribute to image indexing signals. hero-image.jpg provides no useful signal. link-checker-results-table.jpg signals relevance for link checker queries — and increases the chance of appearing in Image Search for related terms.
Follow this naming convention: lowercase letters, hyphens between words (not underscores), descriptive content in 3–5 words. Describe what's in the image, not the page context it was placed on:
- Good:
broken-link-404-error-example.jpg - Avoid:
link-checker-page-hero.jpg— describes placement, not content - Avoid:
IMG_20240912_143322.jpg— camera default, zero signal
Renaming images on an established site requires updating every reference and setting up redirects or canonical image URLs — so build this habit before publishing rather than retroactively fixing it.
Tip 2 — Descriptive Alt Text
Alt text is the primary signal Google uses to understand image content. It also makes images accessible to screen reader users — both a legal requirement in many jurisdictions and a ranking signal under Google's accessibility-as-quality framework.
Writing effective alt text:
- Write a factual description of what the image actually shows — not what you want it to rank for
- Include the natural target keyword only if it genuinely fits the description of the image
- Keep it under 125 characters — most screen readers truncate beyond that
- Use
alt=""(empty string, not omitted) for purely decorative images — this tells screen readers to skip the element entirely
The SEO Analyzer flags every page with images missing alt text — the fastest way to audit this across an entire site rather than reviewing pages one by one.
Tip 3 — Compress Images
Unoptimised images are the single largest contributor to slow page loads. An uncompressed hero image can add 2–4 seconds to LCP on mobile networks, which directly suppresses rankings on Google's mobile-first index.
Compression targets by format:
- JPEG: Export at 80% quality. Anything higher adds disproportionate file size without visible improvement at normal screen densities
- PNG: Use PNG-8 (256 colours) for graphics, logos, and screenshots with limited colour ranges; PNG-24 only for images requiring smooth transparency at high quality
- SVG: Run through SVGO to strip editor metadata — SVGs exported from Figma or Illustrator often include 30–40% unused metadata
Recommended tools: Squoosh (browser-based, free), ImageOptim (Mac), Sharp (Node.js server-side for build pipelines). A quick benchmark: if a JPEG is over 200KB, it can almost certainly be compressed further without any perceptible quality loss.
Tip 4 — Use WebP (with Fallback)
WebP delivers 25–35% smaller files than JPEG at equivalent visual quality, and supports both lossy and lossless compression. Browser support is now effectively universal — above 96% globally as of mid-2026.
Serve WebP using the HTML <picture> element for a graceful JPEG fallback on older browsers:
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description of the image" width="800" height="600">
</picture>If your audience is primarily modern browsers (verify with your analytics), serving WebP directly from <img src="image.webp"> is simpler. For sites using Next.js, the <Image> component handles format negotiation automatically via Accept headers — no manual <picture> element needed.
AVIF is a newer format that achieves a further 20% size reduction over WebP, but encoder performance is slower and browser support is lower (~90%). Worth evaluating for image-heavy e-commerce or photography sites.
Tip 5 — Set width and height Attributes
Always specify width and height attributes on every <img> element:
<img src="hero.jpg" alt="Hero" width="1200" height="630">These attributes allow the browser to calculate the image's aspect ratio before the file loads, reserving the correct amount of layout space. Without them, the browser allocates zero height until the image downloads — then expands it, shifting all content below it. This is Cumulative Layout Shift (CLS), one of Google's three Core Web Vitals metrics. A CLS score above 0.1 actively suppresses rankings.
For responsive images sized via CSS, set the natural dimensions of the source file — not the CSS display size. The browser uses the ratio, not the pixel values, to reserve space.
The Page Speed Inspector flags images missing width/height attributes under its CLS checks, along with the specific file paths, so you can fix them without manually inspecting every template.
Tip 6 — Responsive Images with srcset
Serving a 1200px wide image to a 375px mobile viewport wastes bandwidth and slows load time. srcset lets you declare multiple image variants and lets the browser choose the smallest appropriate one:
<img srcset="hero-400.jpg 400w,
hero-800.jpg 800w,
hero-1200.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 900px) 800px,
1200px"
src="hero-1200.jpg"
alt="Hero image"
width="1200"
height="630">The sizes attribute tells the browser what display width to expect at each breakpoint — it uses this to pick the right srcset variant before the image loads (before CSS is applied). Without sizes, the browser assumes the image fills the full viewport and may download a larger variant than needed.
Mobile devices on a 3G connection downloading the 400px variant instead of the 1200px variant saves roughly 80% of image bandwidth — directly improving LCP on mobile, which is the index Google uses for ranking decisions.
Tip 7 — Lazy Load Below-Fold Images
Add loading="lazy" to all images that are not visible on initial page load:
<img src="product.jpg" alt="Product name" width="400" height="400" loading="lazy">The browser defers downloading these images until the user scrolls them into the viewport, reducing the total bytes transferred on initial page load and freeing up network bandwidth for above-fold resources.
loading="lazy" to the first/hero image. The first large image on a page is almost always the LCP element. Lazy loading it delays the most important render event on the page and directly worsens LCP — the opposite of the intended effect. The Page Speed Inspector flags this combination (hero image + lazy) as a specific issue.
Similarly, avoid lazy loading images that are likely to appear in the initial viewport on some screen sizes — particularly images in the top 50% of a page's layout. When in doubt, test with the Page Speed Inspector's LCP candidate detection to confirm which image is actually being measured as LCP.
Tip 8 — Image Sitemaps
For sites where images drive significant traffic — e-commerce product photos, photography portfolios, news with original photojournalism — an image sitemap tells Google about images it might not discover through regular HTML crawling.
Add image markup to your existing XML sitemap using the image: extension namespace:
<?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://www.example.com/product/</loc>
<image:image>
<image:loc>https://www.example.com/images/product.jpg</image:loc>
<image:title>Product Name</image:title>
</image:image>
</url>
</urlset>Multiple <image:image> blocks can be nested inside a single <url> entry — useful for product pages with multiple angles or gallery pages.
Submit your sitemap in Google Search Console under Indexing → Sitemaps. The Sitemap Validator checks that every URL in the sitemap returns a healthy status and flags canonical mismatches or noindex conflicts — run it after any sitemap update to confirm nothing is broken before submitting to GSC.
Find Images Missing Alt Text and Dimensions
Free, no signup. The SEO Analyzer flags pages with missing image alt text, and the Page Speed Inspector identifies images without width/height attributes that are causing CLS — both on the same scan.
Try the SEO Analyzer Free →Related reading: Image SEO Optimization — The Complete Guide
Affiliate disclosure: Some links on this page may be affiliate links. We only mention tools we've personally used and have an honest opinion about. Affiliate revenue helps keep ByteWaveNetwork's tools free and maintained. We are not paid by any of the tools compared in this article for favorable coverage.