Images are the single largest contributor to page weight on most websites. According to the HTTP Archive, the median web page loads around 1,000 KB of image data — and on image-heavy sites, that number can be several times higher. Uncompressed images slow down page loads, hurt your Core Web Vitals scores, and frustrate users on mobile connections. They also get rejected by email clients with attachment limits and fail silently when you try to upload them to platforms with file size caps.
The good news is that image compression is one of the highest-return optimisations available to anyone building or maintaining a website. A single pass of proper compression can reduce a photo's file size by 50–80% with no visible quality difference to a typical viewer. This guide covers everything you need to know: what compression actually does, which settings to use, which format to pick, and how to handle specific destinations like email and social media.
What is Image Compression?
Image compression reduces file size by encoding the image data more efficiently. There are two fundamentally different approaches: lossy and lossless.
Lossy compression permanently removes some image data that the human eye is unlikely to notice. JPG uses lossy compression, as does WebP in its default mode. When you save a JPG at 80% quality, the encoder analyses the image, discards subtle colour variations and fine high-frequency detail, and stores a compressed approximation. The result is a smaller file that looks nearly identical to the original under normal viewing conditions. The trade-off is that quality loss is permanent — every time you re-save a lossy file, you lose a bit more data. Always keep the original and export compressed versions from it rather than compressing the compressed file.
Lossless compression reduces file size without discarding any image data. Every pixel is preserved exactly. PNG uses lossless compression, as does WebP in lossless mode. Lossless compression works by encoding repeated patterns more efficiently — a run of identical pixels can be stored as a single instruction rather than pixel by pixel. The file sizes are larger than lossy compression for the same visual output, but you never lose quality. Lossless is the right choice for images that will be edited further, screenshots, logos, and anything where pixel-perfect accuracy matters.
How Much Should You Compress?
The right compression level depends on what the image is for. These are the settings used by most professional developers and designers:
Web images (photos): Quality 80–85% is the sweet spot for most web photos. At this level, the file is typically 60–70% smaller than the original while the quality difference is imperceptible on standard displays. Google's own PageSpeed tools recommend quality settings in this range. For thumbnails and preview images that will be displayed small, you can go as low as 70–75% without any visible degradation.
Print and high-resolution display: If the image will be used in print, large-format display, or situations where viewers will zoom in, use quality 90–95%. The file will be larger, but the extra quality headroom is worth it when the image is being critically examined or reproduced at high resolution.
Icons and graphics with solid colours: Lossy compression handles photos well but degrades sharp edges and solid-colour areas. For logos, icons, and diagrams, use PNG with lossless compression instead of JPG. The result will often be a smaller file with perfect quality for that type of image.
Best Image Format for Web
Choosing the right format is as important as choosing the right compression level. Each format has a different strength, and using the wrong one means you are leaving file size savings on the table.
JPG for photographs: JPG is still the most reliable choice for photos on the web. Every browser supports it, every server can serve it, and quality 80–85% delivers excellent results at small file sizes. If you need broad compatibility and you are serving photos, JPG is the default.
PNG for graphics, screenshots, and transparency: PNG is lossless and supports transparency. Use it for logos, interface screenshots, illustrations, and any image where you need sharp edges or a transparent background. Do not use PNG for photos — the file sizes are much larger than JPG for photographic content.
WebP for modern sites: WebP is supported by all modern browsers and produces files that are 25–35% smaller than equivalent JPG or PNG images. If your audience is on modern browsers (which is most web traffic today), WebP is worth adopting. You can serve WebP with a JPG fallback using the HTML <picture> element for older browsers.
How to Compress Images for Email
Email is one of the most demanding environments for images. Most email clients impose attachment size limits (Gmail's is 25 MB per email, Outlook's varies by configuration), and many corporate email systems have even stricter limits. More practically, large images in email feel slow and bulky to the recipient.
A good target for email images is under 500 KB per image. For inline images in an email newsletter, aim for 100–200 KB. For attached photos you want someone to be able to view and print, 300–600 KB at quality 85% gives a good result.
Resize the image before compressing it. Most email display widths max out at around 600–700 px for newsletters, or 1200 px for a full-width image someone will want to view properly. Sending a 4032 px wide iPhone photo in an email is wasteful — the recipient's email client will scale it down anyway, and you have sent ten times more data than necessary. Resize to 1200 px wide at quality 85% and you will have a sharp, well-compressed image that feels professional.
How to Compress Images for Instagram and WhatsApp
Both Instagram and WhatsApp re-compress your images on upload, so there is a limit to how much control you have over final quality. But the quality of what you upload directly affects the quality of what gets displayed after their compression.
For Instagram, upload images at 1080 px wide (or 1080 x 1350 for portrait, 1080 x 566 for landscape). Instagram compresses JPGs to roughly 70–80% quality on their end, so uploading at 85–90% quality gives their compression enough headroom to produce a good result. Uploading an already heavily compressed image means their second compression pass compounds the quality loss.
WhatsApp compresses images aggressively by default — particularly in chats. If quality matters (you are sharing a document photo or a detailed image), use the “Document” sending option instead of the regular photo share. This bypasses WhatsApp's compression and sends the original file. The trade-off is that the recipient sees a document attachment rather than an inline image preview.
Tools for Compressing Images
There are many tools available for image compression, ranging from command-line utilities to browser-based tools. For quick, one-off compression without installing anything, browser-based tools are the most accessible option.
ToolChop's free image compression tool lets you drag and drop any JPG, PNG, or WebP file and download a compressed version immediately. You can adjust the quality level and see the file size before downloading. All processing happens in your browser — your images are never uploaded to a server.
For JPG-specific compression, the JPG compressor gives you fine-grained control over quality settings. For PNG files, the PNG compression tool uses lossless optimisation to reduce file size without any quality change.
For automated, batch, or build-pipeline compression, tools like Squoosh (Google), ImageOptim (Mac app), and the Sharp library (Node.js) are widely used. These give you more control and can process hundreds of files at once.
Frequently Asked Questions
Does compressing an image reduce its resolution?
Not automatically — compression and resolution are separate things. Compression reduces file size by encoding the existing pixels more efficiently (or discarding subtle data in lossy modes). Resizing reduces the number of pixels. Most compression tools let you do both or either independently. You can compress a 4000 x 3000 px image to a smaller file size without changing its pixel dimensions, or you can resize it to 1200 x 900 px without compressing it, or both.
What is the best quality setting for web images?
For photographs, 80–85% quality (on a 0–100 scale) is the standard recommendation. This produces files that are 50–70% smaller than the original with no visible quality difference in normal browser viewing. For images that contain fine text, sharp graphics, or will be viewed zoomed in, use 90%.
Is it safe to compress images multiple times?
With lossy formats like JPG, each re-compression pass discards more data and compounds quality loss. Always keep your original file and compress from it. If you need to edit a compressed image and re-export it, the quality degradation across two compression passes is usually small at high quality settings, but it does accumulate over many passes.
Why is my compressed image larger than the original?
This can happen when you try to compress an image that is already heavily compressed. Some compression algorithms add their own headers and metadata, meaning a very small file might not compress further and could technically get slightly larger. It can also happen when converting from a lossy format to lossless PNG — PNG stores every pixel exactly, so it cannot take advantage of the quality loss already baked into the JPG.
Should I compress images before or after resizing?
Resize first, then compress. Resizing eliminates the pixels you do not need, and compressing afterwards gives the compression algorithm a smaller, simpler image to work with, which typically produces better results at smaller file sizes.