Google's Core Web Vitals are ranking factors. Images directly impact Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS).
LCP Optimization
LCP measures time until largest content element renders—often a hero image. Optimize by: compressing to quality 75-85, using WebP (saves 25-35%), properly sizing images, and preloading critical images.
Preloading Critical Images
Use <link rel="preload" as="image" href="hero.jpg"> to tell browsers to download LCP images immediately. This improves LCP by 200-500ms.
CLS Prevention
Always specify width and height attributes to prevent layout shift as images load: <img src="image.jpg" width="800" height="600">. The browser reserves space before loading.
Never Lazy Load LCP Images
Above-the-fold images must load immediately. Only use loading="lazy" for below-the-fold images. Lazy loading LCP images severely hurts performance.
Monitoring Performance
Use Google Search Console Core Web Vitals report for real user data. Test with PageSpeed Insights. Aim for LCP under 2.5s and CLS under 0.1.