Users are impatient. Studies show that 53% of mobile visitors leave a page that takes more than 3 seconds to load. Every second of delay costs conversions.
Images are the biggest contributor to slow websites. On an average page, images make up 60-70% of total page weight. Fix your images, and you fix most of your speed problems.
Step 1: Measure your current speed
You cannot improve what you do not measure. Start by running your site through:
- Google PageSpeed Insights - analyzes both mobile and desktop performance
- WebPageTest - advanced waterfall view of every request
- Lighthouse - built into Chrome DevTools
Each tool will show you which images are slowing you down, and how much bandwidth you can save. Look for the "Serve images in next-gen formats" and "Properly size images" suggestions.
Step 2: Compress your images
This is the single biggest win. Compression alone can cut 60-90% of your image weight.
The key is to compress at the right quality level. For most web images, quality 80% is the sweet spot - invisible to the human eye, but 60-70% smaller than the original.
🗜️ Compress Your Images Now
Free, private, and works in your browser. Target file size supported.
Open Compressor →Step 3: Use modern formats
The format you choose has a huge impact on file size. Here is the same photograph at quality 80% in each format:
| Format | Size | Browser Support |
|---|---|---|
| JPG | 250 KB | Universal |
| PNG | 800 KB | Universal |
| WebP | 180 KB | All modern |
| AVIF | 120 KB | Most modern |
Converting your images to WebP typically saves 25-35% compared to JPG. Converting to AVIF saves up to 50%.
Use our Image Converter to convert your existing images. For maximum performance, serve AVIF with a WebP fallback.
Step 4: Enable lazy loading
Lazy loading means images are only loaded when they scroll into view. Images below the fold are not loaded until the user scrolls down, saving bandwidth and improving initial page load.
In modern HTML, this is a one-word change:
<img src="photo.webp" loading="lazy" alt="..." />
Just add loading="lazy" to any image below the fold.
Your Largest Contentful Paint (LCP) image - usually the big hero image at the top - should NOT be lazy-loaded. Doing so will hurt your LCP score and slow down perceived load time.
Step 5: Use a CDN
A CDN (Content Delivery Network) caches your images on servers around the world. When a user visits your site, they download from the closest server rather than your origin server.
If your audience is global, a CDN can reduce image load times by 50-80%. Popular options:
- Cloudflare - free tier available
- Bunny.net - very affordable, high performance
- CloudFront - AWS solution
- Netlify's built-in CDN - free with Netlify hosting
Many CDNs (like Cloudflare) automatically convert JPG to WebP for browsers that support it. This is called "polish" or "automatic format optimization". Worth enabling if your CDN offers it.
Putting it all together
Here is a complete workflow for optimized images:
- Crop your image to remove unnecessary areas.
- Resize it to the maximum size it will be displayed at.
- Convert to WebP (or AVIF).
- Compress at quality 80%.
- Add
loading="lazy"for images below the fold. - Serve through a CDN.
This workflow can take a 5 MB uncompressed photo down to 80 KB - a 98% reduction with no visible quality loss.
Frequently asked questions
What is the biggest cause of slow image loading?
Uncompressed images. A single 5 MB photo can add several seconds to page load time. Compressing images typically delivers 60-90% of the total performance improvement.
Does lazy loading help with SEO?
Indirectly, yes. Lazy loading improves page speed metrics like LCP and TBT, which are part of Google's Core Web Vitals ranking signals. Just make sure the hero image is not lazy-loaded, or it will hurt LCP.
Should I use a CDN for images?
For global audiences, yes. A CDN caches images on servers around the world, so users download from a nearby location. This can cut load times by 50-80% for users far from your main server.
What is the recommended image size for web pages?
Aim for under 200 KB per image, and under 1 MB total for all images on a page. Hero images can be up to 300 KB but should be served in WebP or AVIF format.
How do I test my website's image performance?
Use Google PageSpeed Insights or Lighthouse. Both tools show you exactly which images are slowing down your site, and how much bandwidth you can save by optimizing them.
Final thoughts
Making images load faster is not complex - it just requires the right workflow and tools. Compress, convert to modern formats, lazy-load, and serve through a CDN.
Try our Image Compressor and Image Converter - both free, private, and running entirely in your browser.