How to Reduce Image File Size for Web Without Losing Quality
Images account for more than 60% of a typical webpage's total weight. Oversized images make pages load slowly, consume unnecessary bandwidth, and frustrate users. This guide covers the most effective techniques to shrink image files while keeping them looking great.
Why Image File Size Matters
Page load speed directly affects user experience and search engine rankings. Google's Core Web Vitals include metrics specifically related to how quickly visual content appears on screen. A page dominated by unoptimised images will consistently score poorly on Largest Contentful Paint (LCP), one of the three Core Web Vitals signals.
Beyond SEO, slow pages lose visitors. Research consistently shows that a one-second delay in page load time can reduce conversions by 7% and increase bounce rates significantly. For mobile users on cellular connections, large image files can make pages feel unusable.
The good news: you can often reduce an image's file size by 50–80% with no visible quality difference, using the right combination of format, compression, and dimension choices.
1. Choose the Right Image Format
Format selection is the single most impactful decision you can make for image file size. Here's how the main formats compare:
JPEG (JPG)
Best for photographs and complex images with lots of colours and gradients. JPEG uses lossy compression — some detail is permanently discarded — but at quality settings of 75–85%, the result is usually indistinguishable from the original at typical viewing distances. Avoid JPEG for images with text, sharp edges, or transparent areas.
PNG
Best for graphics with flat colours, text, logos, and screenshots — and anything that needs a transparent background. PNG uses lossless compression, so no detail is lost, but file sizes are larger than JPEG for photographic content. Never use PNG for high-resolution photographs if file size matters.
WebP
Google's modern format offers 25–35% smaller files than JPEG at equivalent quality, and supports transparency like PNG. All modern browsers support WebP. If you're building a website, WebP should be your default choice for both photos and graphics. Use our Image Converter to convert any image to WebP in seconds.
SVG
For icons, logos, and illustrations made of geometric shapes, SVG (Scalable Vector Graphics) is far superior to any raster format. SVG files scale to any size without quality loss and are typically just a few kilobytes. If your graphic was created in a vector tool (Illustrator, Figma, Inkscape), always export as SVG for web use.
2. Resize Images to Their Display Dimensions
One of the most common mistakes is serving images at a much larger resolution than they'll actually be displayed. A 4000×3000 px photo from a smartphone camera is enormous — but if it's displayed in a 400px wide column on your website, you're forcing browsers to download 30× more pixels than necessary.
As a rule of thumb, size images to the maximum dimension they'll appear on screen, then double it for high-density (Retina/HiDPI) displays. So a 400px wide image on screen needs a source image of about 800px wide — not 4000px.
Use our Image Resizer to quickly resize any image to the exact pixel dimensions you need. You can resize by pixels or percentage, with aspect ratio lock to prevent distortion.
3. Adjust Compression Quality
For JPEG and WebP images, quality is controlled by a compression percentage. Most image editors default to 100% (maximum quality, largest file), but web images rarely need to be above 80–85%.
A practical approach: start at 75% quality and compare the result with the original at the display size you'll use. In most cases, you won't notice any difference. Only bump quality up if you can see visible artefacts (blocky areas, colour banding) in the compressed version.
- 85–90%: Excellent quality, moderate savings (~30–40% smaller than original)
- 70–80%: Very good quality, significant savings (~50–60% smaller)
- 50–65%: Acceptable for thumbnails and small previews, maximum savings
Our Image Compressor lets you set quality with a slider and see the before/after file size in real time, so you can find the optimal balance for each image.
4. Remove Unnecessary Metadata
Photos taken on smartphones and cameras contain embedded EXIF metadata — camera model, lens info, GPS coordinates, timestamps, colour profiles, and more. This data can add 20–100 KB to a file without contributing anything to the image's visual appearance.
Stripping EXIF data is especially important for privacy reasons (GPS coordinates reveal where photos were taken), but it also provides a free file size reduction. Use our EXIF Remover to strip all metadata in one click before publishing images to your website.
5. Use Lazy Loading
Even after optimising individual images, you can dramatically improve perceived page speed by loading images only when they're about to enter the viewport — a technique called lazy loading. In modern HTML, this is as simple as adding a loading="lazy" attribute to your image tags:
<img src="photo.webp" alt="Description" loading="lazy" />
This prevents the browser from downloading off-screen images until the user scrolls to them, which can significantly reduce the amount of data transferred on initial page load.
Quick Summary
- ✓Use WebP for web images whenever possible (25–35% smaller than JPEG)
- ✓Resize images to their actual display dimensions before uploading
- ✓Set JPEG/WebP quality to 75–85% — not the default 100%
- ✓Strip EXIF metadata to save space and protect privacy
- ✓Add loading="lazy" to off-screen images
Ready to optimise your images?
Use our free browser-based tools — no upload, no account, no limits.