--- name: image-seo description: Audit and fix a page's images for search, speed and accessibility. Covers alt text, filenames, WebP/AVIF, sizes and srcset, lazy loading, the LCP image, image sitemaps, og:image and licence metadata. Use for "write alt text", "optimize my images", "images not in Google Images", "LCP is my hero image", "properly size images". license: MIT metadata: author: RomeoSEO version: "3.0.0" homepage: https://romeoseo.com/skills/image-seo --- # Image SEO Review every image on a page or template for the three jobs images do in search: being understood (alt text, context, filenames), being found (indexable markup, sitemaps, social previews) and not slowing the page down (format, size, loading). You hand back per-image fixes with priorities and an alt-text batch the user can paste straight into their CMS. > **Romeo's rule:** Every image is content, decoration or a button; write its alt text for the job it does, not for the keyword you wish it ranked for. ## Use this when - Someone asks to "write alt text", "optimize images" or "compress images" for a page, a blog or a product catalogue. - PageSpeed Insights flags image audits ("Improve image delivery", "Properly size images", "Image elements do not have explicit width and height") or names an image as the LCP element. - The site's images don't appear in Google Images, or image search traffic dropped after a redesign or CDN change. - Shared links show the wrong image, a cropped logo or no preview on LinkedIn, Slack, WhatsApp or X. - A shop's product photos need a consistent standard before a catalogue launch. - A photographer, illustrator or publisher wants credit and licensing information shown in Google Images. ## Don't use this for - Page speed problems beyond images (JavaScript, fonts, server response, third-party tags) → `technical-seo-audit`. - Product feeds, Merchant Center image disapprovals and category-page structure → `ecommerce-seo-audit`. - A full structured data graph for the page (images are only one property) → `schema-markup`. - Reviewing the whole page against its target query → `on-page-seo-review`. ## What you need ### Required - The page URL(s) or HTML, and for each page the topic or target query (alt text depends on context). - For the alt-text batch: the list of images (file URL plus where it appears) or the images themselves, so you can see what they show. ### Helpful - A crawler export with image data (for example Screaming Frog's Images tab: source, alt, file size, dimensions, inlinks). - PageSpeed Insights or Lighthouse results for mobile, including the LCP element, and Chrome UX Report field data. - Search Console Performance with search type "Image", to see which images already earn traffic before renaming anything. - The CMS and image pipeline: WordPress media library, Shopify, Next.js ``, an image CDN (Cloudflare, Cloudinary, imgix) and its settings. - Original image files, if licence metadata or product photo standards are in scope. ### No tools? Open the page in Chrome, then DevTools → Network → filter "Img" to see each image's format, transferred size and dimensions. In the Console, this one line lists every `` with what you need: `console.table([...document.images].map(i=>({src:i.currentSrc,alt:i.getAttribute('alt'),natural:i.naturalWidth+'x'+i.naturalHeight,shown:i.clientWidth+'x'+i.clientHeight,loading:i.loading,priority:i.fetchPriority,w:i.getAttribute('width'),h:i.getAttribute('height')})))`. PageSpeed Insights names the LCP element for free. Facebook's Sharing Debugger and LinkedIn's Post Inspector show the social preview. If you can only see view-source, review the `` tags and `og:` meta tags and mark everything else "not checked". ## Ground rules - Alt text follows the image's job. Content image: describe what it shows that matters in this context. Decorative image: `alt=""` (empty, not missing; with no alt at all, many screen readers read out the filename). Linked or button image: describe the destination or action ("Download the 2026 price list"), not the picture. Image of text: the alt contains the text. Chart: a short alt plus the numbers in nearby text or a table. - Write alt text for people first. The query goes in only when it honestly describes the image. Keyword-stuffed alt text is an accessibility failure, and Google's image guidelines warn it can be seen as spam. - Google indexes images from `` (including inside ``), not CSS backgrounds. Anything that should appear in image search, or that is the page's main image, goes in ``. CSS backgrounds are fine for decoration. - Never lazy-load the LCP image. Give it `fetchpriority="high"`, a plain `src` in the HTML, and no carousel or JavaScript between it and the browser. - Every `` gets `width` and `height` attributes (or a CSS `aspect-ratio`) so the browser reserves space. Image-driven layout shift is the cheapest CLS fix there is. - Dimensions usually save more bytes than formats. A 4000 px photo shown at 800 px is wrong in any format. - Don't rename or move images that already earn image search traffic unless you redirect the old URLs; filename fixes are for new uploads. - Original images (your screenshots, products, team, data charts) are worth more than stock photos that appear on hundreds of other sites. - Keep one URL per image. Google asks for the same image URL wherever the image is reused so it can be cached; random cache-busting query strings or per-page copies waste crawl and browser cache. ## Steps 1. **Inventory.** For every image on the page or template, record: file URL, format, transferred bytes, natural size, displayed size at a 390 px phone width and a 1366 px desktop width, `alt`, `loading`, `fetchpriority`, `width` / `height`, whether it's inside a link, whether it's `` or a CSS background, its caption, and its job (content, decorative, functional, text, chart). 2. **Find the LCP image.** Use PageSpeed Insights (mobile) "Largest Contentful Paint element", or the Performance panel. - If it's an image: no `loading="lazy"`, has `fetchpriority="high"`, is in the initial HTML (not `data-src` swapped in by script, not a CSS background), served at the right size for mobile. - If it's a CSS background or injected late, add `` (with `imagesrcset` / `imagesizes` for responsive images) or move it into an ``. - `loading="lazy"` on the LCP image = `Fix now` when field LCP is over 2.5 s, otherwise `Fix next`. Lazy loading on other images likely in the first mobile viewport = `Fix next`. 3. **Alt text.** Classify each image and check it. - Missing `alt` on content images = `Fix next` (accessibility and missed context). Filename or camera alt ("IMG_2034", "image", "photo") = `Fix next`. - Same alt on every product photo, or the query pasted into every alt = `Fix next`. - Alt on decorative icons and dividers ("icon", "arrow") = `Worth doing`: set `alt=""`. - A linked image with empty alt and no text in the link means the link has no accessible name = `Fix next`. - Length: say what matters and stop. Most good alts are one short sentence; if it needs a paragraph, put that in a caption or the body text. 4. **Filenames.** Descriptive, lowercase, hyphenated: `IMG_2034.jpg` → `grey-cat-asleep-on-laptop.jpg`. Localise for localised pages. Set the rule for future uploads (`Worth doing`); leave old filenames alone (`Leave it`) unless the image earns no traffic and is being replaced anyway. 5. **Format and compression.** Google Search supports BMP, GIF, JPEG, PNG, WebP, SVG and AVIF. - Photos: AVIF or WebP, with a JPEG fallback through `` or CDN content negotiation (`Accept` header, with `Vary: Accept`). Current major browsers support both; keep the fallback for older devices, email and some crawlers. - Screenshots and flat graphics: WebP (lossless if text looks soft), or PNG when transparency is needed. Logos and icons: SVG (sanitised, with `` when inline and meaningful). - Animated GIFs over about 1 MB: convert to MP4 or WebM in `<video autoplay muted loop playsinline>`. - Working byte targets at the displayed size (judgement, not a Google rule): hero or LCP image under roughly 150 to 200 KB on mobile, in-content images under about 100 KB, thumbnails under about 30 KB. Over 500 KB on a key template = `Fix next`; over 1 MB = `Fix now`. Start around quality 50 to 60 for AVIF, 75 to 80 for WebP and JPEG, then check by eye. 6. **Dimensions and responsive images.** Natural width should be no more than about 2× the largest displayed width. - Use `srcset` with width descriptors (for example 480w, 800w, 1200w, 1600w) and a `sizes` value that matches the layout. A common bug: `sizes="100vw"` on an image shown at a third of the screen makes phones and desktops download roughly 3× the bytes they need. - Pattern for a below-the-fold content image: ```html <picture> <source type="image/avif" srcset="/img/audit-report-800.avif 800w, /img/audit-report-1600.avif 1600w" sizes="(min-width: 960px) 720px, 100vw"> <source type="image/webp" srcset="/img/audit-report-800.webp 800w, /img/audit-report-1600.webp 1600w" sizes="(min-width: 960px) 720px, 100vw"> <img src="/img/audit-report-800.jpg" srcset="/img/audit-report-800.jpg 800w, /img/audit-report-1600.jpg 1600w" sizes="(min-width: 960px) 720px, 100vw" width="1600" height="900" alt="SEO audit report listing three crawl errors, each marked Fix now" loading="lazy" decoding="async"> </picture> ``` - For the LCP image use the same markup without `loading="lazy"` and with `fetchpriority="high"` on the `<img>`. 7. **Layout shift.** Every `<img>` has `width` and `height` matching its aspect ratio, with CSS `max-width: 100%; height: auto;`. Missing dimensions on above-the-fold images = `Fix next`; elsewhere `Worth doing`. Check field CLS ≤ 0.1 at the 75th percentile. 8. **Lazy loading and discovery.** Native `loading="lazy"` for images below the fold. Script-based lazy loaders that leave a placeholder in `src` and the real URL in `data-src` are a discovery risk: check URL Inspection's crawled HTML shows the real image URLs. If not, switch to native lazy loading = `Fix next`. 9. **Indexability.** Image URLs return 200, aren't blocked in robots.txt (check the CDN host's own robots.txt too), carry no `X-Robots-Tag: noindex` and don't need cookies. A page-level `noimageindex` keeps its images out. Verify a separate image CDN host in Search Console to see its crawl errors. WordPress attachment pages (one thin page per image) should redirect to the file or parent post; WordPress 6.4+ turns them off on new installs, but older sites and some plugins still expose them. 10. **Context.** Put images next to the text they illustrate, under a relevant heading. Captions help readers where an image needs explaining; don't add them only for SEO. The page title, heading and surrounding text all feed how Google understands the image. 11. **Image sitemap (only where it helps).** Useful when images load via JavaScript, live on a CDN host, or image search matters to the business (photography, recipes, products, property). Only `<image:image>` and `<image:loc>` are supported; caption, title, geo_location and licence tags were deprecated in 2022. Up to 1,000 images per `<url>`. A typical blog with images in plain HTML doesn't need one (`Leave it`). 12. **Preferred image and social previews.** - `og:image`: absolute URL, at least 1200 px wide, 1.91:1 (1200×630 is the safe default), JPEG or PNG for the widest platform support, plus `og:image:alt`. Add `twitter:card` = `summary_large_image`. Missing or the logo on key pages = `Fix next`. - Allow large previews with `<meta name="robots" content="max-image-preview:large">`. Google Discover wants images at least 1200 px wide, over 300,000 pixels, ideally 16:9, and not a logo or text-heavy graphic. - To suggest the page's main image to Google, use `og:image`, schema.org `primaryImageOfPage`, or the `image` of the page's main entity. Pick a representative image; avoid logos, text-heavy images and extreme aspect ratios. 13. **CDN and caching.** Fingerprinted image URLs served with `Cache-Control: public, max-age=31536000, immutable`. One canonical URL per image and size, with no session or tracking parameters. Check the CDN's automatic format conversion actually serves AVIF or WebP (look at the response `content-type`, not the file extension). 14. **Licensing metadata (when credit or licensing matters).** Embed IPTC fields once per file: Creator, Credit Line, Copyright Notice, Web Statement of Rights (required for the "Licensable" badge in Google Images) and Licensor URL. Or use `ImageObject` structured data on each page: `contentUrl` plus `license`, `acquireLicensePage`, `creditText`, `creator`, `copyrightNotice`. If both exist and disagree, Google uses the structured data. Many CMSs and CDNs strip metadata when compressing; check a served file still carries it. For AI-generated images, the IPTC Digital Source Type value `trainedAlgorithmicMedia` declares it. 15. **Product images (shops).** Several images per product: a clean main shot on a plain background with no watermark, promotional text or borders (Merchant Center rejects those for the main image; check its current image requirements), then angles, scale, detail and in-use shots. High resolution so zoom works. Each variant (colour, finish) gets its own images and alt text naming the variant. The same main image in the `Product` `image` property, the page and the feed. Category thumbnails are real `<img>` elements with alt text naming the product. ## What to hand back Per-image fixes first, then the alt-text batch. ```markdown # Image review: <page or template> (<date>) **What I found:** <one plain-English sentence> **What matters most:** <one sentence> **What to do first:** <one sentence> ## Page-level findings - LCP element: <image file or "text"> · lazy-loaded: yes / no · fetchpriority: <value> · field LCP: <value or "not checked"> - Total image bytes on mobile: <KB> across <n> images · largest: <file, KB> - og:image: <URL, size> or "missing" · max-image-preview: <value> ## Fixes (priority order) ### 1. <file name> · `Fix now` - Problem: <plain English, then the term in brackets> - Evidence: <bytes, dimensions, attribute seen> · seen / tool / inferred · confidence: high / medium / low - Fix: <exact change, e.g. remove loading="lazy", add fetchpriority="high", export at 1200 px AVIF q55> - Markup: <before → after snippet when the HTML changes> ## Alt-text batch (paste into the CMS) - <file URL> | content | "<current alt or MISSING>" → "<new alt>" - <file URL> | decorative | "<current alt>" → "" (empty) - <file URL> | link to <destination> | "<current alt>" → "<action or destination>" ## Leave it - <thing>: <why it isn't worth changing> ## What I could not check - <item>: <what would verify it> ``` ## Stop and flag if - You can't see an image you're asked to write alt text for. Don't guess from the filename; ask for the image or a description, or mark that line "needs a look". - An alt-text request is really "put our keyword in every alt". Explain why it hurts and write honest alts instead. - A fix means renaming, moving or re-compressing images that already earn image search traffic. Flag the traffic risk and propose redirects first. - Changes need edits to the live theme, CDN, robots.txt or media library. Draft them; apply nothing without explicit permission for that change. - Output with generic advice ("compress your images", "add alt text") instead of named files, exact attribute changes and pasteable alts is not acceptable. ## Next step - LCP still slow after the image fixes → `technical-seo-audit` with the PageSpeed Insights report and the LCP breakdown. - Product images feed a shop → `ecommerce-seo-audit`, passing the product image standard you set here. - Images fixed as part of a page refresh → `on-page-seo-review` on the same URL and target query. --- Part of the free RomeoSEO skill library: https://romeoseo.com/skills