You have probably been here before. You try to email a batch of photos and it bounces. Or you upload a product image to your store and the page loads like it is 2006. Or your phone is full because every screenshot is inexplicably 4 MB.
The fix is simpler than you think, and you do not need Photoshop or any paid software. This guide walks you through the four ways images get smaller, when to use each one, and how to do it all for free in about thirty seconds per image.
Why images are so large in the first place
Modern phone cameras shoot at 12 to 200 megapixels. A single photo from a recent iPhone or Samsung is routinely 3 to 8 MB. Screenshots on a retina display are 2 to 4 MB. AI-generated images often arrive as uncompressed PNGs at 10 MB or more.
Most of that size is either unnecessary resolution (your blog does not need a 48-megapixel image) or inefficient encoding (the format is wasting bytes on detail your eyes cannot see). Both are fixable without touching the visible quality.
The four ways to make an image smaller
Every image optimization technique falls into one of four categories. You can combine them, and usually should:
1. Compression (the big one)
Compression is where most of the savings come from. It works by discarding visual information that your eyes cannot distinguish. A JPEG compressed to 80% quality looks identical to the original in almost every test, but the file is often 60 to 70% smaller.
There are two types:
- Lossy compression removes data permanently. A photo at quality 80 looks the same but is dramatically smaller. This is what you want for photos, social posts, and web images.
- Lossless compression reorganises the data more efficiently without removing anything. The file gets somewhat smaller (10 to 30%) but every pixel stays identical. Use this for medical images, legal documents, or any case where pixel-perfect fidelity matters.
For most people, lossy at quality 75 to 85 is the sweet spot. Google's own documentation recommends this range.
2. Resizing (the overlooked one)
Your phone captures a photo at 4032 x 3024 pixels. Your blog column is 800 pixels wide. That means the browser downloads a massive image and then throws away 80% of it to fit the space. You are making visitors download pixels they will never see.
Resize the image to the actual display size before uploading. A photo going into an 800px-wide blog column should be 800 to 1600px wide (the upper end covers retina screens). That alone can cut the file size by 75%.
3. Format conversion (the modern one)
Not all formats are created equal. The same photo saved as different formats at comparable visual quality:
If you are still serving PNG photos or unoptimised JPEGs, switching to WebP or AVIF can cut your file size in half with no visible difference. Every modern browser supports WebP. AVIF support is at 94% and growing. Read the full breakdown in our AVIF vs WebP comparison.
4. Metadata stripping (the hidden one)
Every photo from your phone carries EXIF metadata: GPS coordinates, camera model, lens settings, timestamps, sometimes a thumbnail copy of the image. This can add 50 to 200 KB per file. It is invisible to viewers but inflates the size.
Stripping metadata makes the file smaller and also protects your privacy by removing the location data. You can check what is hiding in your images with the metadata viewer.
How to do it: the practical steps
Here is the actual workflow. It takes about thirty seconds per image, or a few minutes for a batch.
For a single image (quick method)
- Open the image compressor. Drag your image in or click to upload.
- Set the quality. Start at 80. If the preview still looks sharp, try 75. If you see artifacts around text or edges, move it up to 85.
- Download. Compare the file size shown. You should see a 50 to 80% reduction.
That is the whole process for most people. If you need it even smaller, keep reading.
For maximum compression
Combine multiple techniques in this order:
- Resize first. Open the image resizer and set the width to what you actually need (800px for a blog, 1080px for social, 1600px for a full-width hero).
- Convert to a modern format. Use the WebP converter to switch from PNG or old JPEG to WebP. This alone saves 25 to 50%.
- Compress. Run it through the compressor at quality 75 to 80.
- Check the result. If it still looks good, you are done. If text or edges look crunchy, bump quality to 85 and compress again.
For a batch of images
If you have 20 or 200 images to process, doing them one at a time is painful. The image compressor lets you drop them in one at a time, set a quality level, and download each result instantly. Everything runs in your browser, nothing gets uploaded to a server.
How much smaller will your images get?
Real-world numbers from common scenarios:
| Starting point | What you do | Typical result | Savings |
|---|---|---|---|
| 6 MB phone photo | Resize to 1200px + compress at 80 | 180 KB | 97% |
| 3 MB screenshot (PNG) | Convert to WebP + compress | 250 KB | 92% |
| 850 KB JPEG from camera | Compress at quality 80 | 210 KB | 75% |
| 10 MB AI-generated PNG | Resize + convert to AVIF at 75 | 290 KB | 97% |
| 4 MB product photo | Resize to 1000px + WebP + compress | 95 KB | 98% |
These numbers are not theoretical. They are what happens when you combine resizing with modern formats and moderate compression. A 6 MB photo becoming 180 KB while looking identical is normal, not exceptional.
Quality settings explained (for people who hate guessing)
When a tool asks for a "quality" number, here is what the range actually means:
- 100: Maximum quality, minimal compression. File is barely smaller. Use only if required for archival or print.
- 85-95: Visually lossless to most people. Good for portfolio photography, product close-ups, or any image where fine detail matters commercially.
- 75-85: The sweet spot. Looks identical on screens, dramatically smaller files. Use this for blog images, social media, email attachments, and 90% of web images.
- 60-75: Noticeable softening if you pixel-peep, but fine at normal viewing distance. Good for thumbnails, background images, or situations where speed matters more than detail.
- Below 60: Visible artifacts. Only use for very small thumbnails or low-priority decorative images.
Common mistakes that make images bigger than they need to be
These are the patterns I see constantly:
Saving photos as PNG
PNG is designed for graphics with flat colours, text, and sharp edges (screenshots, logos, diagrams). It is terrible for photographs because it tries to preserve every single pixel losslessly. A photo that would be 200 KB as JPEG comes out at 2 MB as PNG. Unless your image has transparency or is a graphic, use JPEG or WebP.
Uploading at original resolution
A 4032 x 3024 photo displayed at 600px in a product grid is wasting 95% of its pixels. The browser still downloads all of them. Resize before uploading.
Re-saving an already compressed image
Each time you save a JPEG, it re-compresses and loses a tiny bit more quality. If you open a JPEG, make no changes, and save it again at quality 80, it gets slightly worse. Work from the original whenever possible. Do not compress an already-compressed image multiple times.
Ignoring retina displays
If your image displays at 400px on screen but you serve it at 400px, it looks blurry on retina devices (which is most phones and modern laptops). Serve at 2x the display size: 800px for a 400px slot. That covers retina without being wastefully huge.
Images for specific situations
For email attachments
Most email providers cap attachments at 20 to 25 MB total. If you are sending multiple photos, compress each one and aim for under 500 KB per image. Resize to 1600px wide maximum, nobody is printing photos from an email. Compress at quality 80.
For websites and blogs
Aim for under 200 KB per image. Hero images can go up to 300 KB. Thumbnails should be under 50 KB. Use WebP or AVIF if your platform supports it. Always set width and height attributes in your HTML to prevent layout shift.
For online stores and product images
Product images need to look sharp because they sell things. Use quality 85 to 90. Resize to exactly what your theme displays (usually 1000 to 1200px). For zoom functionality, keep a larger version but still compress it. A 4 MB product photo becoming 95 KB at quality 85 is perfectly sharp for web viewing.
For social media
Platforms re-compress everything you upload. Your goal is to give them a file that is already close to their target quality so they do minimal additional damage. Resize to the platform's recommended dimensions (1080 x 1350 for Instagram feed, 1080 x 1920 for stories) and compress at quality 85. The platform compresses further, but starting clean means less degradation.
Does compression hurt SEO?
The opposite. Google uses page speed as a ranking signal. The Largest Contentful Paint (LCP) metric, which is one of three Core Web Vitals, directly depends on how fast your biggest image loads. Smaller images mean faster LCP, which means better rankings.
Compressed images also reduce bandwidth costs, improve mobile experience, and lower your bounce rate because people do not leave waiting for a slow page to load. There is no SEO downside to properly compressed images. The downside is leaving them uncompressed.
Tools that do this automatically (if you do not want to think about it)
If you manage a website and want images optimised without a manual step every time:
- Cloudflare Polish: Automatically compresses and converts images to WebP/AVIF at the CDN level. Enable once, forget it.
- WordPress plugins (ShortPixel, Imagify, Smush): Compress on upload, serve WebP, and can bulk-optimise your existing library.
- Vercel / Next.js Image component: Auto-optimises, resizes, and format-converts at request time.
- Shopify, Squarespace, Wix: All auto-convert to modern formats and compress through their CDN. No action needed on your part.
For one-off images, manual tasks, or when you want full control, the browser-based compressor handles it in seconds with no signup and no server upload.
The 60-second version
If you just want the answer and do not want to read 2,000 words:
- Resize to the display size (800 to 1600px wide for web).
- Compress at quality 80.
- Use WebP if you can, JPEG if you cannot.
- Aim for under 200 KB per image on your site.
That covers 95% of cases. You now know more about image optimisation than most developers who never think about it at all.