The Complete Guide to Compressing Images
In short
Compression shrinks file size — usually by trading away some visual detail. For web photos, JPEG or WebP at 75–85% quality cuts file size by 5–10× with little visible difference. For screenshots and graphics with sharp edges, lossless PNG keeps everything pixel-perfect.
What is image compression?
Image compression reduces the number of bytes needed to store an image. The goal is to shrink the file enough to load quickly and save bandwidth, without losing so much detail that the image looks bad. Compression matters because images are usually the largest assets on a webpage — a single uncompressed photo can be larger than the rest of the page combined. Smaller images load faster, rank higher in Google's page experience signals, and use less mobile data for your visitors.
Lossy vs. lossless — which should I use?
- Lossy (JPEG, WebP-lossy): Throws away detail your eye is least likely to notice — high-frequency texture, subtle color shifts in smooth areas. Result: dramatically smaller files. Best for photographs and complex web graphics. Quality is adjustable; lower numbers = smaller files but more visible artifacts.
- Lossless (PNG, WebP-lossless): Keeps every pixel exactly as it was. Result: larger files, but zero quality loss no matter how many times you re-save. Best for screenshots, logos, illustrations, UI mockups, and any image with sharp edges or text.
- Rule of thumb: If the image is a photograph, start with lossy. If it has crisp edges, transparency, or text, start with lossless.
How to compress an image
- Upload your image — drag and drop or click to browse.
- Pick the output format. JPEG for photos, PNG for screenshots/transparency, WebP for the best ratio of size to quality.
- Drag the quality slider. Watch the file size readout update in real time.
- Look at the side-by-side preview. If you cannot tell the original and compressed apart, you have probably gone far enough.
- Once you are happy with the size/quality trade-off, click Download to save the compressed file.
When to compress
- Website images: Always. Uncompressed photos slow page loads, hurt SEO, and waste mobile data. Aim for under 200 KB per hero image and under 100 KB per content image.
- Email attachments: Most email services choke past 25 MB total. Compressing photos to 1–2 MB each lets you attach 10–20 photos comfortably.
- Social media uploads: Platforms re-compress what you upload. Pre-compressing to a sensible size means you control the quality instead of letting the platform downsample harshly.
- Cloud storage: Compressing a photo library before upload can cut storage bills in half with no visible difference.
- Sharing via messaging apps: WhatsApp, Telegram and similar will compress aggressively if your file is over their threshold. Compress first to keep more control.
Compression tips
- JPEG sweet spot: 75–85% quality is invisible to most viewers and gives 5–10× the size of "100%". Start there.
- WebP first: WebP at 80% is typically 25–35% smaller than JPEG at 85% with the same perceived quality. All modern browsers support it.
- Resize before compressing: A 4000×3000 photo compressed to 100 KB will look worse than the same photo resized to 1600×1200 first and then compressed. Match dimensions to actual display size.
- Don't recompress repeatedly: Each lossy save degrades the image a little more. Keep an original PNG/WebP-lossless master and re-export from it when you need different sizes.
- Watch the artifact zones: Compression artifacts are most visible in smooth gradients (skies, skin) and around hard edges (text, logos). If you see banding or "halos", bump the quality up a notch.
Compression — common questions
- What quality level should I pick?
- For JPEG: 75–85 is the sweet spot for photos. 90+ if the image will be re-edited later. Below 60 starts to show visible artifacts in most photos. For WebP: roughly the same numbers, but you generally get away with 5 points lower than JPEG. Always preview the side-by-side comparison rather than picking blindly.
- Why is my compressed file actually larger than the original?
- A few reasons. (1) The original was already heavily compressed and your settings are higher than what it was saved at. (2) You converted a JPEG to PNG — PNG is lossless and almost always larger for photographic content. (3) The image is mostly smooth gradients which JPEG handles efficiently but PNG does not. If size grew, lower the quality, switch to WebP, or stay in the original format.
- Does compression affect image dimensions?
- No. Compression only changes how the same dimensions are stored, not the dimensions themselves. To make the image visually smaller (fewer pixels wide and tall), use the Resize tool first, then compress.
- Is there a perfect format for everything?
- No, and beware of anyone who says yes. Photographs: JPEG or WebP-lossy. Screenshots/UI: PNG or WebP-lossless. Web hero images: WebP if you can, JPEG as fallback. Logos with transparency: PNG or SVG. Animations: GIF or animated WebP. Pick by content type, not by habit.
Privacy: your images stay on your device
Every operation in PhotoTools runs locally in your browser using the HTML5 Canvas API. Your image file is read into memory on your device, transformed there, and the result is generated locally — nothing is ever uploaded to a server. When you close the tab, the image is gone from memory. There is no account, no cloud storage, and no analytics on the file itself.