Integration with WebP or ImageAPI Optimize Webp

Created on 1 March 2022, over 2 years ago

Updated 18 July 2023, over 1 year ago

Problem/Motivation

This module seems like a great solution to responsive images, but it'd be even greater if it provided webp images and the appropriate classes, maybe using a Modernizr technique.

What to do?

Check if webp generation is active for this responsive image style
Add modernizr.js to test webp compability (& set the body class) => https://www.drupal.org/docs/7/theming/tools-and-best-practices/modernizr... →

Change generated CSS-Code:

Current:

@media all and (min-width: 1367px) and (max-width: 1920px) {
      .CSSSELECTOR {
        background-image: url(/sites/default/files/styles/IMAGECACHE_X/public/media/image/foobar.png);
      }
}

Required Output Example:

@media all and (min-width: 1367px) and (max-width: 1920px) {
      .no-webp .CSSSELECTOR {
        background-image: url(/sites/default/files/styles/IMAGECACHE_X/public/media/image/foobar.png);
      }
      .webp .CSSSELECTOR {
        background-image: url(/sites/default/files/styles/IMAGECACHE_X/public/media/image/foobar.webp);
      }
}

✨ Feature request

Status

Active

Version

2.0

Component

Code

Created by

🇺🇸United States froboy Chicago, IL

Live updates comments and jobs are added and updated live.

Incomplete comments

Comments & Activities

Not all content is available!

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

Comment almost 2 years ago →
🇷🇴Romania xld
Hi!
Is there any plan to develop this feature?
Comment over 1 year ago →
anderz
Hi,

Stumbled upon this also when optimizing images with ImageAPI Optimize WebP ( https://www.drupal.org/project/imageapi_optimize_webp → ). The images are served as .webp when using core responsive image formatter, but when using Responsive Background Image format, the images are back in .jpg mode.

This feature would indeed be nice.
Comment over 1 year ago →
🇩🇪Germany Anybody Porta Westfalica
@anderz yes indeed, but someone has to work on it or sponsor development, otherwise nothing will happen. We'd all like to have that functionality :D

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024