Image Optimization for SEO: Mastering Core Web Vitals (LCP, CLS & INP)

# Image Optimization for SEO: Mastering Core Web Vitals (LCP, CLS & INP) Search engine optimization is no longer just about keywords and backlinks. Google's page experience signals and **Core Web Vitals** directly influence your organic rankings. Unoptimized visual media is the primary culprit behind poor performance scores. --- ## 1. Largest Contentful Paint (LCP) Optimization **LCP** measures the time it takes to render the largest visible element on the viewport (often a hero image or banner). A good LCP score is **under 2.5 seconds**. ### Strategies to Fix Image LCP: 1. **Compress and Convert**: Convert hero images to WebP or AVIF and compress to under 150 KB using [Lumino Image Compressor](/en/compress-image). 2. **Preload Critical Hero Images**: Inform the browser to download the hero image immediately: ```html <link rel="preload" as="image" href="/hero.webp" fetchpriority="high"> ``` 3. **Never Lazy-Load the Hero Image**: Adding `loading="lazy"` to your above-the-fold hero image delays rendering and destroys your LCP score. --- ## 2. Cumulative Layout Shift (CLS) Optimization **CLS** measures unexpected visual movement while the page is loading. When an image loads without dimensions, content jumps down. ### The Solution: Always declare explicit `width` and `height` HTML attributes, or use CSS `aspect-ratio`: ```html <img src="photo.webp" width="800" height="600" alt="Optimized Image" style="aspect-ratio: 4/3; width: 100%; height: auto;"> ``` --- ## 3. SEO Image Metadata Checklist * **Descriptive File Names**: Use `blue-vintage-leather-jacket.webp` instead of `IMG_89412.jpg`. * **Accessible Alt Text**: Provide accurate, concise descriptions for screen readers and search crawlers. * **Structured Data**: Include Schema.org `ImageObject` markup for rich search results.