Next generation image formats in Drupal

Submitted by John on Sun, 08/16/2020 - 16:47
The text JPEG, the letters look slightly distorted as you can see compression artifacts around them, a consequence of the standard JPEG compression process when set to low quality.

I had a client ask me about improving their mobile site speed by using "Next Generation Image formats." These are the new formats like WebP, and JPEG-2000, which offer a greatly increased improvement over the traditional JPEG. The first time I heard about these must have been about five years ago, when a fellow web developer friend (who does not use Drupal) was showing me some of his work where he was adopting them. One thing to note, these formats are only supported by particular browsers. While WebP has seen adoption across Chrome, Firefox, and IE/Edge, Apple's Safari browser does not support WebP, and will require either the traditional JPEG, or the newer JPEG-2000 format.

What's more, these formats are normally displayed in an HTML 5 <picture> element, which allows for you to define multiple images in formats that work with each browser. However, there doesn’t seem to be much infrastructure in Drupal for generating images in these formats. What is needed is to convert to using the ImageMagick php extension for all image handling, then install these modules:

Unfortunately, there doesn’t seem to be anything in the Drupal ecosystem that handles JPEG-2000 image conversion at this time. Which means that Safari and iOS users would not be able to benefit from these next gen formats unless someone decides to create a module that does handle it. For the sites I typically work on, I would also need to figure out how to provide the URLs to these alternative images to templates, and update their include code to provide the options appropriate to each browser.

A common approach I see used for featured images, which often has content hovering over it, is to set it as the "backround-image:" property as an inline attribute on the element itself. This is often done inline in the element, e.g. 

<div class="hero__image" style="background-image: url('/sites/default/files/styles/my-image.jpg')"></div>

This is very commonly used with large, featured/Hero type images, which undeniably are the type of images that are likely to benefit the most from using next generation formats. However, this would need to be updated to accommodate the differing browser support. As far as I know, there is no way to handle this. I think what is needed here would be to convert these styles back to some separate CSS using a module similar to

Changing this approach to a more traditional stylesheet include would also provides the benefit of handling Content Security Policies (CSP) better. If you are using something like that now, which is becoming a more common requirement, especially for government sites, But that's an entirely different set of issues that need to be tackled in the Drupal ecosystem.