Images account for most of the bytes on a typical web page. Compressing them is the single biggest, cheapest performance win available — here is how to do it well.
Images are the heaviest part of almost every web page, and they are usually heavier than they need to be. A photograph exported at full resolution and minimal compression can be several megabytes, when the same image optimised for the web might be 200 KB with no visible difference. Compressing images is the single highest-impact, lowest-cost performance improvement most websites can make — and it is free.
What image compression actually does
Compression reduces file size by encoding the image data more efficiently. There are two families, and the difference matters.
Lossless compression
Lossless compression rewrites the image data without discarding anything. Every pixel is preserved exactly. PNG uses lossless compression, which is why it keeps sharp edges and transparency but produces larger files. Lossless savings are usually modest — often 10% to 30% — but there is zero quality risk.
Lossy compression
Lossy compression discards visual information that the human eye is bad at noticing — subtle colour gradients, high-frequency detail. JPG and WebP use lossy compression, which is why they produce dramatically smaller files for photographs. At moderate settings the difference is invisible on screen; at aggressive settings you see blockiness and artefacts. The trick is finding the lowest setting that still looks good to you.
Choosing the right format first
Compression works best when the format matches the content. Photographs belong in JPG or WebP. Graphics with flat colours, sharp edges, or transparency belong in PNG. Converting to the right format before compressing often saves more than the compression itself. You can switch formats with Convert Image.
WebP is the modern wildcard: it produces smaller files than JPG at similar quality and supports transparency like PNG. Most browsers now support it, so it is a strong default for web images. Convert your photos to WebP with the same Convert Image tool.
A practical compression workflow
Step 1: Right-size the image
Compression cannot fix an image that is the wrong dimensions. A 4000-pixel-wide photo displayed at 400 pixels is carrying ten times the data it needs. Resize it to the largest size it will actually be displayed at with Resize Image before compressing. This single step often cuts file size more than any compression.
Step 2: Compress
Run the right-sized image through Compress Image. Pick the lowest quality level that still looks acceptable to you. For most web photographs, a moderate setting reduces the file by 60% to 80% with no visible loss. Compare the result against the original at 100% zoom before accepting it.
Step 3: Crop if needed
If the subject is small in the frame, cropping to the relevant area removes pixels you do not need. Use Crop Image to tighten the composition, then compress the result. Fewer pixels means a smaller file, every time.
Compressing images inside PDFs
A common source of oversized PDFs is embedded images. The same principles apply: right-size and compress the images before assembling the document. Compress your photos with Compress Image, then build the PDF with Image to PDF. For an existing PDF, run it through Compress PDF to re-optimise the whole document.
Why browser-based compression is safer
Many free image compression sites upload your photos to a server, process them remotely, and return the result. For personal photos, product shots, or client work, that means your images are stored on a third-party server you do not control. Browser-based compression runs entirely in your device using JavaScript — your images never leave your browser, which also makes the tool fast because there is no upload or download step. Read more about this approach on our About page.
Common mistakes to avoid
- Compressing before resizing. Always resize to the display dimensions first — it saves more than compression alone.
- Re-compressing an already-compressed JPG. Each lossy pass adds artefacts; start from the original each time.
- Using PNG for photographs. PNG is lossless and produces huge files for photos; use JPG or WebP instead.
- Overwriting your original. Keep the master file so you can re-compress at different settings later.
- Ignoring alt text and width/height. Compressed images still need dimensions in HTML to prevent layout shift.
The short version
Pick the right format, resize to the display dimensions, then compress at the lowest quality that still looks good. Start from the original every time, keep your master, and prefer browser-based tools so your images stay private. That workflow covers almost every image compression task you will ever meet.