← All posts

Optimize Images for Core Web Vitals

TinyForge Blog · Image optimization guides

Google's Core Web Vitals (LCP, CLS, INP) are ranking factors. Images are the #1 cause of poor scores. Here's how to fix each.

LCP (Largest Contentful Paint)

LCP is usually your hero image. To improve it:

• Compress and convert to WebP/AVIF.
• Resize to display dimensions (no 4000px heroes).
• Add fetchpriority="high" to the hero image.
• Preload it: <link rel="preload" as="image" href="hero.webp">.
• Serve from a CDN with long cache headers.
• Do NOT lazy-load the LCP image.

CLS (Cumulative Layout Shift)

Images without dimensions cause layout shift. Always set width and height attributes, or use CSS aspect-ratio.

INP (Interaction to Next Paint)

Heavy images can block the main thread during decode. Use decoding="async" on images and avoid massive files.

Compress your images with TinyForge — free, in-browser, no uploads.