Image Optimization for SEO: 12 Actionable Tips for 2026
Images are the lowest-hanging fruit in technical SEO. Most sites still ship uncompressed PNGs, missing alt text, and layout shift that tanks their Core Web Vitals score. Fixing image optimization for SEO is rarely glamorous, but it's one of the fastest ways to improve page speed, earn image search traffic, and strengthen your overall rankings.
Here are 12 actionable tactics you can apply today, ranked roughly by impact.
1. Write Descriptive Alt Text for Every Image
Alt text serves two purposes: accessibility and search. Screen readers use it to describe images to visually impaired users, and Google uses it to understand what the image depicts and how it relates to the page content.
Write alt text that describes the image in context. Not "img1234.jpg" and not a keyword-stuffed sentence. If the image shows a bar chart of organic traffic growth, the alt text should say exactly that.
- Do: "Bar chart showing organic traffic growth from 40K to 120K monthly visits over 12 months"
- Don't: "SEO traffic chart SEO growth SEO strategy SEO tips"
Keep it under 125 characters. Skip alt text for purely decorative images (use an empty alt="" attribute so screen readers ignore it intentionally).
2. Use Keyword-Rich, Descriptive File Names
Before you upload an image, rename the file. Search engines read file names, and a descriptive name reinforces the page's topic.
- Bad:
DSC_4821.jpgorscreenshot-2026-08-21.png - Good:
webp-to-jpg-converter-interface.png
Use hyphens, not underscores. Keep it short — 3–5 words is plenty.
3. Serve Next-Gen Formats (WebP or AVIF)
JPEG and PNG are decades old. WebP delivers 25–35% smaller files at equivalent quality, and AVIF pushes that even further. Serving modern formats directly reduces page weight and improves load times.
Convert your existing images with the PNG to WebP converter or the image compressor, which outputs WebP alongside optimized JPG and PNG. Use the <picture> element with fallbacks so older browsers get a JPG while modern ones get WebP:
<picture>
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Descriptive alt text" width="1200" height="630">
</picture>
4. Compress Images Without Visible Quality Loss
Compression is the single biggest page-speed win for most sites. A 2 MB hero image should be 200–400 KB after compression. Aim for these targets:
- Hero images: under 200 KB
- Content images: under 100 KB
- Thumbnails: under 50 KB
The image compressor handles this in your browser. Set quality to 80–85 for photos and you'll rarely see a visible difference. For screenshots and graphics with flat colors, PNG compression often beats JPG.
5. Specify Width and Height Attributes
Always include width and height attributes on your <img> tags. The browser uses these to reserve space before the image loads, which prevents Cumulative Layout Shift (CLS) — a Core Web Vitals metric that directly affects rankings.
<img src="photo.jpg" alt="Alt text" width="1200" height="800">
Without dimensions, the browser doesn't know how much space to allocate, and when the image finally loads, the content below it jumps. That shift hurts your CLS score.
6. Resize Images to Their Display Dimensions
Don't upload a 4000 x 3000 photo and display it at 400 x 300. The browser still downloads the full file, then downscales it — wasting bandwidth and slowing the page.
Resize images to the maximum size they'll be displayed at, including retina displays (2x). If an image displays at 800px wide on desktop, export it at 1600px wide for retina screens. Use the image resizer to batch-resize before uploading.
7. Implement Lazy Loading
Lazy loading defers image loading until the user scrolls near them. This reduces initial page load time and saves bandwidth for content below the fold.
Add loading="lazy" to images that aren't immediately visible:
<img src="photo.jpg" alt="Alt text" width="800" height="600" loading="lazy">
Don't lazy-load above-the-fold images — especially your Largest Contentful Paint (LCP) element. Those should load immediately, ideally with fetchpriority="high".
8. Optimize the LCP Image
The Largest Contentful Paint element is often a hero image. If it loads slowly, your LCP score suffers, and Google penalizes slow LCP in its ranking signals.
To optimize the LCP image:
- Preload it with
<link rel="preload" as="image" href="hero.webp"> - Serve it as WebP or AVIF
- Keep it under 200 KB
- Avoid lazy-loading it
- Use
fetchpriority="high"on the<img>tag
9. Use Responsive Images with srcset
Different devices need different image sizes. A mobile user doesn't need a 1600px-wide hero image. The srcset attribute lets the browser choose the right file:
<img src="hero-800.jpg"
srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
alt="Alt text" width="1600" height="800" loading="eager">
This cuts mobile page weight significantly — often by 50% or more.
10. Add Image Structured Data
If you publish images that could appear in rich results — recipes, products, how-to guides — add structured data (Schema.org) to the page. Google uses this to display images in enhanced search results and Google Images.
For products, use Product schema with an image property. For recipes, use Recipe schema. Google's Image Structured Data guide covers the supported types.
11. Use a CDN for Image Delivery
A content delivery network serves images from a server geographically close to the user, reducing latency. Most CDNs also offer on-the-fly resizing and format conversion, so you upload one high-res image and the CDN handles the rest.
Popular options include Cloudflare Images, Imgix, Cloudinary, and Fastly Image Optimizer. If you're on WordPress, Cloudflare's free tier handles basic CDN delivery without configuration.
12. Submit an Image Sitemap
Help Google discover your images faster by including them in your XML sitemap. You can use a dedicated image sitemap or add image tags to your existing URL sitemap:
<url>
<loc>https://example.com/blog/webp-to-jpg</loc>
<image:image>
<image:loc>https://example.com/images/webp-converter.webp</image:loc>
<image:title>WebP to JPG Converter Interface</image:title>
</image:image>
</url>
Google's image sitemap documentation explains the full syntax.
Image Optimization Checklist
<!-- Item 2 -->
<rect x="30" y="120" width="24" height="24" rx="4" fill="#22c55e"/>
<path d="M37 133 l5 5 l8 -10" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<text x="66" y="137">Keyword-rich, hyphenated file names</text>
<!-- Item 3 -->
<rect x="30" y="160" width="24" height="24" rx="4" fill="#22c55e"/>
<path d="M37 173 l5 5 l8 -10" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<text x="66" y="177">Serve WebP or AVIF with fallbacks</text>
<!-- Item 4 -->
<rect x="30" y="200" width="24" height="24" rx="4" fill="#22c55e"/>
<path d="M37 213 l5 5 l8 -10" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<text x="66" y="217">Compress to under 200 KB (hero) / 100 KB (content)</text>
<!-- Item 5 -->
<rect x="30" y="240" width="24" height="24" rx="4" fill="#22c55e"/>
<path d="M37 253 l5 5 l8 -10" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<text x="66" y="257">Width and height attributes on all imgs</text>
<!-- Item 6 -->
<rect x="30" y="280" width="24" height="24" rx="4" fill="#22c55e"/>
<path d="M37 293 l5 5 l8 -10" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<text x="66" y="297">Resize to max display x 2 (retina)</text>
<!-- Item 7 -->
<rect x="30" y="320" width="24" height="24" rx="4" fill="#22c55e"/>
<path d="M37 333 l5 5 l8 -10" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<text x="66" y="337">Lazy-load below-the-fold images</text>
<!-- Item 8 -->
<rect x="30" y="360" width="24" height="24" rx="4" fill="#22c55e"/>
<path d="M37 373 l5 5 l8 -10" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<text x="66" y="377">Preload and prioritize LCP image</text>
<!-- Item 9 -->
<rect x="30" y="400" width="24" height="24" rx="4" fill="#22c55e"/>
<path d="M37 413 l5 5 l8 -10" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<text x="66" y="417">Responsive srcset for multiple sizes</text>
<!-- Item 10 -->
<rect x="30" y="440" width="24" height="24" rx="4" fill="#22c55e"/>
<path d="M37 453 l5 5 l8 -10" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<text x="66" y="457">Structured data for rich results</text>
<!-- Item 11 -->
<rect x="30" y="480" width="24" height="24" rx="4" fill="#22c55e"/>
<path d="M37 493 l5 5 l8 -10" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<text x="66" y="497">CDN for delivery and on-the-fly resizing</text>
<!-- Item 12 -->
<rect x="30" y="520" width="24" height="24" rx="4" fill="#22c55e"/>
<path d="M37 533 l5 5 l8 -10" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<text x="66" y="537">Image sitemap submitted to Google</text>
Start With the Biggest Wins
You don't need to do all 12 at once. If you only have time for three things, do these:
- Compress and convert to WebP — Use the image compressor and PNG to WebP converter. This alone can cut page weight by 50%.
- Add width/height and alt text — Prevents layout shift and improves image search visibility.
- Lazy-load below-the-fold images — One attribute, immediate speed gain.
Once those are in place, work through the rest. Every item compounds — smaller files load faster, faster pages score better on Core Web Vitals, and better scores correlate with higher rankings. Google's Core Web Vitals report explains how these metrics factor into search results.
Image optimization for SEO isn't a one-time task. Make it part of your publishing workflow: resize, compress, convert, add alt text, and verify dimensions before every image goes live.
