Water droplets on a leaf

A Comprehensive Guide to WordPress Image 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!

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

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.

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.

Raster vs vector image format comparison

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.

GIFs

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.
GIF version of a Taiwan freeway sign

JPEGs

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.

Baker Beach

PNGs

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.

Basebal

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.

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:

Retina comparison

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.

Baker Beach (compressed JPEG)

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.

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.
For further information, consult Yoast’s excellent guide to optimizing images for SEO.

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:

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 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

28 Likes
20 Comments.
  1. Perfect timing for this post. I always aim to get my files the smallest that I need and always aim for under 200KB. Some are closer to 100KB.

    Here is my issue, I use Avada and WooCommerce and WooCommerce has it’s own thumbnail compressor and when it takes an 800x800px image at 222KB and resizes it to 500x500px it increased the physical size to 392KB.

    This is apparent on my home page where I use a woocommerce carousel.

    So, even though you try to minimize there seems to always be something that screws you up.

    If you know the answer to this dilemma and how to fix it, please let me know.

    • Tom Ewer

      Hi Michael,

      I’m afraid I’m not familiar with the WooCommerce thumbnail compressor, but I’m going to get in touch with the WooCommerce dev guys on your behalf and see if I can get an answer.

      On a similar note, one thing I didn’t mention in this article is that WordPress itself compresses JPEGs as standard. You can easily get around this with a little functions.php code though, which you can find here: http://premium.wpmudev.org/blog/fix-jpeg-compression/.

      Cheers,

      Tom

    • Tom Ewer

      One other thing Michael – in my (admittedly anecdotal) experience, you should be aiming for well under 100kb as a general rule. This isn’t always possible with screenshots, etc., if you want to offer true clarity, but it’s a good goal to aim for. Images over 200kb should be *very* rare.

    • Tom Ewer

      Hi Michael,

      I’ve checked and it transpires that WooCommerce uses WordPress’ native image handler, so there will be no issues on that front. You may want to check your thumbnail settings (via Settings > Media).

      Cheers,

      Tom

      • I thought it might. No reason to use something else.

        The setting are sparse as you know and are default to the install so nothing new.

        I have a ticket in with Woo so we will see what happens. In the mean time I’ll keep digging.

        Lucky me. 😀

        • Hey Mike,

          Looks like I have the same issue. I use Woocommerce + Avada and my thumbnails are larger in size than the original images.

          Just wondering if you have found what is causing this?

          Thanks!

  2. I use a plugin called Ewww or something like this.

  3. bcummins1

    Tom what pixel size should a header image be? The width to fill the full screen without losing quality of the header image? What size do we need? If I was going to size a image for the fusion slider per say.

    • Tom Ewer

      Hi there,

      Generally speaking, a header image should be as wide as its container, but I wouldn’t advise you to manually up-size an image beyond its original dimensions. There’s no universally recommended size I’m afraid, if that’s what you’re asking.

      Cheers,

      Tom

  4. In the Avada theme, shortcodes for ‘recent works’ and ‘blog’ seem to serve scaled full sized ‘featured images’ no matter what size they appear on the page.

    gtmetrix.com says this is really bad. For example: http://gtmetrix.com/reports/goringeaccountants.co.uk/aJEQDsFW

    http://goringeaccountants.co.uk/wordpress/wp-content/uploads/2013/06/kingsmen-construction-servi.jpg is resized in HTML or CSS from 600×300 to 290×145. Serving a scaled image could save 141.5KiB (76% reduction).

    Is there a way around this?

    • Luke

      Hi Alex!

      I replied to your ticket as well today, many of your images are very large and can be sized down. One was 2700px at 300kb, it can be reduced heavily. Your score will jump to an A if you can optimize all of those.

      In regards to blog and recent work, the full size image will only load in some cases, and that is to ensure the full ratio shows (no cropping). For example, blog grid or timeline will use the full size image, and so will recent work but ONLY if you set it to AUTO pic size. You can set it to fixed to avoid that.

      However we are going to be coming up with a new solution to image resizing for those blog and portfolio situations. That will come in a future update. For now though I would full;y recommend to work on the image optimization. For example, the image you used is 600×300 and 189kb. If you save it at 60 quality you can reduce it to a 1/3 of the size right away: http://d.pr/i/1hWrT

      So in summary, bog grid/timeline and recent works set to AUTO will use original image size and we are going to come up with a more streamlined solution to that. However the more important thing to do is to optimize the images before you upload to drastically reduce file size. If you have further questions about Avada please submit a ticket for us.

      Thanks!

  5. alexshortpixel

    Hi,
    please note that the link to Smushit it is long gone so you may want to remove it.

    Also I’d like to recommend you trying ShortPixel image optimization plugin:
    https://wordpress.org/plugins/shortpixel-image-optimiser/
    It looks like it could optimize the images on this page by over 30%
    https://shortpixel.com/free-demo/site/http://theme-fusion.com/wordpress-image-optimization-guide/

  6. Sorry, my English not very good
    About image size, WooCommerce  is: 500×600 (or up)
    But: default Open Graph image dimensions are 600x315px in Facebook, Pinterest, or default Twitter Card image dimensions from 600x600px ..
    WooCommerce  imgaes default Width  500px( I must Consider Cropping  my images )..

    Zeng pppdog

     

  7. Well done, very useful information for me in the beginning of work with Avada to create my website.

    November 2016 – Did something important change in preparing and optimizing images via the elapsed time, for the WordPress theme Avada?

    Best regards

    Julius

     

Leave a Reply

Your email address will not be published. Required fields are marked *

Proudly Serving Over 275000 Satisfied Users!