image Formats

Page Speed for WordPress 2: Next-Gen Image Formats

As described in our previous post, a good way to get a handle on the current state of your website’s page speed would be to make use of Chrome’s Lighthouse extension. Now, if you haven’t attempted any performance optimizations yet, chances are that a Lighthouse audit will come back at you with the suggestion that you "Serve images in next-gen formats." Ummm… OK, why would we want to do that?

Newer image formats such as JPEG 2000, JPEG XR, and WebP offer far better compression than JPEG/PNG, resulting in a much smaller file-sizes and (yes!) faster download times.

For example, the JPEG version of our featured image at the top of this page has a file size of 212 KB, whereas the WebP version of the same graphic is only 37 KB. Certainly, this is something you should take note of, especially if your site contains a large number of images and/or big honking full-page graphics etc.

Later in this post, we’ll be taking a look at how we can implement these so-called next-gen image formats in WordPress… But first, the big picture…

Next-Gen Image Format Browser Support

In a perfect world, each and every modern browser would graciously accept all of these wonderful new image formats with open arms, right? Of course, as per usual, this is not the case. As of this writing:

  • JPEG 2000: Supported by Safari but not by IE, Microsoft Edge, Chrome, Opera or FireFox.
  • JPEG XR: Supported by IE and Microsoft Edge but not by Safari, Chrome, Opera or FireFox.
  • WebP: Supported by Chrome, Microsoft Edge*, Opera and FireFox but not by Safari or IE.

*And to muddy the waters even further, there appears to be a bug with Microsoft Edge that prevents it from rendering webP image files if the user is running Windows with Windows Defender Application Guard turned on. Alrighty then, maybe we’re being a tad over-optimistic, but we’ll assume that Microsoft is working on a fix for future versions of Edge.

Another thing we should keep in mind is backward-compatibility: some folks, for whatever reason, may still be using older browsers that lack support for ANY of these newer formats. Yeah, OK, way more complicated than it needs to be. But, whatever — it is what it is.

Anyways, of the next-gen image format options currently available, WebP seems to be enjoying the widest support — in our opinion, if we had to pick a winner in this race, the smart money would be on WebP.

Manually Coding the Picture Element

Here’s the HTML 5 code that’ll allow our page to display next-gen images with cross-browser support:

<picture>
  <source type="image/webp" srcset="images/myImage.webp">
  <source type="image/vnd.ms-photo" srcset="images/myImage.jxr">
  <source type="image/jp2" srcset="images/myImage.jp2">
  <img src="images/myImage.jpg" alt="My Image">
</picture>

When a browser encounters the above <picture> element, it’ll go through the list of files provided looking for an image format that it supports. When it finds one that it likes, that’s what it’ll display on our page. If none of the next-gen formats listed in our <picture> element are supported (i.e. in older browsers), not a problem: we’ve got a good old JPEG set up as our fallback image.

How to do this in WordPress?

So, does the WordPress platform actually support these new-fangled next-gen image formats? The short answer to that is no, not directly. In the current version of WordPress, attempting to upload a WebP, JPEG 2000 or JPEG XR to your media library will result in an error message — it simply won’t allow it.

There are a couple of ways around this, however — you could upload your files via FTP & manually code a <picture> element into your page/post as described earlier, or, you could go the (much easier) plugin route — There are several options available that can basically automate the entire process for you.

In our on-going quest to optimize this particular site we’ve tested a number of different plugin options. Of the ones we’ve tried, here are a couple that we feel confident in recommending:

  • WebP Express: Installation and set-up was quick, easy and relatively painless. Once you’ve got WebP Express installed and activated, it will automatically convert your PNGs & JPEGs into webP and generate the appropriate <picture> element wherever it’s required.

    Be forewarned, however, that in order for the plugin’s image conversion functions to work, your server needs to have the required libraries (GD, imageMagick) compiled with webP support. If you do happen to run into this issue, there are one or two workarounds suggested in the plugin’s documentation that’ll help you get things up-and-running.

  • ShortPixel Image Optimizer: Good support for a number of different image formats (including webP). Plus, all of ShortPixel’s file conversion and optimization happens in the cloud, so no need to worry about whether or not your host server has the necessary libraries installed.

    With a ShortPixel free account, you’ll get 100 image optimization credits a month (these expire after 30 days). Additional credits can be obtained by purchasing one of their paid plans.

The thing we found interesting was that there doesn’t appear to be any WordPress plugin support for either JPEG 2000 or JPEG XR (none that we could find, anyways). It would seem that WebP may well be the front-runner in the ‘who will be the successor to JPEG’ race. But who knows, things could change.

Does WordPress have plans to add native support in future versions? We certainly hope so. Our guess is that they’re waiting to see how the browser support fiasco plays out before they commit to any major changes. Until then, we’ll have to make do with third-party plugins etc.

In Conclusion

Implementing support for next-gen image formats on your WordPress site may, at first, seem like a daunting task. In reality, however, it’s not all that difficult — provided, of course that you don’t run into any weird compatibility or server configuration issues (I’m looking at YOU GoDaddy). Even if things don’t work out with the plugins we’ve suggested here, it’s just a matter of hitting the ‘de-activate’ button and your site will revert back to it’s previous state.

As for the benefits, after transitioning to webP from JPEG, we’ve noticed a fairly significant improvement in our Lighthouse Performance audit scores — anywhere from 5 to 7 points on some pages. Whether or not this will have a positive influence on our site’s SEO ranking remains to be seen — we’ll have to get back to you on that. In any event, we’re fairly certain that smaller image files & faster loading pages ain’t gonna hurt matters any!

If you have questions or if you need assistance in getting any of this to work for you, feel free to leave a comment below or give us a shout via our contact page — we’d be happy to help!