Why Your Website Is Slow (It's Probably Your Images)
90% of slow websites have one problem: unoptimized images. A 5MB hero image is not a flex. Here's how to fix it without losing quality.
Your website takes 8 seconds to load. Nobody is waiting 8 seconds. Studies show 53% of mobile users leave if a page takes longer than 3 seconds. Your beautiful design is loading to an empty room.
The culprit, 90% of the time: your images.
The Math of Oversized Images
Your hero image is 4000x3000 pixels, 5.2 MB. It displays in a container that’s 1200px wide. You’re downloading 3.3x more pixels than needed and 4x more bytes than necessary. On a phone, it displays at 375px. That’s 10x more data than needed.
This is like ordering a swimming pool of water when you wanted a glass. Your server delivers it, your user’s phone drinks what it can, and the rest goes to waste.
The Fix: Right Size, Right Format, Right Compression
Step 1: Resize. Use the image resize calculator to figure out what dimensions you actually need. If your container is 1200px max, your image should be 1200px (or 2400px for retina). Not 4000px.
Step 2: Estimate file size. Before exporting, use the file size estimator to predict how big your optimized image will be. Aim for under 200KB for hero images, under 50KB for thumbnails.
Step 3: Use modern formats. WebP is 25-35% smaller than JPEG at the same quality. If you have WebP files that need conversion for email or older systems, the WebP to PNG converter handles it.
Step 4: Check your DPI. Web images should be 72 DPI. If your image is 300 DPI (print resolution), it’s carrying 4x unnecessary data. Check with the DPI calculator.
How Much Does Speed Matter?
Google says page speed directly affects search rankings. Amazon found that every 100ms of latency cost them 1% in sales. Pinterest reduced load times by 40% and saw 15% more signups.
Use the page load estimator to see how your total page weight translates to load times on different connections. A user on 3G mobile is having a very different experience than you on your fiber connection.
The Lazy Loading Cheat Code
Add loading="lazy" to any image that’s not visible when the page first loads. The browser only downloads it when the user scrolls near it. Zero effort, instant improvement.
<img src="photo.webp" loading="lazy" alt="Description">This is literally one attribute that makes your page load faster. There’s no downside. Add it to every image below the fold.
The Performance Budget
Set a rule: no page should exceed 1.5 MB total. If your page is 3 MB, find the heaviest resources and optimize them first. Images are usually 60-80% of total page weight, so they’re always the best place to start.
Quick Wins (Do These Today)
- Resize all images to their display size (2x for retina)
- Convert to WebP format
- Add
loading="lazy"to below-fold images - Set a 1.5 MB page weight budget
- Test on a throttled connection (Chrome DevTools > Network > Slow 3G)
Your website’s speed is its first impression. Don’t let a 5 MB hero image be the reason nobody sticks around to see your content.