Images make pages engaging, and they're usually the heaviest thing on them. Unoptimised images slow pages down, hurt Core Web Vitals, waste mobile data and miss out on traffic from image search. The good news: image SEO is mostly a set of simple habits. Here's the complete checklist.
1. Choose the right format
| Format | Use for | Notes |
|---|---|---|
| AVIF | Photos | Often the smallest files; check your platform supports it |
| WebP | Photos and graphics | Widely supported, much smaller than JPEG |
| JPEG | Photos (fallback) | Universal, larger files |
| PNG | Screenshots, transparency | Lossless, can be large |
| SVG | Logos, icons, simple illustrations | Vector, tiny, sharp at any size |
Many modern frameworks and CDNs convert images to WebP or AVIF automatically.
2. Compress
Compression can often shrink an image dramatically with no visible difference. Aim for the smallest file that still looks good at the size it's displayed. Check large hero images especially; a single oversized photo can be the slowest thing on a page.
3. Serve the right size
Don't send a 4,000-pixel photo to a phone that displays it at 400 pixels. Use responsive images (srcset and sizes) so each device downloads an appropriate size. Modern image components handle this for you.
4. Always set width and height
Declare each image's dimensions, or reserve its space with CSS, so the layout doesn't jump as images load. Layout shift hurts both user experience and Cumulative Layout Shift, one of the Core Web Vitals.
5. Lazy-load below the fold, not above it
Add loading="lazy" to images further down the page so they load only when needed. But load your main hero image immediately: it's often the Largest Contentful Paint element, and lazy-loading it slows the page down.
6. Write useful alt text
Alt text describes an image for screen readers and helps search engines understand it.
| Weak | Better |
|---|---|
| "image1" | "Owner of a bakery arranging loaves on a shelf" |
| "bakery bakery best bakery Leeds" | "Sourdough loaves cooling at our Leeds bakery" |
| "Image of a chart" | "Chart showing organic traffic doubling after the redesign" |
Leave alt text empty (alt="") for purely decorative images. Alt text is also an accessibility requirement; see our WCAG 2.2 checklist.
7. Use descriptive file names
sourdough-loaves-leeds-bakery.webp tells search engines more than IMG_4821.jpg. Use lowercase words separated by hyphens.
8. Put images near relevant text
Search engines use surrounding text, captions and headings to understand images. An image placed beside the paragraph it illustrates is better understood than one floating in a gallery.
9. Add images to your sitemap
For image-heavy sites, include images in your XML sitemap so search engines can find them; see the complete guide to XML sitemaps.
10. Set social sharing images
Open Graph images control how your pages look when shared. A missing or wrong image makes links look broken; see Open Graph tags explained.
11. Use structured data where it fits
Products, recipes, articles and other content types can include image properties in structured data, which can help them appear richly in results; see schema markup for beginners.
12. Serve images fast
Use a CDN, cache images for a long time and consider preloading the most important hero image.
Sensible sizes for common images
| Image | Display width | Export width (for sharp screens) | Notes |
|---|---|---|---|
| Full-width hero | Full screen | 1920–2400 px | Compress hard; often the LCP element |
| Content image | Article column | 1200–1600 px | Usually WebP or AVIF |
| Card thumbnail | 300–400 px | 600–800 px | Crop to a consistent ratio |
| Logo | Small | SVG | Vector stays sharp |
| Social sharing image | n/a | 1200 × 630 px | Text large enough to read small |
Responsive images let each device download only what it needs, so these are maximums, not what every visitor gets.
Product images for e-commerce
- Show the product from several angles, plus one in context.
- Use consistent backgrounds and ratios across a category.
- Include zoom-quality originals but serve smaller versions by default.
- Write alt text that names the product, colour and key detail: "Navy wool overcoat, front view, double-breasted."
- Add images to product structured data so they can appear in rich results.
Platform notes
- Next.js: the built-in image component handles responsive sizes, lazy loading, modern formats and dimensions; set
priorityon the hero image. - WordPress: generates several sizes on upload; add an image optimisation plugin or CDN for WebP/AVIF and compression, and check the theme doesn't lazy-load the hero.
- Shopify: serves responsive images through its CDN; keep uploads high quality and write alt text in the product admin.
- Webflow: offers responsive images and lazy loading; check the hero isn't lazy-loaded and fill in alt text for each image.
Decorative or informative?
Ask: if the image disappeared, would the page lose information? If yes, it's informative and needs alt text. If no, it's decorative and should have empty alt text, or be a CSS background. Charts, diagrams and product photos are informative; textures, dividers and stock backgrounds usually aren't.
A quick image audit
- Run your key pages through a speed test and look for "properly size images" and "next-gen formats" warnings.
- Find the five largest images on your site and compress or resize them.
- Check every content image has meaningful alt text.
- Confirm the hero image isn't lazy-loaded.
- Check images have dimensions set, so nothing shifts.
Check your pages in a minute
Zelvorm's free AI Website X-Ray measures speed and Core Web Vitals, flags heavy images and checks accessibility, all in one report.
The short version
Use modern formats, compress, serve responsive sizes, set dimensions, lazy-load only below the fold, write useful alt text and file names, place images near relevant text, include them in your sitemap and set social sharing images.
