Optimisation des images Drupal : lazy loading + WebP

01/12/2020

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_image

Etape 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

Styles d'images Drupal

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).

Modifier le style d'image adaptatif drupal

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.

Format style d'image Blazy Drupal 9

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).

Format Blazy image adaptative drupal

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>

Menu

Offcanvas

Optimisation des images Drupal : lazy loading + WebP

Etape 1 : Création d’un style d’image

Etape 2 : Création d’un styles d'images adaptatifs

Etape 3 : On applique le style d’image et on active le lazy loading

Etape 4 : Vérification en front que l’image est bien formaté

Autres ressources utiles

Ajouter un commentaire

Articles similaires

Comment gérer les redirections après la création, l'édition ou la suppression d'entités sur un site Drupal ?

Comment ajouter des classes à la balise <body> dans Drupal ?

Comment supprimer les erreurs de validation avec un bouton de retour sur un formulaire multistep Drupal ?

Ajouter une meta description à une seule route générée par un module Drupal.

Comment supprimer les changements locaux avec git que l'on n'a pas commit ?

Comment exclure le node actuel d'une vue de liste avec view

Intégrer un Popin sur votre site Drupal

Comment obtenir une suggestion de template twig pour un bloc personnalisé (custom block) ?

Comment améliorer l’ergonomie du module Paragraph dans le back office ?

Comment créer des permissions personnalisées sur Drupal ?

Comment ne pas afficher un contenu sur sa propre page (full view mode) ?

Créer des pages d'inscription spécifiques à un rôle.

Renommer le dossier public "web" en htdocs, public_html ou autre

Comment faire un hook sur un formulaire de paragraph

Comment assigner un rôle automatiquement à la création d’un utilisateur ?

Comment supprimer tous les termes d’une taxonomie

Comment personnaliser la destination vers laquelle un utilisateur est redirigé après s'être identifié ?

Twig Snippet Paragraphs

Comment effectuer les mises à jour d'entités en attente après la version 8.7 ?

Comment charger localement les librairies Webforms pour éviter les problèmes avec AJAX ?

Comment forcer la redirection vers https avec le module : HTTPS and WWW Redirect

Comment réparer un bloc cassé ou manquant ?

Lire les données EXIF pour faire pivoter les images qui ont une clé d'orientation définie

Obtenir l'URL d'une image dans un template twig paragraph Drupal

Comment modifier un formulaire avec un hook hook_form_alter() ?

Sauvegarder automatiquement votre base de données avec Backup and Migrate

Modifier la balise meta viewport sur Drupal 8

Form API snippet

Better Exposed Filters

Twig Snippets

Comment utiliser des tokens dans des champs Drupal 9 ?

Comment améliorer l’ergonomie du back office Drupal avec le module « Save & Edit »

Optimisation des images Drupal : lazy loading + WebP

Ultimate Cron

Comment supprimer tous les utilisateurs ou tous les contenus sur Drupal ?