How to Compress Images for a Website
Step-by-step guide to optimizing images for web performance using the right format, dimensions, and compression settings.
Images typically account for 50–75% of a webpage's total byte size. Proper image optimization is the single biggest improvement you can make to page load speed.
Step-by-Step Guide
Convert to WebP
Use filecraft.tools/jpg-to-webp or png-to-webp. WebP is 25–34% smaller than JPEG with equivalent quality.
Resize to actual display dimensions
Use filecraft.tools/resize-image to resize images to their actual display size. A 4000px image served at 800px wastes 25× the bandwidth.
Compress at 75–85% quality
Use filecraft.tools/compress-image at 80% quality. This is invisible to the human eye but saves 50–70% of file size.
Use lazy loading
In HTML: <img loading="lazy">. This defers off-screen images until the user scrolls to them.
Try it now — free, no account, no upload
Open Compress Image →Pro Tips
- 💡Target under 200KB per image for most web images
- 💡Hero images can be up to 400KB at 1200px wide
- 💡Use srcset for responsive images to serve smaller images on mobile
Frequently Asked Questions
What is the optimal image size for a website?
For standard web content: 800–1200px wide, under 200KB. For hero images: 1200–1800px wide, under 400KB. For thumbnails: 400–600px wide, under 50KB.