Optimizing web images: complete guide

Images are often the heaviest assets on a page – but they are also essential for storytelling, branding and conversion.

Optimising them is one of the fastest ways to improve performance, Core Web Vitals and SEO.

Choose the right formats

• Use WebP or AVIF for most photos and illustrations
• Use SVG for logos and simple icons
• Only keep JPEG/PNG for specific cases where needed

Compress and resize

• Avoid uploading 4000px‑wide images if they are displayed at 800px
• Use compression tools or pipelines to reduce file size
• In Next.js, the 'next/image' component helps automate this process

Lazy‑load non‑critical images

• Load above‑the‑fold images immediately
• Defer others until they enter the viewport

Don’t forget SEO and accessibility

• Add descriptive 'alt' attributes
• Use filenames and surrounding text that match the page topic

In my client projects, image optimisation is built into the workflow so you don’t have to think about it for every upload.
You can see the result in my portfolio and templates.

Further reading

• Core Web Vitals: complete guide
• Responsive design: complete guide
• Understanding SEO: complete guide
• Web animations: performance and UX