Optimisation des images Drupal : lazy loading + WebP
Une amélioration très importantes des performances du site peut être réalisée en apportant une grande attention au format et au poids des images. Drupal offre la possibilité de gérer cette optimisation facilement grâce à 3 modules :
- Responsive Image
- Blazy
- WebP
Responsive Image permet de créer des styles d’images adaptatives. Il est nécéssaire pour permettre la conversion des images au format webP.
Blazy va gérer le lazy loading et WebP va convertir l’image.
Voilà les 3 modules dont on va avoir besoin :
composer require 'drupal/blazy:^2.1'
drush en blazy
composer require 'drupal/webp:^1.0@beta'
drush en webp
drush en responsive_imageEtape 1 : Création d’un style d’image
Aller dans Styles d’images (/admin/config/media/image-styles)
Pour ce style d’image, on peut ajouter ces 2 effets :
- Convertir en jpg
- Echelle largeur 400px
Si vous n’avez pas besoin de transparence, le png n’est pas utile et est plus lourd que le jpg. On gagne sur le poids de l’image en effectuant une conversion en jpg.
La mise à l’échelle permet de gagner énormément sur le poids si l’image source est très grande. J’ai déjà vu des contributeurs envoyer des images de plusieurs dizaine de mega.
On pourrait ajouter un effet pour compresser l’image, par exemple jpg 80%. C’est possible mais il faut utiliser une autre boite à outils image.
Etape 2 : Création d’un styles d'images adaptatifs
Allez dans configuration / Media / style d’image adaptatif ou directement ici /admin/config/media/responsive-image-style
Et cliquer sur « Ajouter un style d'image adaptatif ». Pour chaque point de rupture (breakpoint), vous pouvez choisir un style d’image. Dans cet exemple, j’utilise le thème Bootstrap 4 Barrio et j’applique le même style d’image (400px max). Mais on pourrait optimiser encore plus en usant différent style d’image (par exemple 600px sur desktop et 300px sur mobile).
Etape 3 : On applique le style d’image et on active le lazy loading
On va appliquer ce style d’image sur le champ image de notre mode d’affichage teaser. Il faut éditer le type de contenu et aller dans « gérer l’affichage » (exemple avec le type de contenu article : /admin/structure/types/manage/article/display/teaser). On va modifier le format du champ image et choisir « Blazy » ce qui permet d’activer le lazy loading.
Ensuite, on va éditer les paramètres en cliquant sur la roue crantée et choisir le style d’image adaptatif et mettre à jour (ne pas oublier de cliquer sur mettre à jour et enregistrer ensuite).
Etape 4 : Vérification en front que l’image est bien formaté
Dernière étape, on va voir la page de liste en front ou le teaser est affiché. Le style d’image est appliqué : les images sources sont converties en jpg, redimensionné à maximum 400px de large et dans le code source on peut voir une balise Picture qui contient toutes les versions de l’images à charger en fonction de la résolution et au format webp.
Il y a une image au format jpg pour faire un fall back si le browser ne prend pas en charge le format webp.
<picture>
<source media="all and (min-width: 75em)" type="image/webp" srcset="/sites/default/files/styles/image_teaser_max_350/public/2020-12/abstract-1.jpeg.webp?itok=ovwHCUJX 1x">
<source media="all and (min-width: 62em) and (max-width: 74.99em)" type="image/webp" srcset="/sites/default/files/styles/image_teaser_max_350/public/2020-12/abstract-1.jpeg.webp?itok=ovwHCUJX 1x">
<source media="all and (min-width: 48em) and (max-width: 61.99em)" type="image/webp" srcset="/sites/default/files/styles/image_teaser_max_350/public/2020-12/abstract-1.jpeg.webp?itok=ovwHCUJX 1x">
<source media="all and (min-width: 34em) and (max-width: 47.99em)" type="image/webp" srcset="/sites/default/files/styles/image_teaser_max_350/public/2020-12/abstract-1.jpeg.webp?itok=ovwHCUJX 1x">
<source media="all and (min-width: 75em)" type="image/jpeg" srcset="/sites/default/files/styles/image_teaser_max_350/public/2020-12/abstract-1.jpeg.jpg?itok=ovwHCUJX 1x">
<source media="all and (min-width: 62em) and (max-width: 74.99em)" type="image/jpeg" srcset="/sites/default/files/styles/image_teaser_max_350/public/2020-12/abstract-1.jpeg.jpg?itok=ovwHCUJX 1x">
<source media="all and (min-width: 48em) and (max-width: 61.99em)" type="image/jpeg" srcset="/sites/default/files/styles/image_teaser_max_350/public/2020-12/abstract-1.jpeg.jpg?itok=ovwHCUJX 1x">
<source media="all and (min-width: 34em) and (max-width: 47.99em)" type="image/jpeg" srcset="/sites/default/files/styles/image_teaser_max_350/public/2020-12/abstract-1.jpeg.jpg?itok=ovwHCUJX 1x">
<img class="media__image media__element b-lazy b-responsive b-loaded" loading="lazy" src="/sites/default/files/styles/image_teaser_max_350/public/2020-12/abstract-1.jpeg.jpg?itok=ovwHCUJX" alt="Optimisation des images : lady loading + WebP" typeof="foaf:Image">
</picture>
Ajouter un commentaire