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.
Keep reading
How to Optimize Images for SEO: A Complete Checklist
Image SEO is one of the most overlooked ranking factors. This checklist covers file names, alt text, compression, formats, and structured data to help your images rank.
Read more Image ToolsWebP vs JPG: Which Image Format is Better for Your Website?
WebP promises smaller files and better quality than JPG — but should you switch? We break down the real differences and when to use each format.
Read more Text ToolsLegacy Fonts to Unicode: The Complete Guide (Preeti, Kruti Dev, AnmolLipi, Bijoy)
Old South Asian documents are trapped in legacy ASCII fonts that break when shared. Here's what legacy fonts are, why they fail, and how to convert each one to Unicode for free.
Read more