` for inline SVG alt | | **GIF** | Simple animation | First frame only for preview | ### Responsive Images Use `<picture>` or `srcset` for different screen sizes. **Always provide fallback `src`**—some crawlers don't understand srcset. ```html <img srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="image-800w.jpg" alt="Descriptive alt text"> ``` **Picture element** (format fallback, e.g. WebP → PNG): ```html <picture> <source type="image/webp" srcset="image.webp"> <img src="image.png" alt="Descriptive alt text"> </picture> ``` ### Data URI (Inline Images) Base64 data URIs (`data:image/...;base64,...`) reduce HTTP requests but increase HTML size. Use sparingly for small icons; avoid for large images. See [web.dev](https://web.dev/articles/embedding-images-and-video#data_uris). ### Resize & Compress - **Max width**: Generally ≤2,500px; match container max-width - **Compression**: WebP preferred; quality 75–85 for lossy; 72dpi for web - **LCP**: Hero/above-fold images are LCP candidates; optimize aggressively ### Lazy Loading Use `loading="lazy"` **only for below-fold images**. Above-fold images (hero) must load immediately—lazy loading them hurts LCP. ```html <img src="hero.jpg" alt="..." loading="eager"> <img src="below-fold.jpg" alt="..." loading="lazy"> ``` --- ## 3. Alt Text Alt text improves **accessibility** (screen readers, low bandwidth) and **SEO** (Google uses it with computer vision to understand images). It also serves as anchor text if the image is a link. ### Best Practices | Do | Don't | |----|-------| | Useful, information-rich description | Keyword stuffing | | Context of page content | "image of" or "photo of" (redundant) | | Max ~125 characters (some assistive tech truncates) | Empty alt on meaningful images | | Descriptive for functional images | Alt on purely decorative images (use `alt=""`) | **Examples** (from Google): - ❌ Missing: `<img src="puppy.jpg"/>` - ❌ Stuffing: `alt="puppy dog baby dog pup pups puppies..."` - ✅ Better: `alt="puppy"` - ✅ Best: `alt="Dalmatian puppy playing fetch"` ### Captions Google extracts image context from captions and nearby text. Use `<figcaption>` or descriptive text near the image. | Use | Purpose | |-----|---------| | **Topic relevance** | Caption describes image subject; supports indexing | | **Featured Snippets** | Images near answers with captions can capture thumbnail slots; see **featured-snippet** | | **Image Pack** | Alt + caption + file name help Image Pack display; see **serp-features** | ### Inline SVG Use `<title>` inside SVG for accessibility: ```html <svg aria-labelledby="svgtitle1"> <title id="svgtitle1">Descriptive text for the SVG

--- name: image-optimization description: When the user wants to optimize images for search engines and performance. Also use when the user mentions "image SEO," "alt text," "image captions," "figcaption," "image optimization," "WebP," "lazy loading," "LCP," "image sitemap," "responsive images," "srcset," "image format," or "hero image optimization." For CWV, use core-web-vitals. metadata: version: 1.2.1 --- # SEO On-Page: Image Optimization Guides image optimization for Google Search (text results, Image Pack, Google Images, Discover), Core Web Vitals (LCP), and accessibility. Consolidates image-related best practices from components (hero, trust-badges) and pages (landing-page). References: [Google Image SEO](https://developers.google.com/search/docs/appearance/google-images), [Semrush Image SEO](https://www.semrush.com/blog/image-seo/). **When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output. ## Scope - **Discovery & indexing**: HTML img elements, image sitemap - **Format & performance**: WebP, responsive images, lazy loading, LCP; full CWV optimization in **core-web-vitals** - **Metadata**: Alt text, file names, captions - **Preferred image**: primaryImageOfPage, og:image; thumbnail next to title/description in search results - **Structured data**: ImageObject, image in Article/Product/etc. ## Initial Assessment **Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for brand and page context. Identify: 1. **Context**: Hero, content page, product, trust badge, social preview 2. **Above vs below fold**: LCP candidate (hero) vs lazy-loadable 3. **Image count**: Single hero vs gallery, programmatic pages --- ## 1. Discovery & Indexing ### Use HTML Image Elements Google finds images in the `src` attribute of `` (including inside `

image-optimization

Description

Latest Changes

Install image-optimization with One Click