Optimization

Let’s start with the bad news: Failing to optimize your images for WordPress is a potential recipe for disaster in terms of user engagement, search listings and bottom-line revenue.

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!

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.

Recent research from the HTTP Archive suggests that images, along with Javascript bloat, are the main culprits in average page sizes now weighing in at a hefty 1.25MB. So what, you might ask? Well, 73% of mobile internet users report recently coming across a website that they found too slow to load.

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.

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.

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.

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.

You can take a deeper dive into the individual raster formats over at Sitepoint’s excellent overview and sneak a peek at the possible future with Google’s WebP project.

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.

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 befunkey are also worth a look.

Here’s a simple checklist for resizing images:

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. (Not sure what retina means? Take this useful primer.)

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!

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.

There are also dedicated offline apps on the market that specialize purely in image compression. Check out ImageOptim on the Mac or Trimage on both Mac and Windows.

We also recommend having a look at the recent range of dedicated online image compression tools. Leading contenders here include TinyPNG, Compressor.io and Kraken.

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:

For further information, consult Yoast’s excellent guide to optimizing images for SEO.

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:

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:

We hope this article has given you some useful pointers on optimizing your WordPress images. It’s a key step to build into your workflow and one of the simplest ways of quickly seeing improved user engagement, higher search rankings and an increase in mobile traffic on your site.

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!

Image Credits: Joey Gannon, Yug, Jay8g, Brocken Inaglory, Tage Olsin