Image compression that keeps quality: JPG, PNG and WebP explained

Most images on the web are far bigger than they need to be — and most compression guides stop at "just lower the quality." This guide covers the three levers that actually control file size, the format rules that matter, and the target sizes for thumbnails, web pages and social posts, with our free Image Compressor.

Why image files are so big

Three things decide a file's size: pixel dimensions, quality setting, and format. A phone photo at 4032 × 3024 pixels contains over 12 million pixels; displayed at 1200 pixels wide on a web page, two-thirds of them are thrown away by the browser — but you still paid to download all of them. That is why resizing is usually worth more than any quality tweak: cutting each dimension in half quarters the pixel count, and the file size roughly follows.

The second lever is the quality slider, which for JPG and WebP controls how aggressively fine detail is discarded. The relationship is not linear: dropping JPG quality from 100 to 85 often halves the file with no visible change, while dropping from 70 to 50 saves much less and starts to show blocky artefacts in skies and skin. The practical sweet spot for photos is quality 80–85 — below that, artefacts appear; above it, you pay megabytes for detail nobody can see.

JPG vs PNG vs WebP: the format rules

JPG is for photographs and anything with gradients, skin tones or complex colour. It compresses by discarding detail the eye barely notices, which is why a 12-megapixel photo can become a 2 MB JPG at quality 85 and a 400 KB one at quality 80 after resizing.

PNG is for graphics with sharp edges and flat colour: logos, screenshots, diagrams, text overlays — and anything that needs transparency, which JPG cannot do at all. PNG compresses losslessly, so it preserves every pixel exactly, but that honesty is expensive: a photographic PNG can be three to five times larger than the same photo as a JPG. Using PNG for a photo is the single most common reason an image file is inexplicably huge.

WebP is the modern middle ground: it handles photos like JPG and transparency like PNG, and versions of the same photo typically come out 25–35% smaller than JPG at similar visual quality. Every current browser supports it. The only reason to avoid WebP is a destination that explicitly demands JPG or PNG — YouTube thumbnails, for example, accept JPG, PNG and GIF but not WebP, so export thumbnails as JPG.

Practical target sizes

• YouTube thumbnail: 1280 × 720 pixels, under the 2 MB platform limit — a JPG at quality 80–85 almost always lands between 150 and 400 KB.
• Web page images: aim under 200 KB each; a 1600-pixel-wide photo at quality 80 usually qualifies.
• Hero or banner images: under 300 KB if possible, at no more than 1920 pixels wide — wider than most screens display.
• Social posts: under 1 MB keeps uploads fast and avoids the platform recompressing your image a second time.

A compression workflow that takes a minute

1. Open the Image Compressor and drop in the files — JPG, PNG and WebP are all accepted, and everything runs in your browser.
2. Set a max width that matches the destination: 1920 for general web use, 1280 for thumbnails, 1080 for social squares. Images smaller than the max are left alone.
3. Set quality to 80 as a starting point. Check the per-file savings the tool reports; if a photo lost visible detail, retry at 85 rather than re-compressing the already-compressed file.
4. Download the smaller versions and keep the originals. Compression is a one-way operation — you can always make a file smaller later, but you can never recover detail once it is discarded.

Mistakes that cost quality for nothing

• Compressing twice — every JPG pass discards more detail. Always compress from the original, never from an already-compressed copy.
• Overwriting your only copy — keep originals in a separate folder; the compressed file is a delivery format, not an archive.
• PNG for photographs — switch to JPG or WebP and watch a 6 MB file become 800 KB with no visible difference.
• Resizing after uploading — uploading a 4000-pixel image and letting a page shrink it with CSS still downloads all 4000 pixels. Resize before upload, not after.