How to Compress Images for Web: The Complete Guide
Images account for over 60% of the average webpage's total file size. Compressing them correctly is the single highest-impact action you can take to speed up a website, improve SEO rankings, and reduce bounce rates — without any visible quality loss for users.
What Is Image Compression?
Image compression reduces the file size of an image by removing data that either cannot be seen by the human eye or is redundant. There are two types:
- Lossy compression — permanently removes some image data. JPEG uses lossy compression. A quality setting of 80 typically reduces file size by 60–80% with no perceptible quality change on screen.
- Lossless compression — removes only redundant metadata and patterns, preserving every pixel. PNG and WebP (lossless mode) use this. File size reduction is smaller — typically 10–30%.
For web use, lossy compression (JPEG or WebP) is almost always the right choice for photographs. Lossless (PNG) is better for logos, icons, and screenshots where sharp edges matter.
Choosing the Right Image Format
The format you choose has a bigger impact on file size than any compression setting.
JPEG — Best for Photographs
Use JPEG for photos, product images, and any image with gradients or complex color transitions. At quality 80, a typical 3MB phone photo becomes 150–300KB with no visible loss. JPEG does not support transparency.
PNG — Best for Graphics & Transparency
Use PNG for logos, icons, screenshots, and images with text or flat colors. PNG supports transparency (alpha channel). File sizes are larger than JPEG for photos, but PNG never degrades quality on re-save.
WebP — Best for Everything (Modern Browsers)
WebP produces 25–35% smaller files than JPEG at equivalent visual quality, and supports transparency like PNG. Supported by all modern browsers (Chrome, Firefox, Safari 14+, Edge). Use WebP as your default web format in 2026.
HEIC — iPhone Native, Needs Conversion
Modern iPhones shoot in HEIC by default. HEIC files are very small (1–2MB) but not widely supported on websites or social media. Convert HEIC to JPEG before uploading anywhere online.
The Right Quality Settings
Quality settings vary by format, but here are the industry-standard starting points:
| Use Case | JPEG Quality | WebP Quality | Expected Size |
|---|---|---|---|
| Website hero image | 80–85 | 80 | 100–300KB |
| Product / e-commerce | 80 | 75 | 80–200KB |
| Blog / article image | 75 | 70 | 50–150KB |
| Thumbnail / preview | 70 | 65 | 20–80KB |
| Email attachment | 70–75 | 70 | under 500KB |
The human eye cannot detect quality differences between 75 and 100 on a normal screen. Going below 60 starts to produce visible artifacts on photos.
Step-by-Step: Compress Images for Web
- Check the original size. Most phone cameras produce 3–8MB JPEG files. Even a "small" PNG screenshot can be 1–2MB. Identify files above 500KB as compression targets.
- Choose the right format. Photo → JPEG or WebP. Logo/icon → PNG or SVG. Screenshot → PNG or WebP.
- Resize dimensions first. A 4000×3000px image on a blog where the content column is 800px wide is 25× larger than needed. Resize to 1600px wide (2× for retina) before compressing. This alone cuts file size by 85%.
- Apply compression at quality 80. Start at 80 and check the result visually. Reduce to 75 if the file is still above your target size.
- Check Core Web Vitals. Use Google PageSpeed Insights after adding images to your page. Images should not cause LCP above 2.5 seconds on mobile.
Why Image Compression Matters for SEO
Google uses page speed as a ranking factor. Slow pages rank lower in search results, particularly for mobile searches which make up over 60% of global web traffic.
The three Core Web Vitals most affected by uncompressed images are:
- LCP (Largest Contentful Paint) — the time until the largest image or text block loads. Google wants this under 2.5 seconds. A 3MB hero image can push LCP to 8–10 seconds on mobile.
- CLS (Cumulative Layout Shift) — images without defined width/height attributes cause layout shifts as they load, hurting CLS score.
- INP (Interaction to Next Paint) — large images can indirectly hurt INP by blocking the main thread during decode.
A study by Portent found that a 1-second improvement in page load time increases conversion rate by 5–8% for e-commerce sites. For a blog, faster pages mean lower bounce rates and longer session duration — both signals that improve ranking.
Platform-Specific Compression Targets
Different platforms have different requirements. Here are the targets used by professionals:
| Platform | Max Size | Recommended Dimensions | Format |
|---|---|---|---|
| 8MB (compressed by IG) | 1080×1080px | JPEG | |
| 16MB | 1600px wide | JPEG | |
| Email attachment | under 1MB total | 1200px wide | JPEG |
| Government / visa forms | 50–200KB | 600–1200px | JPEG |
| Website hero image | under 300KB | 1920px wide | WebP or JPEG |
| 8MB | 1200×627px | JPEG |
Common Mistakes to Avoid
- Re-compressing already-compressed files. Every time a JPEG is saved at a lower quality, quality loss compounds. Always start from the original high-quality source file.
- Using PNG for photographs. A PNG photo is 5–10× larger than the same photo as a JPEG at quality 80, with no visible difference on screen.
- Forgetting to resize dimensions. Compressing a 4000px-wide image to quality 80 still produces a 1–2MB file. Resize to your display width first.
- Setting quality below 60. At quality 50–60, JPEG compression artifacts become clearly visible — blocky edges, color banding, and smearing in shadow areas.
- Not using alt text. Alt text is required for accessibility and helps Google understand image content, contributing to image search rankings.
Free Tools for Image Compression
The fastest way to compress images without installing software is to use a browser-based tool. Everything runs locally — your images never leave your device.
- Compress Image Online — reduce JPG, PNG, WebP size with a quality slider. Includes before/after comparison.
- Resize Image — change dimensions before compressing. Enter width and height or use percentage.
- Convert Image — convert PNG to JPEG or any format to WebP for smaller file sizes.
- Compress for Instagram — pre-set for Instagram's requirements.
- Compress for Email — target under 500KB for email attachments.
- HEIC to JPG — convert iPhone HEIC photos to JPEG before uploading.
Frequently Asked Questions
What is the best quality setting for web images?
Quality 80 is the standard starting point for web images. It produces a file 60–80% smaller than the original with no perceptible quality difference on a normal screen. For thumbnails and preview images, quality 70–75 is appropriate. Never go below 60 for JPEG — artifacts become clearly visible.
Should I use JPEG or WebP for my website?
Use WebP if your site supports it (all modern browsers in 2026 do). WebP produces 25–35% smaller files than JPEG at the same visual quality. If you need to support very old browsers or specific platforms that don't accept WebP, JPEG is the fallback.
Does compressing an image reduce its quality permanently?
For lossy formats like JPEG, yes — each time you save a JPEG at reduced quality, the quality loss is permanent and compounds. Always keep your original high-quality source file and compress a copy for web use. WebP and PNG lossless compression do not permanently reduce quality.
How small should images be for a website?
Hero images: under 300KB. Product images: under 200KB. Blog images: under 150KB. Thumbnails: under 80KB. These targets ensure fast loading on mobile connections while maintaining acceptable visual quality.
Why do my images look blurry after compression?
Blur in compressed images usually means the quality setting was set too low (below 60 for JPEG) or the image was compressed multiple times. Start from the original file and use quality 75–80. If an image still looks blurry at quality 80, the original resolution may be too low.
Does image compression affect SEO?
Indirectly, yes. Google uses page speed as a ranking factor, and uncompressed images are the most common cause of slow pages. Compressing images improves LCP (Largest Contentful Paint), which is a Core Web Vital that directly affects search rankings. Google also ranks images in image search based on page speed.
Ready to compress your images?
Free, browser-based, no upload to server. Your files never leave your device.
Compress Image Free →