Best Way to Compress Images Without Losing Quality

There is no single best way to compress every image, because a photograph and a logo behave nothing alike. The real skill is matching the format and settings to the content in front of you. Get the format right and you have done most of the work; the quality slider only fine tunes what is left.

The two questions that decide everything are simple. Is the image a photo, with smooth gradients and millions of subtle colors, or a graphic, with flat areas, sharp edges, and maybe transparency? And how big does it actually need to be on screen? Answer those and the right approach falls out almost automatically. Understanding why each format behaves the way it does turns those two questions into confident decisions rather than guesses.

Format decides most of the size

JPG uses lossy compression tuned for photographs. It discards detail your eye barely notices and gets photos very small, but it cannot store transparency and it smears the crisp edges of text and logos into visible fuzz. PNG is the opposite: lossless, with clean edges and full transparency, which makes it ideal for graphics and terrible for photos, where its files balloon.

WebP is the modern all-rounder. It does both lossy and lossless, supports transparency, and typically lands noticeably smaller than the equivalent JPG or PNG. AVIF pushes further still, usually the smallest of the four at a given quality, at the cost of slower encoding and slightly less universal support. For most websites today, WebP is the safe default and AVIF is the aggressive option.

How lossy image compression works

To choose settings well it helps to know what a lossy image encoder actually throws away. The classic JPEG pipeline, which the newer formats refine rather than replace, works in three stages.^[4] First it converts the image from red-green-blue into a brightness-plus-color representation and often subsamples the color channels, storing color at half the resolution of brightness. This is nearly free visually, because human eyes are far more sensitive to changes in brightness than in hue. Second, it splits the image into small blocks and applies a frequency transform that separates smooth, large-scale content from fine, high-frequency detail. Third, it quantizes those frequencies, discarding the high-frequency components most aggressively, because that is the detail the eye is least likely to notice.

The quality slider you see is really controlling that quantization step: a lower quality keeps fewer frequency components, producing a smaller file and, past a point, visible blocky artifacts around edges. This is also why JPG handles smooth photographs gracefully but mangles sharp text: a hard edge is pure high frequency, exactly what the encoder is built to throw away.^[3] WebP and AVIF use more advanced block prediction and better transforms, which is how they reach smaller sizes at the same visible quality, but the underlying trade, discarding perceptual detail to save bytes, is the same across all of them.

JPG, PNG, WebP, and AVIF compared

This table is the whole decision on one screen. Read it by the kind of image you have.

Reading the table by content is the fast path to a decision. If it is a photograph, the choice is between JPG for maximum compatibility, WebP for a smaller file with equally broad support today, or AVIF when you want the smallest possible file and can accept slightly younger support. If it is a graphic, a screenshot, or anything needing transparency, PNG and lossless WebP are the honest options, with lossless WebP usually winning on size. The one combination to avoid is a photograph stored as PNG, which pairs a lossless format with content that has nothing to gain from it and everything to lose in file size. Each of these four formats is a mature, documented standard, so the decision is about fit for your content and audience, not about whether a format will still open next year.

Resize first: the biggest single saving

Before any format or quality decision, resizing is almost always the largest saving available, and it is worth understanding why. An image's uncompressed data grows with the square of its dimensions, because it is a grid of pixels in two directions. Halving both the width and height of a photo quarters the pixel count, so a 4000-by-3000 image scaled to 2000-by-1500 starts from one-quarter of the data before the encoder does anything at all. Serve that same 4000-pixel photo into an 800-pixel slot on a page and roughly ninety percent of its pixels are wasted, downloaded and then discarded by the browser as it shrinks the image to fit.

The rule is to scale each image to the largest size it will actually be displayed at, plus a modest allowance for high-density screens if that matters to you. This one step routinely cuts file size more than any quality setting, and unlike lowering quality it costs nothing in visible sharpness at the intended display size. Resizing changes how much data exists; compression only changes how efficiently that data is stored, so doing the resize first means everything after it operates on a smaller, more honest starting point.

Choosing a quality level that holds up

Lossy formats expose a quality setting, and the sweet spot is narrower than people assume. Across JPG, WebP, and AVIF, a quality of roughly 75 to 85 removes the large majority of the file size while leaving no difference an ordinary viewer can spot in normal use. Below about 70 the artifacts start to show on flat skies and skin tones; above about 90 you are spending a lot of extra bytes to preserve detail almost no one will notice. The reason this band works so well is that the encoder discards detail in order of how little the eye values it, so the first bytes it removes are genuinely the least missed, and only as you push lower does it start cutting into detail you would notice.

Two practical cautions apply. First, quality numbers are not comparable across formats: WebP at 80 and JPG at 80 are not the same amount of loss, so judge by the result, not the number. Second, always compare the compressed image against the original at full size before committing, because the right level depends on the content. A busy, textured photo hides compression well and can go lower; a smooth gradient or a portrait shows artifacts sooner and wants a higher setting.

The reliable workflow

1. Resize to the display size first

   The single biggest waste is serving a 4000 pixel photo into a 800 pixel slot. Scale the image to the size it will actually appear before you touch compression.

2. Choose the format by content

   Photo to JPG, WebP, or AVIF. Logo, icon, or screenshot to PNG or lossless WebP. Use the image converter to switch formats cleanly.

3. Set quality around 75 to 85 percent

   That band removes most of the file size with no change you can see. Only drop lower if you compare side by side and still cannot spot the difference.

4. Compress and compare

   Run it through the image compressor, then look at the before and after at full size. If it looks identical, ship the smaller one.

Graphics, screenshots, and transparency

Everything above is tuned for photographs, but a large share of real images are the opposite kind: logos, icons, diagrams, screenshots, and UI captures, made of flat color areas, sharp edges, and often a transparent background. These behave nothing like photos under compression. A lossy photo codec is the wrong tool here, because it blurs the crisp edges of text and line art into visible fuzz and cannot store transparency at all in the case of JPG. For this content, a lossless approach is both cleaner and smaller.

PNG is the traditional home for graphics: it is lossless, keeps edges perfectly crisp, and supports a full alpha channel for smooth transparency. It compresses flat areas well precisely because they contain long runs of identical pixels, which its lossless algorithm packs efficiently. Lossless WebP does the same job and is usually smaller still. The practical rule is a mirror image of the one for photos: if the picture is mostly flat regions and sharp edges, use PNG or lossless WebP, keep the color count modest where you can, and never route it through a lossy encoder that will smear the very detail that makes it readable. Reducing the number of distinct colors in a graphic, where the design allows, shrinks it further because fewer colors mean longer, more compressible runs.

Mistakes that waste space

Two habits quietly bloat images. The first is compressing an already lossy file over and over: re-saving a JPG as a JPG each time adds fresh damage without shrinking it much. Convert once, at the right quality, and keep that. The second is using PNG for photographs because it looks safe; a PNG photo can be many times larger than the same shot as JPG or WebP with no visible benefit.

A third, subtler waste is ignoring metadata. Camera photos often carry embedded thumbnails, color profiles, and location and device data that can add tens of kilobytes to every file and, in the case of location data, leak private information you did not mean to share. Stripping non-essential metadata on export trims the file and protects your privacy at once. And a fourth is over-preserving: keeping every image at archival quality when it will only ever be viewed on a phone screen. Match the effort to the destination, and compress for where the image will actually be seen.

For format-specific tuning, the dedicated guides go deeper: see compressing JPG, compressing PNG, and compressing WebP.