Contrib.social

Integration with WebP or ImageAPI Optimize Webp

Open on Drupal.org →
Created on 1 March 2022, over 2 years ago
Updated 18 July 2023, 12 months 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?

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