Your Images Are Probably Too Big (Here's How to Fix It)

I ran a website audit last week for a friend's photography portfolio. Beautiful images. Gorgeous work.

The homepage took 12 seconds to load.

The culprit? A single hero image that was 8MB. On a phone connection, visitors were gone before they saw anything.

This happens more than you'd think. So let's talk about fixing it.

The Problem Nobody Notices

When you export an image from Photoshop or your phone, it's usually way bigger than needed. A 4000x3000 photo straight from a camera might be 15MB.

For a website, you rarely need anything over 200KB—sometimes less.

The difference matters:

| Image Size | Load Time (3G) | Load Time (4G) | |------------|----------------|----------------| | 5MB | 40+ seconds | 8 seconds | | 500KB | 4 seconds | under 1 second | | 100KB | under 1 second | instant |

That 5MB image isn't just slow—it's also eating your visitors' data plans.

Step 1: Resize First

Before you compress anything, check the dimensions.

If your website displays an image at 800 pixels wide, there's no point uploading a 4000-pixel original. You're sending 5x more data than needed.

Figure out the largest size your image will display at (check on desktop—usually the biggest), then resize to that width. Add maybe 20% buffer for retina displays if you want.

Step 2: Compress It

Now that your image is the right size, compress it.

Modern compression algorithms are surprisingly good. You can often reduce file size by 60-80% with no visible quality loss. Seriously—put the before and after side by side and try to spot the difference.

A few things to know:

JPEG quality 80-85 is usually the sweet spot. Below 70, you start seeing artifacts. Above 90, you're wasting bytes for invisible improvements.

PNG is lossless, so it compresses less. But it's still worth running through a compressor to strip metadata and optimize the encoding.

WebP gives you the best of both worlds—smaller files than JPEG with transparency support like PNG. Most browsers support it now.

Step 3: Pick the Right Format

This matters more than people realize.

Use JPEG for:

• Photos
• Images with lots of colors and gradients
• Backgrounds

Use PNG for:

• Logos
• Icons
• Screenshots
• Anything needing transparency

Use WebP for:

• Everything, if your audience uses modern browsers
• Fallback to JPEG/PNG for older browsers

Use SVG for:

• Simple graphics
• Icons
• Logos (if you have the vector file)
• Anything that needs to scale infinitely

Real Numbers

Here's what happened when I optimized my friend's portfolio:

| Before | After | |--------|-------| | Hero image: 8MB | Hero image: 180KB | | Thumbnail grid: 12MB total | Thumbnail grid: 400KB total | | Page load: 12 seconds | Page load: 1.8 seconds |

Same images. Same visual quality. Just properly optimized.

The Lazy Way

If you're uploading to WordPress, Squarespace, or similar platforms, they often compress images automatically. But "often" isn't "always," and their compression isn't always aggressive enough.

Better approach: optimize before you upload. You control the quality, and you're not depending on whatever the platform decides to do.

Takes 2 minutes per image. Your visitors will thank you—even if they never know why your site feels fast.

Quick Checklist

Before uploading any image:

1. Is it the right size? Don't upload 4000px when you need 800px
2. Is it compressed? Run it through a compressor
3. Is it the right format? JPEG for photos, PNG for graphics, WebP if possible
4. Did you test it? Look at the final version. If it looks bad, dial back the compression

---

Website speed is mostly about images. Fix your images, and you've fixed half your performance problems. Everything else is optimization at the margins.

Start with your biggest images first. Usually that's hero banners and full-width photos. Those give you the biggest wins for the least effort.