Every image you add to a website costs your visitors time and bandwidth. A single uncompressed photo from a modern phone camera can weigh 5-10 MB — enough to double the load time of an otherwise fast page. But compressing an image doesn't have to mean destroying it. The trick is understanding the difference between lossy and lossless compression and picking the right approach for your use case.
How image compression actually works
Every digital image is a grid of pixels. Each pixel stores color data — typically three channels (red, green, blue) with 8 bits per channel, giving you 16.7 million possible colors per pixel. A 4000×3000 photo contains 12 million pixels, and at 3 bytes per pixel that's 36 MB of raw data. Clearly some compression is needed.
Lossless compressionfinds patterns in that pixel data and encodes them more efficiently. If 200 consecutive pixels are the same shade of blue, you can store “200× this blue” instead of repeating the value 200 times. PNG uses this approach (specifically DEFLATE compression with predictive filters). The original pixel data is perfectly preserved — you can decompress and get back the exact same image, bit for bit.
Lossy compression goes further by discarding information that human eyes are unlikely to notice. JPEG does this using the Discrete Cosine Transform (DCT): it converts blocks of pixels from spatial data into frequency data, then aggressively quantizes the high-frequency components. High-frequency detail — sharp edges, fine textures, subtle color gradients — gets simplified. At moderate quality levels (75-85%), the visual difference is negligible. At low quality levels (below 50%), you start seeing the characteristic blocky artifacts.
Lossy vs lossless: when to use each
The right compression type depends on what the image contains and where it will be used.
Use lossless when:
- Screenshots, diagrams, or text-heavy images — these have sharp edges and flat color areas that lossy compression handles poorly. A JPEG screenshot of a code editor will show noticeable ringing artifacts around text.
- Images with transparency— you need PNG or WebP for alpha channels. JPEG doesn't support transparency at all.
- Source/archival copies— if you're going to edit the image later, keep a lossless copy. Every round of lossy compression degrades quality further (generation loss).
- Pixel art or icons — these are small images where every pixel matters. PNG is ideal here and produces tiny files anyway.
Use lossy when:
- Photographs — natural photos have gradual color transitions and organic textures that hide lossy artifacts well. A photo compressed to 80% quality is virtually indistinguishable from the original.
- Web delivery — page load speed matters more than archival quality. An 8 MB PNG photo can compress to a 200 KB WebP with no visible difference at normal viewing sizes.
- Social media uploads— platforms re-compress your image anyway. Uploading a massive lossless PNG doesn't help; it just slows down the upload.
The quality sweet spot
For lossy compression of photographs, the sweet spot is typically between 75% and 85% quality. Below that range, you start seeing visible degradation. Above it, you're paying for quality improvements that nobody can actually perceive.
Here's what the quality spectrum actually looks like in practice for a typical photograph:
- 100% quality: ~3 MB. Visually identical to the original.
- 85% quality: ~800 KB. No visible difference at normal viewing distance. This is a good default.
- 75% quality: ~400 KB. Minor softening if you zoom in and compare side-by-side. Nobody will notice in normal use.
- 50% quality: ~200 KB. Subtle banding in gradients. Fine for thumbnails.
- 20% quality: ~80 KB. Clear block artifacts. Only acceptable for tiny previews or placeholder images.
The relationship between quality percentage and file size is not linear. The biggest savings come from dropping from 100% to 85%. Going from 85% to 75% saves much less. This is why 80-85% is considered the default sweet spot — it captures most of the savings with essentially no visible cost.
Format matters more than you think
The same photograph compressed to the same visual quality will produce dramatically different file sizes depending on format:
- JPEG: The workhorse. Good compression, universal support. No transparency, no animation. Use it when compatibility matters more than cutting-edge efficiency.
- WebP:Google's format. 25-35% smaller files than JPEG at equivalent quality. Supports transparency and animation. Supported in all modern browsers since 2020. This should be your default format for web images in 2026.
- AVIF: The newest mainstream format. Based on the AV1 video codec. 30-50% smaller than WebP at equivalent quality. Browser support is good (Chrome, Firefox, Safari 16+) but encoding is slower. Great for high-traffic pages where the encoding time is worth the bandwidth savings.
- PNG: Lossless only. Large files for photos but perfect for screenshots, diagrams, and images with transparency. Not the right choice for photographic content on the web.
Switching from JPEG to WebP at the same quality level is one of the easiest wins in web performance. You don't need to reduce quality at all — just changing the format shrinks files by roughly a third.
Common mistakes that destroy image quality
Re-compressing already compressed images
Every round of lossy compression introduces new artifacts. If you download a JPEG, edit it, and save as JPEG again, you've compressed it twice. Do this a few times and the degradation becomes obvious. Always work from the original source file when possible.
Compressing before resizing
Resize first, then compress. If you compress a 4000px image to reduce file size and then resize it to 800px, you've baked compression artifacts into the image before shrinking it. Resize to your target dimensions first, then apply compression to the smaller image. The smaller image will compress more efficiently anyway.
Using the wrong format
Saving a screenshot as JPEG introduces artifacts around text and sharp edges. Saving a photograph as PNG produces a massive file with no quality benefit. Match the format to the content.
Over-compressing for the use case
A hero image on your homepage is worth keeping at 80%+ quality. A thumbnail in a product grid that displays at 150px can be much more aggressively compressed — artifacts are invisible at that size.
A practical compression workflow
- Start with the largest, highest-quality sourceyou have. Don't compress from a previously compressed version.
- Resize to the actual display dimensions.If the image will display at 800px wide on a standard screen (or 1600px for retina), there's no reason to serve a 4000px image.
- Choose your format. WebP for photos on the web. PNG for screenshots, diagrams, and images needing transparency. AVIF if you want maximum compression and can afford encoding time.
- Set quality to 80% as a starting point for lossy formats. Adjust up or down based on visual inspection.
- Compare before and after.Look at the image at its actual display size, not zoomed in. If you can't tell the difference, you're good.
Compression without upload
Most online compression tools require you to upload your images to a remote server. For personal photos, client work, or anything confidential, that's a problem. Your images are processed on someone else's infrastructure, often with unclear retention policies.
Client-side compression — where the work happens entirely in your browser — avoids this. Modern browsers have the Canvas API and efficient image encoding built in. An image can be decoded, resized, quality-adjusted, and re-encoded to WebP or JPEG without ever leaving your device. The result is the same quality compression you'd get from a server, with the privacy of a desktop application.
MakeMyImgs' compress image toolworks this way. You drop an image in, adjust the quality slider, and download the compressed result. The file never leaves your browser. You can verify this yourself — open your browser's network tab and watch for outgoing requests. There won't be any.
Bottom line
Image compression is not a binary choice between “small file” and “good quality.” With the right format, the right quality setting, and the right workflow, you can cut file sizes by 80-90% with no visible quality loss. Use WebP, aim for 80% quality on photos, resize before you compress, and don't re-compress compressed images. That covers 95% of use cases.