Website optimization: Why images slow your site & what to do about it

Images make a bigger impact on site performance than most people realize.

That’s not great news, for a number of reasons – chief among them that visitors are way more impatient than you think.

Oh ya, and our friends at Google. They might downrank your slow page or site.

The good news: Image optimization is easy

In fact, optimizing images is pretty much the easiest non-nerd website optimization tactic ever.

There are only a couple of things you have to understand about images to get your head around why they’re kind of a big deal if you care about website optimization.

First, the more images a page or post has, the longer it’ll take to load.

Next, larger images take longer to load up in a browser than smaller ones.

That’s it.

Let’s touch on why, and then jump to how to get your images – and your website – loading more quickly.

Related: We made a printable image optimization tip sheet to help you cover your image optimization bases; get it here.

More images = slower website

When you load up a page or post with many images, your visitor’s web browser acts like a skinny guy in a hot dog eating contest.

Trying. But choking.

If you need the image to illustrate a point, by all means use it. But don’t throw in extra images just for the sake of decoration.

Larger images = slower website

Larger images take longer to load than smaller images. So if you can get away with using something smaller, do it.

Figure out the width of the area the image will go into, and don’t use a larger image. Check out the Antelope Canyon image below.

The largest this image could possibly appear is 800 pixels wide, because it’s constrained by the 800-pixel-wide content area it’s in.

The average camera phone image includes many times the pixels actually needed. Same with stock images. It’s really easy to inadvertently load up your site with crazy-big images unless you set up your workflow to avoid it.

7 ways to do image optimization like a boss

1: Keep those pixels in check

One too-large image might not be a huge deal.

Usually, though, the same factors in play for one oversized image wind up adding hundreds of thousands of extra pixels and MB to the average WordPress Media Library.

Unless you’re a professional photographer or you need to clearly show tiny details, a 1,000-pixel wide image is probably gracious plenty for most posts and pages.

If you’re using an image full-width, like for a site or page header, you might want double that.

Figure out what you need and set your camera or your image optimization plugin to limit the size so you’ll never have to think about it.

2: Background image?

Using the image as a background? Try a size that’s smaller than the actual width of the area.

Even if you want the image to cover the full width, skimping on pixels can work to your advantage since the last thing you want in a background is crisp detail.

3: Is that image actually smaller?

When it comes to right-sizing images, know this:

Using the click-and-drag ‘handles’ in the WordPress post/page editor does NOTHING to the actual size of your images.

It only adjusts the size at which they appear.

Scale down your images with a method that actually discards some pixels; otherwise you’re loading the whole damn thing, however large it may be.

(Don’t worry – we’ll share a tool that’ll make this pretty much painless.)

4: Set things up so you don’t have to even think about image size

What’s the easiest way to resize? Don’t!

Grab whatever you use to shoot images. Cameraphone. Camera camera. Whatever.

Set that thing to be the max width you will ever need. BOOM – your workflow just lost a big step. No need to resize.

5: Use text instead of a text image

Text is super speedy to load because it’s almost always already included in the page instead of a separate thing the browser has to go out and get.

Sometimes you will need an image with text – a pinnable image for Pinterest, for example. Often, though, you can either overlay text on an image or style the text and get the effect you want.

6: Make images easier to fetch

A CDN (or Content Delivery Network) stores your stuff in multiple locations. When a visitor’s browser arrives at your CDN-enabled site, the closest location delivers the files.

You’d think going out to yet another place on the web would add time. Nope! It’s crazy how much of an effect moving stuff closer to visitors has on your site’s loading speed.

Jetpack Image CDN

If you have the Jetpack plugin installed, one of its dozens of modules (too many, BTW – turn off those you don’t need) is an image CDN.

The next option we’ll tell you about is magnitudes better, but if you decide not to do it, use the Jetpack CDN. It’s free, and easy to set up. Pretty much just clicking a button.

Get instructions here: https://jetpack.com/support/photon/

BUT: Do NOT turn on Photon if you haven’t optimized your images! It’ll store those unoptimized speed killers indefinitely. Even if you later optimize all your images, it won’t show visitors the optimized ones.

Cloudflare

Cloudflare is a CDN for your entire website – not just your images.

If you’re willing to go through a few more steps than it takes to activate the Jetpack CDN, you’ll be rewarded with a much zippier website or blog.

There are other benefits to using Cloudflare (e.g., protecting against attacks and outages), but speed alone is motivation enough to use it.

Cloudflare replaces Jetpack’s Image CDN, so deactivate that module before setting up Cloudflare.

You’ll have to sign up for an account, but the free level is just fine for the average WordPress user. You’ll also need to change your nameservers to Cloudflare’s to let them handle your website traffic. This means logging in wherever you manage your DNS (usually where you registered your domain name) and pasting in the nameserver information you’ll get when you sign up.

Get full instructions and sign up here: https://support.cloudflare.com/hc/en-us/categories/200275218-Getting-Started

7: The “short” answer to many image optimization questions

Image compression is a great way to reduce the size of image files and increase page load speed.

The best image compression tools work without noticeably affecting quality. They’ll also help you easily optimize your entire Media Library, and keep it optimized by automatically resizing and compressing anything you upload.

There’s 100% upside in the right image compression solution; there’s no one who shouldn’t use it.

The bad news: There’s no such thing as a free lunch

Image optimization isn’t something you should have to think about or work hard at. When it is, it doesn’t get done.

Free plugins have limits that force you to spend extra time on optimization. That isn’t the only reason I don’t recommend them. But it’s the biggest.

As of now, none of the free plugins I’ve looked at are good for automatically optimizing an entire Media Library.

If your library isn’t optimized and free is more important to you than the one-time $10-20 you’d spend to save hours of tedious clicking, use WP Smush.

If that’s you, no need to waste time reading the next section. Thanks for hanging with me this far. Now go get WP Smush and get busy clicking.

Good news: How about a cheap, fast, easy and actually good image optimization plugin?

For people who appreciate quality and find repetitive clicking mind numbing, there’s ShortPixel.

ShortPixel is a ‘freemium’ plugin. It costs nothing to download. With it you can optimize 100 images per month for free. For myself as well as 9/10 of the sites I optimize, that’s plenty for maintenance once I’ve optimized existing Media Library images.

When you do need to pay ShortPixel, it won’t be much. $10 for 10,000 images? Pfffft – chump change.

The more you need, the cheaper it gets. Of the paid image optimization plugins I’ve personally used, ShortPixel is the least expensive. That’s not why I use and recommend it, though.

• ShortPixel performs the best. Period. I use its maximum level of compression and my images still look great. On average my images are compressed by nearly half, saving over 52MB of space (and counting) in my web hosting account.
• I set up maximum image sizes. Now, everything I upload is automatically optimized. I don’t have to think about it or do anything extra.
• I tick “Remove EXIF” in ShortPixel’s General settings, and it deletes that data from the image file, reducing its size by an average of 8.5% more.
• If I upload a PNG, ShortPixel converts it to a JPEG automatically if it’ll save on file size.
• ShortPixel connects with Cloudflare so my visitors always get my optimized images.

WP Beginner tested five popular image compression plugins, and ShortPixel came out on top. I didn’t see their test until after I began writing this post, but it confirms my experience.

I always wondered why Media Libraries supposedly already optimized by WP Smush were drastically smaller after I replaced Smush with ShortPixel. Now I know.

That’s a wrap

Did we cover all the bases? Or do you still have questions? Leave a comment below and let us know.

Or maybe you’d like a 100% optimized Media Library and a faster-loading website, without DIYing it? Our WordPress Website Speed Optimization service is just the ticket.

Ready to quit messing around and improve your site’s speed? Here ya go:

Disclosure: We’re a ShortPixel affiliate. If you spend money with ShortPixel we receive a commission. As you know if you’ve read much of our stuff, we only recommend things that kick ass and that we personally use.