# Image SEO Best Practices: Alt Text, Formats, Speed (2026) > Image SEO best practices for 2026: alt text, file names, WebP/AVIF, compression, srcset, lazy loading, image sitemaps and markup, plus how to audit your site. URL: https://seorecheck.com/blog/image-seo-best-practices · Published: 2026-11-04 · [Українська](https://seorecheck.com/ua/blog/image-seo-best-practices.md), [Español](https://seorecheck.com/es/blog/image-seo-best-practices.md) Image SEO best practices come down to two jobs. First, help Google find and understand your images: use real `` elements, descriptive alt text and file names, and place images next to related text. Second, keep them fast: use modern formats, serve the right size, reserve space, and never lazy-load the main above-the-fold image. Images matter in two ways. They can bring traffic of their own through Google Images and visual results. They are also often the heaviest thing on a page, so they decide whether your pages pass [Core Web Vitals](https://seorecheck.com/blog/core-web-vitals-guide). This guide covers both sides, in the order most sites should fix them. ## How does Google find and understand images? Google finds images through the `src` attribute of HTML `` elements and understands them through the text around them: alt text, file name, captions, nearby headings and the page itself. Images added only as CSS backgrounds are not indexed, so any image you want to rank must be a real `` tag. Google's [image SEO best practices](https://developers.google.com/search/docs/appearance/google-images) state it directly: Google can find images in the `src` attribute of the `` element, but it doesn't index CSS images. This catches a lot of sites out. Hero banners, product photos in sliders and team photos are often set with `background-image` because it's easier to style. They look fine to visitors and are invisible to Google Images. The same page tells you to place images near relevant text and on pages that are relevant to the image's subject. A photo of a walnut dining table on the dining table product page, under the heading and next to the description, has plenty of context. The same photo dropped into a generic "gallery" page with no text has almost none. Two more discovery rules worth knowing: - **Use one URL per image.** Google asks you to consistently reference an image with the same URL so it can cache and reuse it instead of fetching it many times. Cache-busting query strings that change on every deploy work against this. - **Don't hide images behind JavaScript Google can't run.** If a gallery only injects images after a click or a script that fails to render, Google may never see them. Our guide to [JavaScript rendering problems](https://seorecheck.com/blog/javascript-seo-rendering-problems) shows how to check what Googlebot actually renders. ## How do you write alt text for SEO? Good alt text describes what the image shows, in plain words, in the context of the page. Aim for a short phrase or sentence that would make sense read aloud to someone who can't see the image. Use a keyword only when it truly describes the picture, and never stuff a list of keywords into the attribute. Google's guidance gives a clear example: "Dalmatian puppy playing fetch" is good alt text, while an empty attribute, a single word like "puppy", or a string of dog-related keywords is not. Alt text does two jobs at once. It's the main text signal Google uses to understand an image, and it's what screen readers announce, so writing for people also serves search. Practical rules: - **Describe, don't label.** "Oak dining table for six with black metal legs" beats "table" or "product image 3". - **Keep it short.** One sentence is usually enough; long paragraphs belong in the caption or body text. - **Skip "image of" or "photo of".** Screen readers already announce it as an image. - **Leave decorative images empty.** Spacers, dividers and background patterns should use `alt=""` so they're ignored, not given invented descriptions. - **Don't duplicate the caption word for word.** Use the caption for extra context and the alt for what's visible. - **Make linked images describe the destination.** If an image is the only content of a link, its alt text acts as the link's anchor text. ## Do image file names and formats matter? Yes, both matter, though in different ways. A descriptive file name is a small relevance signal; the format mostly affects page speed. Rename camera files before upload, and serve images in a modern format such as WebP or AVIF with a sensible fallback. Google recommends descriptive file names such as `my-new-black-kitten.jpg` rather than `IMG00023.JPG`. Use lowercase words separated by hyphens, describe the subject, and stop there. Renaming won't move rankings on its own, but it's free if you do it at upload time. Changing names on thousands of existing images is rarely worth it unless you're migrating anyway, since every renamed URL has to be re-crawled. For formats, Google Search [supports](https://developers.google.com/search/docs/appearance/google-images) BMP, GIF, JPEG, PNG, WebP, SVG and AVIF. Which one to use: | Format | Best for | Notes | |---|---|---| | AVIF | Photos, large hero images | Usually the smallest files; check your CMS/CDN support | | WebP | Photos and graphics on most sites | Widely supported, good default | | JPEG | Fallback for photos | Use progressive encoding and ~75–85 quality | | PNG | Screenshots, images needing transparency with sharp edges | Often heavy for photos | | SVG | Logos, icons, simple illustrations | Scales without quality loss; tiny files | | GIF | Avoid | Use video (MP4/WebM) for animations instead | Quality still counts. Google notes that high-quality photos appeal to users more than blurry, unclear images. Compress, but stop before artifacts become visible, especially on product photos. ## How do images affect page speed and Core Web Vitals? On many pages the largest visible element is an image, so it often decides your Largest Contentful Paint (good is 2.5 seconds or less). Images without reserved space also cause layout shifts that hurt CLS (good is 0.1 or less). Oversized, unprioritized or wrongly lazy-loaded images are the most common cause of both. Fix them in this order: 1. **Serve the right size.** Don't send a 4000-pixel photo into a 600-pixel slot. Resize on upload or use an image CDN, and offer several widths with `srcset` and `sizes`. 2. **Always set `width` and `height`.** web.dev's [lazy-loading guide](https://web.dev/articles/browser-level-image-lazy-loading) recommends adding `width` and `height` attributes to all `` tags so the browser can reserve space and avoid layout shifts. CSS can still make the image responsive. 3. **Never lazy-load the LCP image.** The same guide says not to lazy-load images likely to be in the viewport when the page loads, especially LCP images, because the browser can't start loading them until it knows where they sit on the page. 4. **Lazy-load everything below the fold** with the native `loading="lazy"` attribute instead of a heavy script. 5. **Prioritize the hero image.** web.dev's [Fetch Priority article](https://web.dev/articles/fetch-priority) explains that images normally start at low priority and that marking an important image with `fetchpriority="high"` lets it load at high priority straight away; its Google Flights example cut LCP from 2.6 s to 1.9 s. Treat it as a hint for one or two critical images, not every image. A hero image that follows all five rules looks like this: ```html Oak dining table for six with black metal legs ``` Note the `src` fallback. Google's guidance asks you to always specify a fallback URL in `src` when you use `srcset` or ``, so every crawler and browser can load something. Mobile matters most here, because Google indexes the mobile version of your pages. If your mobile template swaps images out or hides them, see our [mobile-first indexing checklist](https://seorecheck.com/blog/mobile-first-indexing-best-practices). ## Do you need an image sitemap? An image sitemap is optional. It helps when Google might not find images through normal crawling, for example when they load through JavaScript or live on a CDN domain. For most sites with plain `` tags in HTML, a regular XML sitemap plus crawlable pages is enough. If you do use one, keep it simple. Google's [image sitemap documentation](https://developers.google.com/search/docs/crawling-indexing/sitemaps/image-sitemaps) now supports only two tags: `` and ``. The old ``, ``, `` and `` tags are deprecated, so adding them does nothing. Images may be hosted on another domain such as a CDN, as long as you verify both domains in Search Console. You can add image entries to your existing page sitemap rather than creating a separate file. Our [XML sitemap guide](https://seorecheck.com/blog/xml-sitemap-seo-guide) covers what else belongs in it. ## Which structured data and meta tags help images? Structured data and Open Graph tags tell Google which image best represents a page. That image can then appear in rich results, Discover and social shares. For product, recipe and article pages, the `image` property is often required for rich result features, so missing it can cost you visibility. Google's image guidance mentions the schema.org `primaryImageOfPage` property and the `og:image` meta tag as ways to state your preferred image, and notes that the `image` attribute is a required field for rich result badges. In practice: - **Product, Article, Recipe markup:** include `image` with full, crawlable URLs, ideally in several aspect ratios. - **`og:image`:** set it on every important page; it's used by social platforms and can guide Google's thumbnail choice. - **Discover:** Google's [Discover documentation](https://developers.google.com/search/docs/appearance/google-discover) recommends large images at least 1200 px wide, with more than 300,000 total pixels, enabled by the `max-image-preview:large` robots setting (or AMP). Without that setting, your articles may only get a small thumbnail. Check that the robots meta tag on your pages doesn't restrict image previews by accident. A `max-image-preview:none` or `noimageindex` left over from a staging template will quietly remove your images from results. Also make sure robots.txt doesn't block your image folder or CDN; our [robots.txt guide](https://seorecheck.com/blog/robots-txt-seo-guide) shows how to test that. ## How do you find image SEO problems on your site? Combine a crawler with Lighthouse and Search Console. The crawler finds missing alt text, broken image URLs, CSS-only images and oversized files across every page. Lighthouse shows which image is the LCP element and whether it's lazy-loaded or oversized. Search Console shows Image search traffic and Core Web Vitals by page group. A quick audit routine: 1. **Search Console → Performance → Search type: Image.** See which pages already earn image clicks, and which important pages earn none. 2. **Crawl the site** and export images with empty or missing `alt`, very large file sizes, broken (4xx/5xx) image URLs and images without `width`/`height`. 3. **Run Lighthouse on key templates** (home, category, product, article). Look for "Largest Contentful Paint image was lazily loaded", "Properly size images" and "Serve images in next-gen formats". 4. **Check rendered HTML** on JavaScript-heavy templates to confirm images appear as `` elements after rendering. 5. **Validate structured data** on product and article pages to confirm `image` is present and the URL loads. If you'd rather not stitch these tools together, a [free SEORecheck audit](https://seorecheck.com/request) crawls your pages, flags missing alt text and broken images, and uses Lighthouse in a real browser to show which images slow your LCP, with example URLs from your own site. You can see what that looks like in the [sample report](https://seorecheck.com/sample). ## What should you fix first? Fix what blocks visibility and speed on your most valuable pages first, then work through site-wide hygiene. A lazy-loaded hero image on your top product template costs more than a thousand blog images with imperfect file names. | Priority | Issue | Why | |---|---|---| | High | LCP image lazy-loaded or oversized on key templates | Directly hurts LCP for every page using the template | | High | Important images only in CSS or JS-injected | Not indexed in Google Images | | High | Images blocked by robots.txt or `noimageindex` | Removed from image results entirely | | Medium | Missing `width`/`height` | Layout shifts, worse CLS | | Medium | Missing alt text on content images | Lost relevance and accessibility | | Medium | Missing `image` in Product/Article markup | Lost rich result eligibility | | Low | Camera-style file names on old images | Small signal; fix going forward | For a wider method of ranking fixes by impact and effort, see [how to prioritize SEO fixes](https://seorecheck.com/blog/how-to-prioritize-seo-fixes). ## Key takeaways - Use real `` elements; Google doesn't index CSS background images. - Write short, descriptive alt text for people first; use `alt=""` for decorative images. - Name files descriptively at upload and prefer WebP or AVIF, with a `src` fallback for `srcset`. - Set `width` and `height` on every image, lazy-load below the fold, and never lazy-load the LCP image. - Image sitemaps only need ``; the caption, title, [geo](https://seorecheck.com/blog/generative-engine-optimization-geo) and license tags are deprecated. - Add `image` to structured data and `og:image`, and allow `max-image-preview:large` for Discover. - Start with the templates that drive revenue, not with renaming old files. --- ## Want to know what to fix on your site? Get a free SEO audit preview: your score and real issues, with evidence from your pages. - [Get a free SEO audit preview](https://seorecheck.com/request) - [See a sample report](https://seorecheck.com/sample)