Page speed is one of the biggest factors affecting both user experience and search engine rankings. Studies consistently show that pages loading in under 2 seconds have significantly lower bounce rates and higher conversion rates. And the single biggest contributor to slow page load times? Oversized images.
In this guide, you'll learn everything you need to know about compressing images for the web — from understanding the difference between file formats to choosing the right quality settings for different use cases.
An uncompressed high-resolution photograph from a modern smartphone can easily be 5-15MB. Even a "normal" photo saved from a camera is often 2-4MB. When you put multiple images on a web page, you can quickly end up with 20-30MB of image data that visitors must download just to view your page.
Properly compressed images for web use should typically be:
There are two fundamental types of image compression:
Lossy compression permanently removes some image data to achieve smaller file sizes. The removed data is chosen intelligently — it's typically detail that the human eye is least likely to notice, like subtle colour variations in a solid-coloured area. JPEG uses lossy compression.
At quality settings of 70-85%, lossy compression is practically indistinguishable from the original to most viewers, while achieving 60-80% file size reductions.
Lossless compression reduces file size without removing any image data. The original image can be perfectly reconstructed from the compressed version. PNG uses lossless compression.
Lossless compression typically achieves 10-30% size reductions — much less than lossy, but with zero quality loss.
Rule of thumb: Use lossy compression (JPEG/WebP) for photographs and complex images. Use lossless compression (PNG) for logos, icons, screenshots, and images with text or sharp edges.
| Format | Best For | Compression | Transparency |
|---|---|---|---|
| JPEG | Photos | Lossy (excellent) | No |
| PNG | Graphics, logos | Lossless (moderate) | Yes |
| WebP | Everything | Lossy & lossless (best) | Yes |
| GIF | Simple animations | Lossless (limited) | Yes |
Most image compressors give you a quality slider from 1-100. Here's a practical guide to what those numbers mean:
Adjust quality with a live slider. Your images never leave your browser.
Compress Images →Aim for quality 75-80 for JPEG images. Always resize images to the actual display size before compressing — there's no benefit to having a 4000px wide image on a page that displays it at 800px.
Social media platforms recompress your images when you upload them, so there's limited benefit to uploading at maximum quality. A quality setting of 80-85 is sufficient and keeps upload times fast.
Most email providers have attachment size limits of 10-25MB. For photos being sent via email, a quality setting of 70-80 usually keeps the image looking great while staying under size limits.
Many application portals require photos under 100KB or 200KB. Use a quality setting of 60-70 and check the resulting file size. A passport photo compressed to 80KB at quality 65 still looks perfectly professional.
If you have multiple images to compress at once, batch compression saves significant time. Look for tools that let you select multiple files and apply the same compression settings to all of them simultaneously.
Nanivolt's image compressor supports up to 10 images per batch for free users, and up to 50 images per batch for Pro users.
WebP is a modern image format developed by Google that typically produces files 25-35% smaller than equivalent JPEG or PNG files at the same visual quality. All modern browsers support WebP.
If you're building a website, converting your images to WebP is one of the most impactful things you can do for page speed. The main limitation is that some older applications don't open WebP files, so for general sharing purposes, JPEG remains the safer choice.
Compressing images for web is about finding the right balance between visual quality and file size. For most purposes, a quality setting of 70-80% using JPEG or WebP format gives excellent results at dramatically reduced file sizes.
Always use a tool that processes images locally in your browser to keep your photos private, and consider WebP format for any images that will be displayed on websites.