Images are usually the heaviest part of a page. Tuning them is the fastest way to improve load time, Core Web Vitals, and the feel of your site.

Use modern formats

Export to WebP or AVIF for most images. Keep JPEG/PNG only if you need transparency or older browser support. Modern formats cut file size without ruining quality.

Resize for reality

Match exports to how the image renders. If the largest desktop slot is 1500px wide, export around 15001800px. Only provide 2x if you truly need retina sharpness.

Compress with intent

Run assets through Squoosh or TinyPNG. Good targets: hero 150250 KB, gallery 60120 KB, thumbnails 2060 KB. Start high quality, then dial down until you see artifactsthen bump it back a notch.

Lazy-load what is below the fold

Add loading=\"lazy\" to every image that is not visible on first paint. Leave the hero eager so it appears instantly.

Set width and height

Always include width and height attributes to prevent layout shift (CLS). Keep CSS responsive with max-width: 100% so images still shrink on small screens.

Deliver with a CDN

Serve images via a CDN that handles caching and compression. If possible, auto-generate size variants so mobile devices are not forced to download desktop-sized assets.

Quick checklist