How to Optimise Images for the Web Without Losing Quality

Published: December 15, 2025 · Updated: February 20, 2026

Images often account for more than half of a web page's total weight. A single unoptimised photograph can exceed 5 MB, while the same image compressed and resized for the web might be under 200 KB — a 95 % reduction. Faster-loading pages improve user experience, reduce bounce rates, and contribute to better search engine rankings.

This guide explains the key concepts behind image optimisation, walks you through practical steps, and helps you choose the right format and quality settings for different situations.

Why Image Optimisation Matters

Google uses page speed as a ranking factor, and Core Web Vitals (LCP, FID, CLS) are directly affected by heavy images. Studies show that a one-second delay in page load can reduce conversions by up to 7 %. For mobile users on slower connections, the impact is even greater.

Beyond SEO, optimised images reduce bandwidth costs for site owners and data usage for visitors. If your site serves thousands of pages per day, even a small per-image saving translates into significant cost and performance benefits.

Lossy vs. Lossless Compression

Lossy compression permanently removes data that the human eye is unlikely to notice. JPEG and WebP (lossy mode) use this approach. The quality slider controls how aggressively data is removed. At 75–85 % quality, most photographs are visually indistinguishable from the original.

Lossless compression reduces file size without discarding any data. PNG and WebP (lossless mode) use this approach. The decompressed image is pixel-identical to the original. Lossless compression is ideal for screenshots, diagrams, and images with text overlays where clarity is essential.

Choosing the Right Image Format

  • JPEG: Best for photographs and complex images with many colours. Does not support transparency. Use quality 75–85 % for web.
  • PNG: Best for screenshots, logos, icons, and images requiring transparency. File sizes are larger than JPEG for photographic content.
  • WebP: A modern format from Google that supports both lossy and lossless compression. WebP typically achieves 25–35 % smaller files than equivalent JPEG or PNG. Supported by all modern browsers.
  • AVIF: The newest contender, offering even better compression than WebP. Browser support is growing but not yet universal.
  • SVG: Best for vector graphics like icons and logos. Scales to any size without quality loss. Not suitable for photographs.

Step-by-Step Optimisation Process

  1. Resize first: Never serve a 4000 × 3000 px image when the display area is only 800 × 600 px. Resize to the maximum display dimensions (accounting for 2× for retina screens).
  2. Choose the format: Use JPEG or WebP for photos, PNG for transparency needs, SVG for vector graphics.
  3. Compress: Use our Image Compressor to reduce file size. Start at 80 % quality and compare the result visually.
  4. Serve responsive images: Use the HTML <picture> element or srcset attribute to deliver different sizes for different screen widths.
  5. Enable lazy loading: Add loading="lazy" to images below the fold so they load only when the user scrolls to them.

Quality Settings Cheat Sheet

  • Hero images / banners: 80–90 % quality, max width 1920 px
  • Blog post images: 75–85 % quality, max width 1200 px
  • Thumbnails: 60–75 % quality, max width 400 px
  • Icons / UI elements: Use SVG when possible; otherwise PNG with palette reduction

Common Mistakes to Avoid

  • Uploading images straight from a camera without resizing
  • Using PNG for photographs (file sizes will be 5–10× larger than JPEG)
  • Over-compressing images so that visible artefacts appear (banding, blockiness)
  • Forgetting to add alt text — this hurts accessibility and SEO
  • Serving the same large image to mobile and desktop users

Tools You Can Use

Our Image Compressor processes images directly in your browser, so your files are never uploaded to a server. You can also use our Image Resizer to change dimensions before compressing, and our Image Converter to switch between formats like JPEG, PNG, and WebP.

Summary

Optimising images is one of the highest-impact things you can do for web performance. Resize images to their display dimensions, choose the right format, compress at an appropriate quality level, and serve responsive images with lazy loading. These steps can reduce page weight by 50–80 % and significantly improve load times for your visitors.