Skip to content
Snippets Groups Projects
Select Git revision
  • 8.x-1.x
  • 8.x-1.0-rc2
  • 8.x-1.0-rc1
  • 8.x-1.0-beta7
  • 8.x-1.0-beta6
  • 8.x-1.0-beta5
  • 8.x-1.0-beta4
  • 8.x-1.0-beta3
  • 8.x-1.0-beta2
  • 8.x-1.0-beta1
  • 8.x-1.0-alpha2
  • 8.x-1.0-alpha1
12 results

webp

  • Clone with SSH
  • Clone with HTTPS
    • Martin Anderson-Clutz's avatar
    Issue #3228321 by jcisio: Missing schema for Image Optimize processor
    Martin Anderson-Clutz authored
    0b9ef848
    History
    Martin Anderson-Clutz's avatar 0b9ef848
    History
    Name Last commit Last update
    config
    src
    tests/src/Unit
    .htaccess
    README.md
    composer.json
    webp.info.yml
    webp.install
    webp.links.menu.yml
    webp.module
    webp.routing.yml
    webp.services.yml
    README.md

    WebP

    Creates a WebP copy of image style derivatives to decrease loading times.

    Description

    Whenever an image style derivative is created this module will also create a WebP copy of the derivative to be served to supporting browsers.

    Requirements

    This module requires one of the the following PHP extension:

    Installation

    1. Make sure your hosting supports webp. See Webp and Drupal for more information.
    2. Install the module.
    3. Install responsive_image module (Drupal 8 core)
    4. Select Responsive image in admin/config/media/responsive-image-style for the style you want to use
    5. Go to your content type, display, and choose responsive image (ie: admin/structure/types/manage/article/display)
    6. Optional clear caches, your html now should display something like this:
    <picture>
<source srcset="/sites/default/files/styles/max_325x325/public/2019-07/IMG_1949-orig_19.webp?itok=yZGyfm_Z 244w, /sites/default/files/styles/large/public/2019-07/IMG_1949-orig_19.JPG?itok=Q4k4z1-p 360w, /sites/default/files/styles/max_650x650/public/2019-07/IMG_1949-orig_19.JPG?itok=hUF_TXH1 488w, /sites/default/files/styles/max_1300x1300/public/2019-07/IMG_1949-orig_19.JPG?itok=_WBWx1bc 975w, /sites/default/files/styles/max_2600x2600/public/2019-07/IMG_1949-orig_19.JPG?itok=RhJu7FQA 1950w" type="image/webp" sizes="(min-width: 1290px) 1290px, 100vw">
<source srcset="/sites/default/files/styles/max_325x325/public/2019-07/IMG_1949-orig_19.JPG?itok=yZGyfm_Z 244w, /sites/default/files/styles/large/public/2019-07/IMG_1949-orig_19.JPG?itok=Q4k4z1-p 360w, /sites/default/files/styles/max_650x650/public/2019-07/IMG_1949-orig_19.JPG?itok=hUF_TXH1 488w, /sites/default/files/styles/max_1300x1300/public/2019-07/IMG_1949-orig_19.JPG?itok=_WBWx1bc 975w, /sites/default/files/styles/max_2600x2600/public/2019-07/IMG_1949-orig_19.JPG?itok=RhJu7FQA 1950w" type="image/jpeg" sizes="(min-width: 1290px) 1290px, 100vw">
</picture>

    Where the first source will be used by browsers supporting webp while the second will be picked up automatically for those that don't (ie Safari).

    More detailed instructions here: admin/structure/types/manage/article/display

    Installation (Old deprecated method)

    1. Install the module.
    2. Add image styles

    * This method does not work with all hostings, and is not the recommended way to use it. * Images displayed using Drupal core's "Responsive image" formatter don't depend on the .htaccess mechanism to serve WebP derivatives.

    Maintainers