Skip to main content
John Brandenburg

Main navigation

  • Home
  • About Me
  • Tech
  • Voting Rights
    • Close Polling Stations:
    • Reject Absentee Ballots
    • 482,000 de-registered voters in Wisconsin since 2016
    • Deceptive Practices by poll workers
    • Gerrymandering
    • Lack of Early Voting
    • Purge Voters
    • Removing Voting Rights from Former Felons
    • Unreliable Voting Equipment
    • Voter ID Laws
User account menu
  • Log in

Breadcrumb

  1. Home

Next generation image formats in Drupal

By John, 16 August, 2020
Image
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:

  • ImageMagick 
  • WebP 

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 https://www.drupal.org/project/bg_image_formatter.

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. 

RSS feed
Powered by Drupal