Optimisation des images Drupal : lazy loading + WebP

Optimisation des images : 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_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 :

  1. Convertir en jpg
  2. 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>

 

Ajouter un commentaire

HTML restreint

  • Balises HTML autorisées : <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Les lignes et les paragraphes vont à la ligne automatiquement.
  • Les adresses de pages web et les adresses courriel se transforment en liens automatiquement.

Contact_

Une idée de projet, une recherche de conseil, une mission intégration ou développement ? N’hésitez pas à me contacter.