Image checklist for Core Web Vitals

LCP (Largest Contentful Paint)

• The main image is in the HTML as an <img>, not inserted by JavaScript.
• It has fetchpriority="high" and no loading="lazy".
• If it's a CSS background, it has a <link rel="preload">.
• It's served as AVIF (with a WebP or JPEG fallback in <picture>).
• Its dimensions match the displayed size, with srcset and sizes.

Details in how to improve LCP.

CLS (Cumulative Layout Shift)

• Every image has width and height (or CSS aspect-ratio).
• CSS uses max-width: 100%; height: auto;.
• Ad and embed slots have reserved height.

Total weight

• No image exceeds about 200 KB without good reason.
• Photos use lossy formats; screenshots use lossless WebP or optimized PNG.
• Logos and icons are SVG when possible.
• EXIF metadata has been removed.

Lazy loading

• Images below the first screen use loading="lazy".
• The first 1–4 visible images are not lazy-loaded.

INP (Interaction to Next Paint)

• Carousels and galleries don't decode huge images on interaction.
• Images have decoding="async".

Measurement

• PageSpeed Insights: field and lab data per URL.
• Search Console > Core Web Vitals: issues grouped by template.
• Chrome DevTools > Performance: to debug LCP step by step.

Frequently asked questions

What's the maximum size an image should have?

There's no official number, but 100–200 KB in AVIF or WebP is a reasonable target for a hero image.

Do images affect INP?

Slightly, but decoding very large images during an interaction can block the main thread.