The good news? Image optimization is a pretty simple thing to get right and one of the quickest shortcuts you can take to transforming a good site into a great site.
In this post, we’ll take a comprehensive look at everything you need to know to take your content to the next level by optimizing your WordPress images like a pro. Let’s get going!
Do I Really Need to Optimize My Images?
Back in the mists of Internet time, everyone was on dial-up and connection speeds came in one flavor: slow. In those days, image optimization was naturally at the very top of any developer’s to-do list. However, fast forward a few years through the broadband revolution and people are happily streaming the Superbowl live on their smartphones.
With that in mind, do we really still need to worry about a few kilobytes here or there with images? Let’s look at three critical reasons why the answer is an emphatic yes.
1. Page Load Times Matter to Users
It gets worse. In the same report, fully half of web users say they expect a website to load within two seconds. Meanwhile, the average page on a mobile device loads in seven seconds.
The conclusion is simple: First impressions count. Clog up your site with unnecessarily large images and you risk antagonizing your visitors straight out of the gate.
2. Image Bloat Puts Search Engine Rankings at Risk
As far back as 2010, Google officially announced that site speed is a ranking factor. Their stated aim is that your page should load in one second or less. The verdict is very much in: a slow page will hurt your search engine rankings.
3. Slow Pages Equal Lost Revenue
Combine user dissatisfaction with plummeting organic rankings and you have a recipe for financial ruin. According to a recent Strangeloop report, a one second delay in page load time translates into a 7% loss in conversions for most sites. Can you really afford to leave up to 10% or more of revenue on the table?
The need for optimization is clear. But before we dive into the nitty-gritty, let’s take a quick refresher on images for the web.
What Do I Need to Know About Images for the Web?
Web images can broken into two categories: vector and raster.
Vector images are mathematically generated, resolution independent and scalable to any size without loss of quality. They’re perfect for illustrated elements such as backgrounds or logos, and their file sizes are typically tiny.
After years of wrangling, modern browser support for Scalable Vector Graphics (SVGs) is finally nearly implemented across the board and, from the optimization point of view, they arrive pretty much perfect out of the box.
The fixed pixel dimensions of raster images on the other hand are where we need to do a little more work. Let’s have a quick look at the three standard formats.
The workhorse of the early web due to their small size, suitability for text and simple graphics (as shown in the Taiwanese freeway sign below) and support for transparency. These have made a comeback of late in the recent craze for animated GIFs.
Long the universal standard for online photos, JPEGs compress superbly but are let down by a lack of transparency support. The twilight shot from Baker Beach below shows their suitability for gradient heavy images with a large range of colors.
Offer lossless compression, excellent image quality and support for transparency as shown in the baseball image below. The downside is the larger file sizes that result.
Should I Consider Cropping?
The answer is almost certainly yes. Trimming the visual fat kills two birds with one stone: your images will pack more visual punch and the filesize will come down.
Looking for inspiration? There’s a great tutorial over at The Next Web to get you started with creatively filling the frame.
Do I Need to Resize My Images?
The default images produced by modern digital cameras are far larger than anything you need for WordPress. Depending on your device’s quality settings, they could be as huge as 7360 x 4912 pixels and well over 30mb. Further resizing of these images for the web is essential.
You’ll need a decent tool to do this of course, and for many years that effectively meant only one thing: Photoshop. It’s more affordable than ever these days with Adobe’s Creative Cloud packages but an impressive range of online and offline alternatives have also emerged over recent years.
For offline use, consider Pixelmator on the Mac or IrfanView on Windows. You can even use the default Preview and Paint programs for Mac and PC respectively (I do!). Gimp also provides a free, cross-platform, open-source alternative if you can stomach the learning curve, and online options like Pixlr and Fotoflexer are also worth a look.
Here’s a simple checklist for resizing images:
- Always ensure you’re working on a copy rather than the original high-quality source file.
- Open the image with your editor and reduce it to your desired pixel size while being careful to maintain aspect ratio.
What Do I Need to Be Retina Ready?
(Not sure what retina means? Take this useful primer.)
There’s no putting the Retina Display genie back in the bottle. 300dpi devices are here to stay and their percentage of site traffic is only going to increase. So unless you want your carefully chosen images suddenly looking choppy and pixelated on newer devices, you’ll need to adjust accordingly. Check out the example below via the good folks over at the Jetpack blog for a graphic example:
Current best practice is to output two versions of your images: one at your base pixel size requirement and a 2X version for retina. For example, a 300px x 300px JPEG would also be output at 600px x 600px.
When it comes to choosing which version is displayed on your WordPress site, you can either roll your own solution using Retina.js or use one of the two leading WordPress plugins to do the heavy lifting: WP Retina 2x or Simple WP Retina. Take your pick!
How Do I Compress My Images?
So, you’ve prepped your images and factored in display requirements across a range of devices. It’s a good start in terms of optimization, but compression is often the step where the biggest gains are made.
Compression is the process of algorithmically eliminating image information that the human eye (hopefully) cannot detect. Done correctly, you can expect to decrease your image sizes dramatically. in short, it’s well worth doing.
In contrast to PNGs, JPEGs use “lossy” compression which means there is more room for savings, but you’ll have to check the results carefully for unwanted visual artefacts post-compression as shown in the heavily compressed detail of our earlier Baker Beach image below. You’re aiming for a balance of the lowest file size with the highest possible image quality. For a full discussion of the trade-offs involved, check out HTML5Rocks’ excellent image compression overview.
With the offline image editors mentioned earlier, you’ll simply by using the built-in Save-as options and tweaking. Consult this piece for a detailed breakdown of how to do this in Photoshop.
How Do I Optimize My Images for SEO?
So far we’ve concentrated on the “physical” properties of images, but SEO image optimization is arguably equally important to your site’s success. Let’s run through the basics:
- Filenames: Use descriptive filenames that include your keywords rather than meaningless default names. For example, use “2015-nissan-centra-green.jpg” rather than “AAA1432E.JPEG”.
- Alt tags: Every image should have a clearly written, non-spammy Alt tag for SEO and wider accessibility. For example, “alt=’Front view of a green, 2015 Nissan Centra'”. Title tags can also be included but bring little SEO benefit.
- Captions: Not required for SEO but may be useful for on-page user orientation and reading flow. Use at your discretion.
How Do I Optimize Beyond WordPress?
All this image optimization work is in vain if your site is springing a leak somewhere else in the stack. It’s a huge subject to cover but start with the following:
- Speed test tools: Benchmark your current performance with standard site speed test tools.
- Content Delivery Networks: Look to offload delivery of images and static assets to a CDN and leverage caching.
- Server/hosting setup: Benchmark your hosting provider and ensure your server is optimized for WordPress.
How Do I Avoid Re-Inventing the Wheel?
Leverage the power of checklists by turning image optimization into a documented, repeatable process that can be executed by anybody. Your exact requirements will naturally vary, but start with this 5-step outline for your checklist and refine from there:
- Always select the right image format for the job.
- Crop images intelligently to maximize impact.
- Resize images for standard and retina display.
- Apply image compression and visually proof results.
- Optimize all images for SEO.
We’ve tried to stick to the classic image optimization techniques above but there are new tips and tricks emerging every day. Drop us a line in the comments if you have any to share or feel we’ve missed something that could be helpful to other WordPress site owners. Happy optimizing!