Optimize Images for Core Web Vitals: Pass Google's Speed Test

# Optimize Images for Core Web Vitals Google's Core Web Vitals are now ranking factors. Images are the #1 cause of poor scores. Here's how to fix them. ## What Are Core Web Vitals? Three metrics measure user experience: ### LCP (Largest Contentful Paint) - **Target**: Under 2.5 seconds - **Image impact**: Hero images often cause slow LCP - **Fix**: Preload hero image, use optimal format ### CLS (Cumulative Layout Shift) - **Target**: Under 0.1 - **Image impact**: Images without dimensions cause layout jumps - **Fix**: Always set width and height attributes ### INP (Interaction to Next Paint) - **Target**: Under 200ms - **Image impact**: Heavy processing blocks main thread - **Fix**: Use Web Workers for image processing ## Image Optimization Checklist ### 1. Use Modern Formats ```html ``` ### 2. Set Dimensions Always include width and height to prevent CLS: ```html ``` ### 3. Lazy Load Below Fold ```html ``` ### 4. Preload Critical Images ```html ``` ### 5. Responsive Images ```html ``` ## Before and After | Metric | Before | After | |--------|--------|-------| | LCP | 4.2s | 1.8s | | CLS | 0.25 | 0.02 | | Page size | 8.4 MB | 1.2 MB | ## Free Optimization Tools 1. **AmberPic Compressor**: Reduce file sizes by 80% 2. **AmberPic Converter**: Generate WebP/AVIF formats 3. **AmberPic Resizer**: Create responsive image sets All tools run in your browser — no upload, no privacy risk. ## Test Your Site - [PageSpeed Insights](https://pagespeed.web.dev) - [WebPageTest](https://webpagetest.org) - Chrome DevTools → Lighthouse ## Bottom Line Optimizing images is the highest-impact, lowest-effort improvement for Core Web Vitals. Start with format conversion and compression.