Contrib.social

Add fallback format support to responsive images

Open on Drupal.org →
Created on 11 May 2021, about 3 years ago
Updated 14 November 2023, 7 months ago

Drupal 9.2 supports the webP image format (see change record: https://www.drupal.org/node/3171135 → ).

In order for browsers that do not support WebP (earlier versions of Safari & IE), the image needs to be wrapped in a <picture> tag like so:

<picture>
  <source srcset="my-awesome-picture.webp" type="image/webp">
  <img src="my-awesome-picture.jpg" alt="Awesome">
</picture>

Older browsers will look at the type attribute on the <source> element, and fallback to the <img> element.

This is next to impossible to do with Drupal core (although you can get it working in an extremely hacky way!)

The breakpoint module gives you the option to select media queries and multipliers, but does not give you an option to select the type.

I do not have an option to create multiple image styles on a single media query. I can hack this by creating multiple media queries such as 'all and (min-width: 1x)' and 'all and (min-width: 2x)'. But this is just plain ol' wrong.

Note this is solved in contrib through the https://www.drupal.org/project/webp → or https://www.drupal.org/project/imageapi_optimize_webp → modules. for Drupal 9.x There is no Drupal 10 support for those modules (yet).

✨ Feature request
Status

Needs work

Version

11.0 🔥

Component
Responsive image  →

Last updated 12 days ago

Created by

🇺🇸United States mherchel Gainesville, FL, US

Live updates comments and jobs are added and updated live.
  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024