How to Compress Images for the Web Without Losing Quality

Images are the largest assets on most web pages. A single unoptimized photograph can be 5–10 MB — larger than the entire JavaScript bundle of a well-built website. Compressing images is the highest-return optimization you can make to page load speed, and it's often completely invisible to the viewer when done correctly.

Why image size matters so much

Page load time directly affects user experience, SEO rankings, and conversion rates. Google uses Core Web Vitals — including Largest Contentful Paint (LCP), which measures how quickly the main image on a page loads — as a ranking factor. A hero image that takes 4 seconds to load will hurt your LCP score, push you down in search results, and cause visitors to leave before the page finishes rendering.

Mobile users on slower connections are hit hardest. A 3 MB photo might load in under a second on a fast Wi-Fi connection but take 8–10 seconds on a 4G connection with poor signal. Compressing that image to 200 KB changes the experience from frustrating to fast.

The two levers: resolution and compression

Resolution (dimensions)

A photo taken on a modern smartphone is typically 4000×3000 pixels or larger. A full-width web image on a 1440px-wide monitor needs at most 1440–2880 pixels wide (2× for retina displays). Serving a 4000-pixel image where 1440 pixels are needed wastes bandwidth proportional to the square: a 4000px image has almost 8× the pixels of a 1440px image.

Always resize images to approximately the display dimensions before compressing. This is the single biggest reduction you can make.

Compression (quality)

Once you've resized, lossy compression (JPEG, WebP lossy) further reduces file size by discarding image data the eye is less sensitive to. The quality setting controls this trade-off. For most web photography:

• Quality 80–85 (JPEG/WebP): Excellent quality, typically 40–60% smaller than quality 100. The right default for most photos.
• Quality 60–75: Good for thumbnails and background images. Slight artifacting may be visible at close inspection.
• Quality 40–55: Small files, visible degradation. Only for very small thumbnails or rough previews.

Target file sizes for web images

There are no universal rules, but these targets work well for most websites:

Which format to use for web images

For most web images in 2024, WebP is the best default. It offers 25–35% better compression than JPEG at the same quality, supports transparency like PNG, and is supported by all major browsers. If you're still serving JPEG and PNG for general web images, converting to WebP is a straightforward win.

For icons, logos, and illustrations with flat colors and sharp edges, use SVG where possible — it's infinitely scalable and often tiny. If the asset must be raster, use WebP lossless or PNG.

Common mistakes when compressing images for web

• Compressing without resizing first. Compression alone won't fix a 4000px image served at 800px width. Resize first, then compress.
• Using PNG for photographs. PNG lossless is much larger than WebP or JPEG for photos. Only use PNG (or WebP lossless) when you need transparency or exact pixel accuracy.
• Re-compressing already-compressed images. Each time you compress a JPEG and save it again, quality degrades further. Always compress from the original source file.
• Ignoring mobile breakpoints. A 2000px image served to a 375px mobile screen is wasteful. Use the HTML srcset attribute or a responsive image pipeline to serve different sizes to different devices.

How to compress images for free

Safe File Converter lets you compress images (JPEG, PNG, WebP) and convert between formats entirely in your browser. The quality slider gives you direct control over the compression level, so you can find the right balance of file size and quality before downloading. No upload, no account, and no file is sent to a server.