The secret to smaller images without visible quality loss is a three-step combination: resize the image to the size it will actually be shown, choose the right format, then compress at around 60 to 80% quality. Most photos from phones are far larger than any screen needs, so they can shrink by 70 to 90% and still look sharp. Here is how to do it with free tools that run in your browser.
- Resize first: a 4000 px photo shown at 1200 px wastes most of its weight.
- JPG or WebP for photos; PNG only for graphics that need transparency.
- Compress at 60 to 80% for websites; lower for strict form limits.
- Keep the original in case you need it later.
Why images are so large
Modern phone cameras capture 12 to 50 megapixels, producing files of several megabytes. A website hero image rarely needs more than about 1600 to 2000 pixels wide, and a blog image around 1200. The extra pixels add weight but no visible benefit on screens.
Step 1: Resize to the display size
| Use | Recommended width |
|---|---|
| Website hero / banner | 1600 to 2000 px |
| Blog content image | 1200 px |
| Product photo | 1000 to 1500 px |
| Thumbnail | 300 to 600 px |
| Email attachment | 1200 to 1600 px |
Crop and resize with the free Image Cropper & Compressor.
Step 2: Choose the right format
Need a different format? Use the free Image Converter. For a deeper comparison, read JPG vs PNG vs WebP.
Step 3: Compress smartly
- Open the compressorGo to the free Image Compressor. It runs in your browser.
- Start at 70% qualityA great balance for most photos.
- Compare and adjustIf it still looks perfect, try 60%. If you see blocky areas, go back up.
- Download and check the sizeMost web photos should end up under 200 KB.
Getting under 100 KB or 50 KB for online forms
Job portals, university and government forms often require photos under strict limits. Crop tightly to the face or document, resize to the required pixel size (for example 300 × 300 px for many photo fields), then compress at 40 to 60%. Always follow the exact dimensions stated by the form.
Lossy vs lossless compression
Lossy compression (JPG, most WebP) removes detail the eye barely notices and gives big savings. Lossless compression (PNG, lossless WebP) keeps every pixel but saves less. For photos, lossy at a sensible quality is the right choice.
Running a WordPress website? Read our guide to image optimisation for WordPress.
Frequently asked questions
How can I reduce image size without losing quality?
Resize the image to its display size, use JPG or WebP for photos, and compress at about 60 to 80% quality. The difference is usually invisible on screens.
What is a good image size for websites?
Aim for under 200 KB for most photos and under 100 KB for thumbnails, at the width they will be displayed.
How do I reduce a photo to under 100 KB?
Crop tightly, resize to the required dimensions and compress at around 50%, then check the file size and adjust.
Does compressing an image reduce its resolution?
Compression reduces file size by removing detail; resizing reduces resolution. Use both together for the best result.
Shrink photos for websites, email and forms in seconds, privately in your browser.
Guides for this tool
Guide · 3 min readLossy vs Lossless Compression: Which Should You Use for Images?
Guide · 3 min readHow to Email Large Photos: Make Images Small Enough to Send
Guide · 3 min readHow to Send High-Quality Photos on WhatsApp (HD and Original)
Guide · 3 min readWordPress Image Optimisation: Speed Up Your Website (2026 Guide)Want a tool, website or app like this for your business?
Every free tool on this site is designed and coded by Tanvir H, a Bangladesh-based WordPress and Elementor web designer with 7+ years of experience and 650+ projects for clients worldwide. Fast, mobile-first, search-optimised websites that turn visitors into customers.
- 650+ projects
- 7+ years
- 4.9★ rating
- Govt. registered freelancer
