README.md 2.75 KB
Newer Older
Bart Vanhoutte's avatar
Bart Vanhoutte committed
1
# WebP
2
3
Creates a WebP copy of image style derivatives to decrease loading times.

Bart Vanhoutte's avatar
Bart Vanhoutte committed
4
## Description
5
6
7
Whenever an image style derivative is created this module will also create 
a WebP copy of the derivative to be served to supporting browsers.

Bart Vanhoutte's avatar
Bart Vanhoutte committed
8
## Requirements
9
This module requires one of the the following PHP extension:
10
11

 * GD - http://php.net/manual/en/book.image.php
12
 * ImageMagick with webp - https://imagemagick.org/script/webp.php
13

Bart Vanhoutte's avatar
Bart Vanhoutte committed
14
## Installation
15
 0. Make sure your hosting supports webp. See [Webp and Drupal](https://dev.acquia.com/blog/webp-and-drupal) for more information.
16
 1. Install the module.
17
18
19
20
 2. Install responsive_image module (Drupal 8 core)
 3. Select Responsive image in admin/config/media/responsive-image-style for the style you want to use
 4. Go to your content type, display, and choose responsive image (ie: admin/structure/types/manage/article/display)
 5. Optional clear caches, your html now should display something like this:
21

22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
``` 
<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.
39
40
 \* Images displayed using Drupal core's "Responsive image" formatter
 don't depend on the .htaccess mechanism to serve WebP derivatives.
41

Bart Vanhoutte's avatar
Bart Vanhoutte committed
42
## Maintainers
43
* Bart Vanhoutte (Bart Vanhoutte) - https://www.drupal.org/user/1133754
44
* Alex Moreno - https://www.alexmoreno.net - https://www.drupal.org/u/alexmoreno