How to Compress Images for the Web Without Losing Quality
Images are usually the heaviest part of a web page. Large files slow loading, frustrate visitors and can hurt search performance. The good news is that you can shrink most images dramatically with no visible loss, if you follow the right order of steps.
Step 1: Resize to the display size
Phones create photos 3,000 to 4,000 pixels wide, yet a blog image rarely needs more than 1,200 to 1,600 pixels. Reducing dimensions is the single biggest saving, because the file holds far fewer pixels. As a guide:
| Use | Suggested width |
|---|---|
| Full-width hero image | 1,600–2,000 px wide |
| Blog or article image | 1,000–1,400 px wide |
| Thumbnail or card | 400–800 px wide |
| Email image | About 600–800 px wide |
Step 2: Choose the right format
Use JPG or WebP for photos, PNG or WebP for graphics, logos and transparency. See JPG vs PNG vs WebP for a full comparison.
Step 3: Set the quality
| Quality | Result |
|---|---|
| 90–100% | Almost no visible loss, small saving |
| 75–85% | Excellent balance for most photos |
| 60–70% | Noticeably smaller, fine for backgrounds and thumbnails |
| Below 50% | Visible artefacts, avoid for important images |
Step 4: Compare before and after
View the result at the size it will appear. Look at faces, text and smooth gradients, where compression artefacts show first. If something looks wrong, raise the quality a little and try again.
Step 5: Keep your originals
Lossy formats lose a little detail each time they are saved. Keep an untouched original and always compress from it rather than from a previous compressed copy.
Do it privately in your browser
Figuro's Image Compressor & Resizer lets you set maximum width and height, choose quality and pick JPG, WebP or PNG. Everything runs on your device, so your pictures are not uploaded anywhere.
More ways to speed up images
- Use descriptive file names and alt text, which helps accessibility and search.
- Load images below the fold lazily so they do not block the first view.
- Serve appropriately sized images to phones instead of one huge file for everyone.
- If you need a single document, combine compressed images with JPG to PDF.
Why image optimization matters for SEO and speed
Search engines and visitors both prefer fast pages. Large images slow down Largest Contentful Paint (LCP), one of Google's Core Web Vitals, and increase bounce rates on mobile networks. Optimizing images is one of the quickest ways to improve page speed. Test your pages with tools such as Google PageSpeed Insights or Lighthouse to see which images are too large.
Target file sizes by image type
| Image | Reasonable target |
|---|---|
| Hero or banner image | 100–250 KB |
| Blog or article photo | 50–150 KB |
| Product thumbnail | 15–40 KB |
| Icon or small graphic | Under 10 KB, ideally SVG |
| Background texture | Under 100 KB |
These are guidelines, not rules. Judge the image by how it looks at its display size and how much it slows the page.
Support high-resolution (retina) screens
Retina displays have twice as many pixels per inch. If an image appears 600 pixels wide on screen, a 1,200-pixel version looks sharper on high-density screens. Use the srcset attribute to offer several sizes and let the browser choose, so phones download smaller files than desktop computers.
Remove unnecessary metadata
Photos include EXIF metadata such as camera model, date and sometimes GPS location. Stripping it saves a few kilobytes and protects privacy when you publish photos online. Compressing an image in your browser with the image compressor re-encodes it and typically drops this extra data.
Batch workflow for many images
- Create a folder of originals and never edit them directly.
- Resize all images to the maximum width your site needs.
- Export at 75–85% quality as WebP or JPG.
- Give files descriptive names, all lowercase, with hyphens.
- Upload and check the page on a phone with a slower connection.
Common mistakes to avoid
- Uploading full-size camera photos and shrinking them with HTML or CSS, which still downloads the large file.
- Saving screenshots of text as JPG, which blurs letters.
- Compressing the same JPG again and again until it looks blocky.
- Forgetting alt text, which hurts accessibility and misses an SEO opportunity.
- Using images instead of real text for headings and key information.
Compress images for social media and email
Social networks recompress uploads, so start with a clean, correctly sized image such as 1200 × 630 pixels for link previews. For email, keep images under about 600 to 800 pixels wide and use JPG or PNG for broad compatibility. Our guide to JPG vs PNG vs WebP explains the format trade-offs in more detail.
Key terms: image compression, lossy, lossless, image optimization, resize image, reduce file size, WebP, JPG quality, srcset, lazy loading, Largest Contentful Paint, EXIF metadata.
Frequently asked questions
How small should a web image be?
There is no single number, but many guides aim for under 200 KB for typical content images and under a few hundred KB for hero images, as long as the quality looks good.
Does compression reduce image quality?
Lossy compression removes some detail, but at moderate settings the difference is hard to see. Lossless methods keep every pixel but save less space.
Should I use WebP everywhere?
WebP is widely supported and efficient, but keep JPG or PNG versions for situations where software may not support it.
How do I reduce image size without losing quality?
Resize the image to the size you need, choose an efficient format like WebP or JPG, and use a quality around 75–85%. Compare before and after at display size.
Is it safe to compress photos online?
Tools that run in your browser, such as Figuro's image compressor, process files on your device and do not upload them. Other services may upload your images, so read their privacy policy.
Why is my image still large after compression?
The pixel dimensions may be too big. Reduce the width and height first, and consider switching format, for example from PNG to WebP for a photo.
Ready to run the numbers yourself?
Try the Image Compressor & Resizer →