Complete Guide to Image Optimization for Web

Image optimisation is the practice of reducing image file sizes and improving their delivery without degrading the perceived visual quality for website visitors. Done correctly, it can improve your page load time by 50–80%, significantly boost your Core Web Vitals scores, improve search rankings, and create a better experience for every visitor — especially those on mobile connections.

1. Choose the Right Format

Format selection is the foundation of image optimisation. In 2025: use SVG for logos, icons, and vector illustrations; use WebP for everything else (photographs, screenshots, graphics). WebP is 25–35% smaller than JPG at equivalent quality and fully supports transparency — replacing both JPG and PNG for most use cases. AVIF offers even better compression but has slightly lower browser support.

2. Resize to Actual Display Dimensions

Serving a 4000×3000px image when it's displayed at 800px wide makes the browser download 25× more data than needed. Always resize images to the maximum size they'll actually be displayed before uploading. Use the Image Resizer to set exact pixel dimensions for each image based on your layout.

3. Compress Effectively

Compression removes data that human vision can't distinguish — particularly in JPEG files. A quality setting of 75–80% produces files that look identical on screen while being 3–5× smaller than the original. Use the Image Compressor on every image before it reaches your website. Target file sizes: under 150KB for blog content images, under 400KB for hero images, under 100KB for thumbnails.

4. Write Meaningful Alt Text

Alt text tells search engines what an image shows. Every image on your site should have descriptive alt text — not "image1.jpg" or a keyword stuffed string, but a natural description of what's depicted. Good alt text: "Chocolate Labrador puppy sitting on green grass in summer garden." This improves Google Image Search rankings and accessibility for screen reader users.

5. Implement Lazy Loading

Add loading="lazy" to all <img> tags that appear below the fold. This tells the browser to defer loading these images until the user scrolls towards them — dramatically reducing the initial page payload and improving First Contentful Paint (FCP) and Largest Contentful Paint (LCP) scores.

6. Use Responsive Images

The srcset attribute allows you to specify different image files for different screen sizes. Mobile users (narrow screens) receive small, fast-loading images; desktop users get larger, higher-resolution versions. This prevents the common mistake of serving a 1200px image to a mobile user who only needs a 400px version.

7. Use a CDN for Image Delivery

A Content Delivery Network serves your images from servers geographically close to each visitor. This reduces the time packets take to travel between server and browser (latency), which is significant for visitors in the US and UK accessing international servers. Most modern hosting platforms (Cloudflare, Vercel, Netlify) include global CDN delivery automatically.