Why images make your website slow & what you can 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 may downrank your slow page or site.

Now, the good news

Images are pretty much the easiest non-nerd website fix ever.

You up for easy?

Let’s take a moment to (painlessly – I promise!) go over a couple of underlying ideas .

Related: I created a printable one-page image optimization tip sheet with synopses of the 5 most important points in this article. It’s free to those on my weekly e-mail list. Get it here.

Too much of a good thing

The relationship between images and websites is a lot like the one between icing and cake.

Written content offers substance; imagery adds the flavor that people really go for.

Trouble is, instead of using images only to add flavor or clarity, some people cram their pages with too many, or too-large (or, OMG, both!) images.

When an unsuspecting visitor navigates to an overloaded page, their browser is like a skinny guy in a hot dog eating contest.

Trying. But choking.

Let’s just acknowledge this fact: As compelling as images can be, boning up on their more-technical aspects is as engaging as watching paint dry.

I mean, the post looks pretty and loads fast enough on their computer. Why worry about anyone else?

Sure, there are some circumstances in which you can ignore the advice I’ll share in a moment:

• If only your mom comes to your website and she’s super patient.
• If you don’t care that for every additional second it takes to load a page a significant chunk of your visitors will bail.
• When you’re absolutely certain all visitors love you no matter what.
• You don’t mind that it takes so long to get through your site that even visitors who love you won’t have the patience to visit many pages.

For those actually trying to build an audience or sell a thing or get a message out, though – stick with me.

I’ll make it worth your while by sharing only the easiest-to-add, big-ROI tips and tactics that make your images kick ass and load fast.

Let’s get this party started, friend.

Right-size your images

Don’t use images any larger than you have to. That’s a pretty simple idea, but it does require you to figure out after what point it’s overkill.

Let’s illustrate the point with an example. Here’s a beautiful image of Arizona’s Antelope Canyon.

I originally used a 1024-pixel-wide image in its place.

That was a bit much, though, since even with my site displayed full-screen the largest it’ll appear is 800 pixels wide. That’s the width of this main content area you’re reading in right now.

All those extra pixels are loaded, but the image doesn’t look any better 🙁

Little things add up

If I used only one too-large image it might not be a huge deal. But it adds a little file size, and therefore download time.

One image on a page? Maybe no biggie.

Several? I’m probably going to click Edit Original in its Media Library entry and scale that sucka down. Or, if I’m hyper-aware of the effect of website speed on my visitors (have we met?), I might have done that even if it was the only image on the page. 😉

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.

Cheat a little

Is the image a background? Try a smaller size – even if you’re using it full width. You don’t need or want crisp detail in a background (hello, distraction), so skimping on pixels actually works to your advantage.

Check out the image at the top of my home page (open in a new window) to see how well this works.

Even when I’ve got my browser set to full screen (1920 pixels wide on the computer I’m using now), it looks good. Yet that image is only 800 pixels wide.

Know the size you need

If you don’t already know the maximum width for the area you want to add an image to, and you’re not comfortable looking at HTML, Google page ruler browser extension.

Install an extension temporarily to help you measure the width of your header, sidebar, main content area, etc. Wherever you might put an image.

Take note of the dimensions and avoid choosing a size larger than the spot where you’re embedding the image.

Use an actually smaller image

Here is one thing you need to absolutely be aware of when it comes to right-sizing images: 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.

You must scale down your images with a method that actually discards some pixels, else you’re loading the whole damn thing. And making people wait whilst your overly-large image loads, pixel…by pixel…by pixel.

Don’t worry – I’ve got an idea that’ll make this pretty much painless. We’ll cover it in a moment.

First, one more easy trick to loading no more than you have to.

Choose one of your theme’s automatically-created sizes that’s as small as will work for the spot where you’re using it. Here’s a screen grab to illustrate.

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

Here’s the easy way to resize images: Don’t!

First, 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.

Now, I know sometimes you want a larger image, for that one time in 7,886 when you want to print an image and frame it for Grandma. For auspicious occasions such as that, I suggest simply changing your camera settings back momentarily.

If you get lazy or just forget to change your camera settings, setting up maximum dimensions in your Media Settings is a good backup.

The best time to do this is before you need it.

On a WordPress site, you’ll get to those settings from Dashboard > Settings > Media. The image below shows how I have mine set up.

Now, everything usually is automatically resized as soon as you upload. I say “usually” because if you have other things installed (e.g., ShortPixel, which we’ll cover in a moment) that can alter your media, those settings might take precedence.

You could forget altogether about changing the size in your camera or smartphone. But WordPress keeps those originals, and uploading those ginormous files will suck up your hosting space hella quick.

If, like me, you are a digital nomad working off mobile data, unnecessarily uploading bigger images is no bueno for reasons of speed and data overage charges.

Instead of loading another image

The goal here is to get you thinking outside the box. I know not everything in this section will apply to your particular site or skill set. That’s OK. We’re after general principles that’ll guide you as you either get more info or get some help.

Here’s an idea to cache in on

You might know that web browsers store copies of images and other website files on your visitors’ computers. Whenever the browser sees that a page needs that same file again, it grabs it from this computer cache instead of loading it from the website. It makes things a lot faster.

The browser decides which images are the same based on their URL. So, where you can, skip uploading a new image and use something already in your website’s media library. This usually makes the most sense for header images.

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), but oftentimes you can either overlay text on an image or style the text to get the effect you want.

I realize this principle can be tricky to implement if you don’t have the right website theme or you don’t want to try CSS. But it’s worth mentioning because it might guide you as you choose a theme.

Make ’em easier to fetch

Remember how I said it’s faster to reuse an already-loaded image because the browser has it in its cache? You can do something similar to store all your images – or better yet, your entire site – so it’s closer to your visitors and loads at blazingly fast speeds.

This might sound like it involves crazy technical stuff. It does, but you don’t need a computer science education to take advantage of it. Setup ranges from clicking a button to messing around copying and pasting things you don’t have to actually understand.

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, but 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 I’ll tell you about is magnitudes better, but if you decide not to do it, or not do it right away, 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, and load them even if you later optimize all your images.

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

How to automagically serve smaller images to mobile users

If you’re a WordPress user, do nothing. I’m serious. Whenever you embed an image, WordPress automatically includes code that delivers smaller-sized images where it makes sense. WTG, WordPress.

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 today, 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

What will you optimize first? Leave a comment below and let me know, or give me a shout if you have a question or anything’s unclear. Like the idea of optimizing your images but don’t want to set it up yourself? Hire me. Want your whole web site optimized, not just your images? Get in touch if you’re interested. We can make your site faster.

Disclosure: I’m a ShortPixel affiliate. If you spend money with ShortPixel I may receive a commission. As you know if you’ve read much of my stuff, I only recommend things that kick ass and that I personally use all the time.