As browsers and internet connections speed up, images play a bigger part in websites — literally. Before you upload that juicy picture, though, take a few minutes to prepare your images.
Size Matters
Yes, it’s okay in 2017 to use images much larger than you could use effectively in 2010. That said, you still need to ensure that your images don’t slow down page load speed significantly — if they do, visitors will leave and Google will penalize your site.
The solution is to use the biggest image for the purpose — but no bigger. So the first step in preparing an image for the web is to size it properly, and optimize it.
Digital image size is a function of length, width, and density. Density refers to the number of pixels per inch (or per centimeter).
Back in the early days of computing, it was important to choose a density (also known as DPI for dots per inch or PPI, for pixels per inch) of 72-96. That’s not the case today. However, the denser your image, the bigger its digital size.
For example, here’s an image I selected recently to use in an e-book.
I made a copy at a different resolution. Here you can see them side by side, with data about size and density.
Notice the image on the left, with a density of 144, weighs in at a whopping 5.7 MB in size, while the one at a density of 72 is only 1.2 MB. That’s a big difference! (If you can’t see the detail on your screen, click the image to see a full-size version.)
Density doesn’t really matter in terms of how the image displays on a screen (it does for print, but that’s another whole topic). But a denser image will use more bandwidth and load more slowly, so adjust the density before you upload the image to WordPress.
WordPress provides some image-editing capabilities, but you can only edit the length and width, not the density, so you need to take care of that before you upload. If you use a Mac, the included program, Preview, is all you need. On a Windows computer, I’m partial to a free image-editing program called Paint.NET. There are plenty of image-editing apps for iOs and Android devices as well.
Optimize
After you properly size the image, the next step is to optimize it. “Optimizing” refers to compiling the image in a web-friendly format, which will reduce the time it takes the image to load in a browser.
There are a number of websites where you can optimize images, but it’s easier to let WordPress do the heavy lifting on this.
I use a plugin called Smush.
Once installed, it works seamlessly in the background as you upload images. It adds a new column to the Media Library Index providing information about the file sizes, and if there’s an image it hasn’t yet optimized, just click the Smush Now button.
Install it from the WordPress repository, just as you install any other plugin. Once it’s activated, you’ll see this screen.
With the free plugin, you’ll be able to smush up to 50 images at a time, so if your site already has a lot of images you’ll need to run the smush more than once. (Pro users can smush all their images with one button click.)
Scroll down past the Smush Now button to see the settings.
The image sizes on your site might be different from these — the plugin pulls information from your theme settings that tell it the image sizes that are standard within your theme. If you don’t want Smush to run automatically as you upload images, move the selector button in the upper-right corner. It will be gray instead of green when it’s deselected.
You can set Smush to preserve EXIF data (information from your camera), but that adds to the image size, so unless you’re running a portfolio site for art or photography, it’s probably not necessary.
The last setting tells Smush to resize original images — you set the maximum length and width. Most bloggers and freelancers can save a lot of time by letting Smush do the work, but, depending on your niche, you may want to resize your own images before you upload.
Remember to click Update Settings when you’re done making changes.
How to Know What Size Image Works Best
There are usually two places to go to find out what size images are best (three if you’ve installed Smush). The first is in your theme’s settings.
For example, in this theme, from StudioPress, I see this.
This shows me that the standard thumbnail image size is 150 x150, a medium image is 400 x 400, and large is 1024 x 1024. The three settings prefixed by shop_ refer to the image sizes in WooCommerce. If you don’t know where to find the standard image sizes for your theme, consult the designer’s knowledge base or support.
The second place you’ll find image size settings is in the Settings / Media menu in the WordPress dashboard. Your theme will usually change the numbers to the correct ones for your theme.
Last, Smush will provide that information, as shown above. If you spotted that the image sizes shown above in the Smush examples, you get a gold star! The Smush screenshot above is from one of my sandbox sites, not this one, and it uses a different theme.
When you properly prepare images by sizing and optimizing them, your readers will thank you for the faster load times, and Google and the other search engines will rank your page higher than slower-loading competitors. That’s what I call a win-win.
Other Articles You’ll Like
- How to Create Stunning Images (Even If You Can’t Draw a Straight Line)
- 7 Great Places to Find Images for Your WordPress Website
Have you grabbed your free copy of The WordPress Beginner’s Blueprint yet?
