How to Compress Images for Website Speed (The Right Way)
Uncompressed images are the #1 cause of slow websites. Learn the right settings, formats, and workflow to compress images without hurting quality.
Why Image Size Directly Affects Your Rankings
Google uses page speed as a ranking factor. Studies consistently show that images account for 50–90% of a webpage's total size. A page that loads in 1 second converts 3× better than one that takes 5 seconds.
The fix is simple: compress and optimize every image before uploading.
The Ideal Image Size for Websites
| Image Type | Target File Size | Max Dimensions |
|---|---|---|
| Hero / banner image | Under 300KB | 1920px wide |
| Blog featured image | Under 150KB | 1200px wide |
| Product image | Under 100KB | 800px wide |
| Thumbnail | Under 30KB | 400px wide |
| Logo / icon | Under 10KB | As needed |
Step 1: Choose the Right Format
JPG — Best for photographs. Small files, universal support. Can't do transparency.
PNG — Best for logos, screenshots, and anything with text or transparency. Larger files than JPG.
WebP — Best for web. 25–35% smaller than JPG at the same quality. Supported by all modern browsers. Use this whenever possible.
Rule of thumb: Photos → WebP (or JPG). Logos/UI elements → PNG or WebP with transparency.
Step 2: Resize Before Compressing
Don't upload a 4000×3000px photo if it's displayed at 800×600px. Resize first — this alone can reduce file size by 70–80%.
For responsive sites, target the largest size the image will be displayed at, then let CSS scale it down for smaller screens.
Try: Resize Image free →
Step 3: Compress at the Right Quality
For web images, 70–80% quality is the sweet spot — significant size reduction with no visible difference.
| Use Case | Quality Setting |
|---|---|
| General web images | 70–75% |
| Hero images (viewed large) | 75–80% |
| Thumbnails | 65–70% |
| Print output | 85–95% |
Step 4: Convert to WebP
After compressing, convert to WebP for the smallest final file size. WebP is now supported by Chrome, Firefox, Safari, and Edge — covering 95%+ of users.
A Simple Workflow for Every Image
- Resize to the display dimensions
- Compress at 75% quality
- Convert to WebP
- Check the final file size — aim for the targets in the table above
Following this workflow consistently will cut your average page weight by 60–80%.
Tools That Don't Require Software
All of the steps above can be done in your browser for free — no Photoshop, no plugins, no subscriptions.