One popular request I get all the time (after “Make my site sexy, Adam!”) is “Make my site fast, Adam!” And you know what pops into my mind first after the Big Three? Images.
So today, let’s talk speed. (And don’t worry, I’ll tell you what the Big Three are right now.)
Let’s assume you’re hitting the Big Three already (here we go!) :
- Quality Hosting (the number one predictor of site speed, which is why I only recommend Flywheel and SiteGround these days)
- Quality Theme (I’m a StudioPress man all day)
- No unnecessary plugins (the more you have, the more things there are that have to load, and that can slow your site down)
… then the biggest obstacle to a fast site is huge, bloated, unoptimized images.
In this post, I’m going to show you how to take those images and make them lean, mean, fast-loading image machines.
Camera to Site?
Lots of people upload photos directly from their phones (which take HUGE, multi-megapixel images) to their sites, and then wonder why their sites load slowly.
An image on your site should be in the low kb, not MB.
Example: See that image up top? The one of the mountain biker flying down the trail? I got that image from Unsplash (thanks, William Hook!). When I first downloaded it, it was 4000 x 3000 pixels, and weighed in at 2.4MB. Which is awesome, if it was going into Photoshop or something. But let’s see how it changes as we go, shall we?
Next, let’s look both at where to find awesome images you can use (in case you’re not taking them yourself), and then how to take whatever image you’ve chosen and make it not bog your site down like a full diaper.
Choosing Awesome Images
If you’re snapping 100% of your own images, you can skip this section.
We live in a golden age of web photography. There are tons of sites that offer completely free, totally high-quality images you can use on your site, and you don’t even have to give the photographer credit (although if you want to, it’s really cool to do so).
What you want to look for is the “CC0” license: Creative Commons Zero. What is it?
CC0 enables scientists, educators, artists and other creators and owners of copyright- or database-protected content to waive those interests in their works and thereby place them as completely as possible in the public domain, so that others may freely build upon, enhance and reuse the works for any purposes without restriction under copyright or database law.
Cool, huh? It’s as free as free can get. If you want to read more on it, you can do so on the creative commons website.)
These sites are my favorites
I keep a list of the sites I like to use when searching for cc0 images. There are plenty more than this out there, but these are the ones I like best:
- ISO Republic
- Life Of Pix
Unsplash is the reigning champion, for sure, although librestock is a nice one-stop-shopping alternative. And if you haven’t seen Gratisography before and you’re looking for more… unique… images, give them a look.
Optimizing – the Secret Sauce
Before uploading your image into your page/post, let’s understand what you’ve got in your hands: a full-size, ready to edit, most likely HUGE image.
Even if it’s being used as a full-width background image on your site, you only need AT MOST 2400px in width for something like that (more on this below), and images you get from stock sites or your digital camera/phone are going to be more like 4000px, 5000px, or larger.
That’s a whole lot of extra file size that you don’t need, and your website readers don’t want to wait for.
Crop that bad boy
To use your shiny new image on your site without bogging it down like a diaper in a jet ski engine (what is it with me and diapers today?), it has to be cut to size and optimized.
What size do you change it to?
Depends on where it’s being used, and the site it’s being used on, but here are some general guidelines (all widths in pixels) :
- Full-width backgrounds: 1500 to 1800
- Full width of your content area: 800 to 1200
- As a partial-width image: 300 to 600 will probably do it
Example: When I cropped our image from 4000px wide to 660px wide, the size went from 2.4MB to 121kb. And yeah, a megabyte is a thousand kilobytes. So, just changing the size saved us 95%
of the file size already. Dude.
How to change the size of an image
Changing an image’s size isn’t really hard – and you may already have what you need to do it on your computer already.
If you’re on a mac, Preview can reduce an image’s size pretty easily. (If you’re on a pc, I don’t know what to tell you, since I don’t use one – but google is most likely you’re best friend.)
If you want to check out some other software, I’ve heard good things about PhotoScape (pc and mac). I believe you can check it out for free, too – it comes with a “time-unlimited” trial.
(fwiw, I use Pixelmator and love it. It’s $30, same as PhotoScape’s Pro upgrade.)
Either way, you could also upload the image as-is and use WordPress’ built-in image editing features to crop, scale, rotate, flip, and otherwise get your image ready to go. Cool, huh?
There’s a simple article at WPBeginner that can walk you through it (video, too) – it’s from 2014, but things haven’t changed much since then with the image editing interface, believe it or not.
Time to optimize
Now that you’ve got your image the size you want it, did you know that you can reduce the file size of an image without a noticeable change in quality? I know, it blew my mind the first time, too.
After cropping and whatever else I need to do with an image, I run pretty much every image through TinyPNG (isn’t that panda the cutest?) before I upload it to a site. It’s amazeballs. Seriously.
But what if I’m using WordPress to edit it? No worries – there’s a plugin for that! Two, actually.
How much does this really make a difference?
Example: Our image started at 2.4MB, went down to 121kb after resizing it, and 61kb after compression with the help of the TinyPNG panda.
So, on a typical internet connection, the original photo would take about five seconds to download, while the optimized image would take about .125 seconds.
Now, before you start thinking, “that’s not really much – five seconds?” Remember that we’re talking about one image – and a typical web page is made up of html files, scripts, css files, and probably 20+ images (if not a hundred) that all need to download together. The cumulative effect here is huge.
Enjoy the speed!
If you’ve been using un-optimized images before, just wait until you load up your site after swapping out those beasts with lean, clean images. It’ll blow your mind.