Images are both traffic and a bottleneck at once. On one hand, image search (Google Images and Yandex Images) brings real visitors, especially in e-commerce, recipes, real estate and DIY. On the other, unoptimized images are most often the very reason LCP slides into the red and a site sinks in Core Web Vitals. Proper image optimization solves both at once: it speeds up the page and opens an extra organic traffic channel. This guide covers it all — alt text, formats, compression, responsive delivery, lazy loading and markup.
Alt text: an image's key SEO attribute
The alt attribute describes an image's content in text. It does three jobs: it helps blind users (screen readers read alt aloud), it shows when the image fails to load, and it tells the engine what is in the image — the main ranking factor in image search. Good alt is a short, accurate description of what is actually in the picture, with a natural keyword where it fits. Bad alt is either empty or keyword-stuffed like "buy sofa cheap moscow corner sofa sofa".
- Describe the substance: alt="grey velvet corner sofa in a living-room setting", not alt="img_1234".
- One keyword naturally — yes; a comma-separated keyword list — no (that is stuffing).
- Decorative images (icons, dividers) get an empty alt="" so screen readers skip them.
- Do not start with "image of …" or "picture of …" — it is obvious and wastes space.
File names and formats: WebP, AVIF, JPEG
The file name is a weak but free signal. grey-corner-sofa.webp is clearer to the engine than DSC00451.jpg. Use Latin letters, hyphen-separated words, no spaces. Far more important is the format. Modern WebP and AVIF compress 25–50% better than JPEG/PNG at the same quality — a direct load speedup and LCP improvement. WebP is supported by every current browser; AVIF compresses even better but encodes slower. WebP also handles transparency (instead of PNG). Keep PNG only for screenshots with sharp edges and text, and JPEG as a fallback for old browsers via the picture tag.
Compression and responsive images (srcset)
The main mistake is serving one giant image to both desktop and phone. A 3000×2000 image shown in a 400px container is megabytes wasted and a ruined mobile LCP. The fix is the srcset and sizes attributes: you prepare several sizes of one image and the browser picks the right one for the screen and pixel density. Plus sane compression: at quality 75–85 a photo is practically indistinguishable from the original but weighs a fraction. Run every image through compression — it is the cheapest way to improve site speed.
Lazy loading — but not for the LCP image
Lazy loading (loading="lazy") defers downloading images below the fold until the user scrolls to them. It saves bandwidth and speeds up first paint — great for long pages and product cards in a feed. But a critical caveat: NEVER put lazy on the main above-the-fold image (the hero, usually the LCP element). Lazy-loading the LCP image delays its appearance and wrecks the metric. The rule: everything above the fold loads immediately (you can even add fetchpriority="high"), everything below is lazy.
Dimensions, CLS and preventing layout shift
If an img tag has no width and height (or CSS aspect-ratio), the browser does not know how much space the image will take and the layout "jumps" as it loads — hurting CLS (layout stability), one of the three Core Web Vitals. Always set width and height attributes matching the real proportions — the browser reserves the space in advance and content does not shift. It is a trivial fix that often fully eliminates a page's CLS problem.
Image sitemaps and structured data
To make sure the engine finds and indexes your images, help it. Add images to the sitemap (via the image:image extension in the XML sitemap or a separate image sitemap) — especially if images load via JavaScript and the crawler might miss them. For products, recipes and articles, add schema.org structured data (Product, Recipe, Article) with an image field — this raises the chance of a rich snippet with a picture and helps Google tie the image to the page. Yandex Images has no dedicated image markup, but quality alt text, the context around the image and sitemap presence all aid indexing.
Yandex Images specifics
Yandex Images is a notable, often underrated traffic source in the Russian market. When ranking images Yandex relies on the img alt and title, the text around the image (caption, nearest heading), the file name, and the overall quality and topical relevance of the page. It is important not to block the images folder in robots.txt (a common accidental mistake that zeroes out image traffic) and not to serve different images to the crawler and the user. If you want Yandex Images traffic, give meaningful alt text, surround images with relevant text, and keep server response fast.
Image optimization checklist
- Meaningful alt on all meaningful images; empty alt="" on decorative ones.
- WebP/AVIF format with a JPEG fallback via picture; quality 75–85.
- Responsive srcset/sizes — the browser takes the right size for the screen.
- Lazy loading for everything below the fold; hero/LCP without lazy, with priority.
- width and height (or aspect-ratio) set — no CLS jumps.
- Images in the sitemap, the images folder is not blocked in robots.txt.
- Structured data with an image field for products/articles/recipes.
Image optimization is a rare case in SEO where one action improves two metrics at once: speed (Core Web Vitals) and visibility in image search. Start with the heaviest — convert your hero and product photos to WebP and check LCP. Site Metrics Tool tracks Core Web Vitals (including LCP) from real users and the technical state of the site in one dashboard across Google and Yandex — so you see the effect of image optimization immediately.
Frequently asked
Which image format is better for SEO — WebP or JPEG?
WebP. At the same visual quality it weighs 25–35% less than JPEG, which directly speeds up loading and improves LCP. Every modern browser supports WebP; add a JPEG fallback via the picture tag for very old ones. AVIF compresses even more but encodes slower.
Is alt text required for every image?
For meaningful images — yes: it is both accessibility and an image-search ranking factor. For purely decorative ones (icons, dividers) use an empty alt="" so screen readers skip them. A missing alt attribute entirely is a mistake.
Can I put lazy loading on all images?
No. Lazy loading is for below-the-fold images. The main above-the-fold image (often the LCP element) must load immediately, otherwise you delay its appearance and worsen LCP. Hero without lazy, everything else with lazy.
Why are my images not showing in Yandex Images?
The most common reasons: the images folder is blocked in robots.txt; images lack meaningful alt and surrounding text; images load via JS and the crawler does not see them; the site is slow. Check robots.txt, add alt text and images to the sitemap, and speed up delivery.
How do images affect Core Web Vitals?
Heavily. A heavy hero image is the most common cause of poor LCP. Images without set dimensions cause layout shifts and hurt CLS. Optimization (WebP, compression, srcset, dimensions, correct lazy loading) improves both metrics at once.