Shrink Images for Faster Websites: A Core Web Vitals Guide

Images are the heaviest asset on most websites — often 60-80% of page weight — and unoptimized heroes are the top cause of failing Largest Contentful Paint scores. Since page speed feeds both rankings and conversions, image optimization pays twice.

The resize-then-compress workflow

1. Resize to display size first. Serving a 4000px photo in an 800px slot wastes ~90% of its bytes. Heroes: 1600px. Blog images: 800px. Thumbnails: rendered size.
2. Compress second. Run the result through a free image compressor at 70-80% quality and check the live size estimate.
3. Consider WEBP. Convert with a JPG to WebP converter for another 25-35% saving at the same visual quality.

Export settings that actually work

Use case	Size	Format & quality	Target weight
Hero banner	1600px wide	WEBP 75% / JPG 80%	Under 300 KB
Blog image	800px wide	WEBP 70% / JPG 75%	Under 150 KB
Thumbnail	Rendered size	WEBP 65%	Under 50 KB
Logo / icon	Exact pixels	PNG or SVG	Under 30 KB

Measure before and after

Run PageSpeed Insights on the URL first and note the LCP element — if it is an image, that file is your target. Optimize it, redeploy, and re-test: a single hero fix commonly lifts performance scores 20-40 points. Repeat for your top-trafficked templates before touching the long tail of old posts.

Mistakes that undo the work

• Compressing before resizing: optimizing a 4000px file you then display at 800px wastes the effort — order matters.
• PNG for photographs: 10-30x heavier than JPG with zero visible benefit on photos.
• CMS auto-compression reliance: platform recompression on top of huge uploads produces artifacts; upload pre-optimized files instead.