Images are to websites like icing is to cake. Written content provides substance; imagery adds the flavor that sucks us in.
So why is it that, instead of simply complimenting content, images on many websites essentially make browsers choke as they struggle to load it all?
I’m guessing it’s that, as compelling as images can be, boning up on their more-technical aspects is as engaging as watching paint dry. As a result, people (not us, of course) unnecessarily dump tens or even hundreds of thousands of photo pixels into a single page or post.
It looks pretty and loads fast enough on their computer. Good enough, right?
Well, that depends.
It’s good enough if only your mom comes to your website and she’s super patient. Or if you don’t care that for every additional second it takes to load a page a significant chunk of your visitors will bail. It’s also OK if you’re absolutely certain all visitors love you no matter what, and you don’t mind that it takes so long to get through your site they don’t have the patience to visit many pages.
In other words, no – you can’t ignore what you do with images. Not if you’re trying to build an audience or sell a thing or get a message out.
I get that this is not the sexiest of topics. But if you’re free for the next nine minutes, 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 do this thing.
The only page speed rules you need to know
- Load more things, wait more time.
- Load big things, wait more time.
Think you’re not loading many things into your pages? Go to GTMetrix and use their web page analyzer. What number do you see under Requests? That’s how many things you’re loading.
Every image in a page counts as a request. These days most sites also use plugins, scripts and stylesheets that must be loaded.
Images, scripts and styles can help our sites look and work better. But every one your site uses drags it down a little more.
How do we deal with this? I mean, assuming a plain, ugly site deters visitors almost as much as a slow-ass website?
We load fewer things, because we choose only those that add to the overall page. And we load the smallest things possible to get the job done.
Right-size your images
Don’t use images any bigger than you have to. That’s a pretty simple idea, but it does require you to figure out after what point it’s overkill.
I don’t mind looking at code to figure out how wide an area is. If that’s not your idea of a good time, Google page ruler browser extension. Install one temporarily to help you measure the width of your header, sidebar, main content area, etc. Wherever you might put an image. Images bigger over the size of the area they’ll be used are a waste. They’ll unnecessarily slow your site. Use them at a smaller size.
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. If it was only a single image that might not be a huge deal.
To be honest, I only added a 1024-wide image because WordPress shows me certain default sizes. 1024-wide is one. It was easier to just click and accept. If you do that too I want you to know that it does not make you a bad person.
But I also want to make sure you understand 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.
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 there, 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.
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.
Friend, if I’m lyin’ I’m dyin’.
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.
Now before you freak the funk out and think I’m dumping a bunch more work on you, I’ve got an idea to make this pretty much painless. I’ll show you that as soon as we’re ready to wrap up this “right-size” idea. 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. But in case you forget…
Set up maximum dimensions in your Media Settings. If your site is on WordPress you’ll get to that 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. But anyway, if you want, you could forget altogether about changing the size in your camera or smartphone.
You should know, however, that WordPress keeps those originals. Uploading ginormous files will suck up your hosting space hella quick. And if you are a digital nomad working off mobile data, unnecessarily uploading bigger images is no bueno for reasons of speed as well as 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. Or you might find an HTML/CSS snippet you can copy, paste and edit to create a snazzy button with text instead of an image.
It could happen.
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/
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 noticably 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’s not 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.
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. Prices start at $69 for an average website. Get in touch if you’re interested.
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.