How to Reduce Image File Size Without Losing Quality
Oversized images are the single most common cause of slow web pages. They're also one of the easiest performance problems to fix. A 4MB hero image that should be 120KB is not a minor issue — it can add 3-4 seconds to your page load time on mobile, which directly affects bounce rate, Core Web Vitals, and search rankings.
Use our free image conversion tools to reduce file sizes: PNG to WebP and JPG to WebP.
The Right Format Is the Biggest Win
Before touching compression settings, check whether you're using the right format. Format choice has more impact than any other single decision.
• Photographs: use JPG or WebP lossy — PNG photographs are 3-5x larger than they need to be • Graphics with transparency: use WebP or PNG — never JPG • Everything: consider WebP first — 25-35% smaller than JPG at equivalent quality • Animated content: use MP4/WebM video instead of GIF — GIFs are 5-10x larger than equivalent video
Converting a PNG photograph to JPG alone can reduce file size by 70-80% with no visible quality difference.
Resize Before Compressing
Serving a 4000px wide image on a page where it displays at 800px wide is a common mistake. The browser downloads the full 4000px image and scales it down in-display — wasting bandwidth on pixels that are never shown.
Always resize images to the maximum display size before exporting. On a standard desktop layout, most content images need to be no wider than 1200-1400px. For mobile-primary designs, 800px is often sufficient.
Use responsive images (srcset attribute) to serve different sizes to different screen widths:
<img src="image-800.jpg" srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w" sizes="(max-width: 600px) 400px, 800px">
Compression Settings That Actually Work
JPG quality settings
Quality 75-85%: excellent for most web photos — visually indistinguishable from higher settings at significantly smaller file size. Quality 60-70%: acceptable for thumbnails and secondary images. Quality 90%+: rarely worth it for web — file size increase is not proportional to quality improvement.
WebP lossy settings
WebP quality 75-80% typically matches JPG quality 85-90% at 30% smaller file size. Start at 80 and adjust based on visual inspection.
PNG optimisation
PNG is lossless — you cannot reduce quality settings. You can reduce file size through better compression algorithms (pngquant reduces PNG file size 40-80% by converting PNG-24 to optimised PNG-8 with a nearly invisible colour palette reduction).