Follow this four-step workflow - crop, resize, convert to WebP and compress - to cut page weight by 75% and pass Core Web Vitals.

The four-step image optimization pipeline

A 95+ PageSpeed score does not require expensive CDN plugins if you prepare assets with a disciplined four-step workflow before publishing.

  • Step 1 - Crop to the aspect ratio: frame the subject cleanly at 16:9, 4:3 or 1:1.
  • Step 2 - Resize to display width: cap heroes at 1920px and content images at 1200px.
  • Step 3 - Convert to next-gen WebP: leverage modern predictive encoding.
  • Step 4 - Fine-tune compression: run the asset at around 80% quality and verify it sits under 150 KB.
Recommended free tool

Start optimizing with the Image Compressor

Process your images locally in seconds with zero server uploads.

Open Tool

HTML attributes that boost rendering speed

Once files are optimized, always include explicit width and height attributes on your img tags so the browser can reserve layout space and avoid Cumulative Layout Shift.

Add fetchpriority high to the above-the-fold LCP hero image and loading lazy to everything below the fold so the critical image is fetched first.