How-To image compression web performance WebP JPEG

How to Compress Images for the Web Without Losing Quality

By ClickSolveTools Editorial TeamUpdated 8 min read

To compress images for the web without visible loss, resize each image to the size it is shown at (up to twice that width for high-density screens), then save photos as WebP or JPEG at quality 80 to 85. Keep PNG for graphics with sharp edges or transparency. In our test, a 3.66 MB photo dropped to about 103 KB as a JPEG and 61 KB as a WebP at 1,200 pixels wide, a cut of 97% to 98%.

It is worth the effort. In the HTTP Archive's 2025 Web Almanac, the median mobile home page weighed 2,559 KB and carried 911 KB of images, more than any other type of resource. The sections below explain which format to pick, how quality settings trade size for detail, and how to do each step with our free tools, which run in your browser.

Why Image Size Matters

Oversized images hurt a site in three measurable ways:

Lossy vs. Lossless Compression

All image compression falls into two categories.

Lossless compression shrinks the file without discarding any image data, so the decoded image is pixel-for-pixel identical to the original. PNG is lossless. Think of a zip file: the data is rearranged to take less space, but nothing is removed.

Lossy compression permanently discards some data to reach much smaller files. The discarded detail is chosen to be the least noticeable, such as fine texture and subtle color differences. JPEG is lossy, and it exploits the fact that we notice changes in brightness more than changes in color by storing color at lower resolution than brightness.

Format Compression Transparency Animation Best for
JPEG Lossy No No Photographs
PNG Lossless Yes Yes (APNG) Logos, screenshots, diagrams, text
WebP Lossy or lossless Yes Yes Most web images
AVIF Lossy or lossless Yes Yes Photos, when you can serve a fallback

JPEG vs. PNG vs. WebP vs. AVIF: Which Format to Use

Picking the right format is the biggest single decision in image optimization.

JPEG: Best for Photographs

JPEG handles photographs and smooth gradients well. Because it is lossy, it creates visible artifacts around sharp, high-contrast edges.

Use for: photos, hero images, product shots, backgrounds with gradients.

Avoid for: logos, icons, screenshots, and anything with small text.

PNG: Best for Graphics and Transparency

PNG is lossless and supports transparency. It produces much larger files than JPEG for photographs (our test photo was 7.08 MB as an optimized PNG), but it keeps edges and text perfectly sharp.

Use for: logos, icons, screenshots, diagrams, images with text, anything that needs transparency. For simple vector artwork, an SVG cleaned up with our SVG Optimizer is usually smaller still and stays sharp at any size.

Avoid for: large photographs.

WebP: The Safe Default for the Web

WebP supports lossy and lossless compression, transparency, and animation. Google's own comparison found lossless WebP images 26% smaller than PNGs, and lossy WebP images 25% to 34% smaller than comparable JPEGs at an equivalent SSIM quality index (Google WebP). In our test, lossless WebP was 27% smaller than an optimized PNG (5.15 MB against 7.08 MB). Can I use shows WebP support at about 96.8% of browser usage worldwide in August 2026.

Use for: nearly everything on the web, with a JPEG or PNG fallback if you need to cover the remaining browsers.

Avoid for: print workflows, email clients, and older software that cannot open WebP.

AVIF: Smaller Still, With Trade-Offs

AVIF often compresses better than WebP. web.dev reports real-world savings of more than 50% against JPEG (web.dev on AVIF). Support has caught up, at about 95.4% of usage in August 2026 (Can I use). The costs are slower encoding and the need for a fallback for the rest. Our tools export JPEG, PNG, and WebP, so create AVIF files with an encoder such as avifenc if you want them.

The Quality Sweet Spot: 80 to 85

For lossy formats, file size drops steeply as quality falls from 100, and then the savings flatten while detail loss keeps growing. For photographs, quality 80 to 85 is usually where you keep the look and lose most of the bytes.

We measured this on a public-domain photo: "Alone in the unspoilt wilderness" on Wikimedia Commons (CC0, 3,506 by 2,329 pixels, 3.66 MB as downloaded). We re-encoded it with Pillow 12 at each quality setting. Browser encoders differ, so your numbers will vary, but the shape of the curve holds.

Quality Setting JPEG File Size JPEG Saving vs. 100 WebP File Size
100 3.77 MB 0% 1.83 MB
95 1.72 MB 54% 1.10 MB
90 1.10 MB 71% 0.66 MB
85 0.82 MB 78% 0.43 MB
80 0.68 MB 82% 0.32 MB
60 0.43 MB 89% 0.20 MB
40 0.32 MB 91% 0.14 MB

Going from 100 to 85 removes 2.94 MB, while going from 80 to 60 removes only another 0.25 MB. We compared 100% zoom crops of the hiker and the rock face at qualities 100, 85, 60, and 40. We could not see a difference between 100 and 85, and at 40 the texture on the rock and foliage looked softer. Quality numbers are not comparable across formats: by peak signal-to-noise ratio, WebP at 85 (41.3 dB) matches JPEG at 80 (41.5 dB), at 0.43 MB against 0.68 MB, about 36% smaller. Use the side-by-side preview in the Image Compressor to judge each image, especially ones with text or sharp edges.

Resize First, Compress Second

Before you touch the quality slider, check the pixel dimensions. Uploading a 3,500 pixel wide photo into a 600 pixel wide slot makes every visitor download pixels that are never shown. Follow this order:

In our test, resizing the 3.66 MB photo to 1,200 pixels wide and saving at quality 80 gave 103 KB as JPEG and 61 KB as WebP. At 2,400 pixels wide, for the same slot on a very high-density screen, the files were 357 KB and 190 KB. Here is the HTML for the fallback pattern:

<picture> <source srcset="photo-1200.webp" type="image/webp"> <img src="photo-1200.jpg" width="1200" height="797" alt="A hiker standing on a rock above a forested valley" loading="lazy"> </picture>

The width and height attributes let the browser reserve space, which avoids layout shift. Add loading="lazy" only to images below the fold: web.dev advises against lazy-loading images likely to be in view when the page loads, especially the LCP image (web.dev on lazy loading).

How Browser-Based Compression Works

Our Image Compressor re-encodes your image with the browser itself:

Because the output is re-encoded from the decoded pixels, it does not carry over metadata such as EXIF. The compressor handles one image at a time and reads JPEG, PNG, and WebP files.

Batch Optimization Tips

If you are preparing a whole gallery or a site redesign, these habits save time:

More tools for photos and graphics are in our image tools collection.

Frequently Asked Questions

Will compression make my images look blurry?

Not at sensible settings. In our test photo, JPEG quality 85 looked the same as quality 100 in 100% zoom crops while saving 78% of the bytes. At quality 40, fine texture such as rock and foliage looked softer. Keep photos at 80 to 85, and check images with text or sharp edges at full size before you publish.

Should I use AVIF instead of WebP?

AVIF usually gives smaller files: web.dev reports savings of more than 50% against JPEG in real-world tests. Support is now close to WebP, at about 95.4% for AVIF and 96.8% for WebP in August 2026 (Can I use). The trade-offs are slower encoding and the need for a fallback for the remaining browsers. If your build pipeline can produce both, serve AVIF and WebP in a picture element with a JPEG fallback. If you want the simplest setup, use WebP.

How much can I reduce the file size of a photo?

It depends on the photo, but the steps stack. In our test, resizing a 3,506 by 2,329 pixel photo (3.66 MB) to 1,200 pixels wide and saving at quality 80 gave 103 KB as JPEG and 61 KB as WebP, a 97% and 98% cut. At 2,400 pixels wide it was 357 KB as JPEG and 190 KB as WebP. Photos with flat areas compress further than photos with dense texture.

Does image compression affect print quality?

Yes. Lossy compression suits screens, where viewing distance hides small artifacts. For print, what matters is how many pixels you have at the print size, and a common target is about 300 pixels per inch, so a 6 by 4 inch print needs roughly 1,800 by 1,200 pixels. Keep your original file for print and make compressed copies for the web.

Sources