Gestion des images responsives et des écrans Retina avec Drupal

Si certains visiteurs utilisent un appareil mobile, l'utilisation de très grandes images - qui conviennent plutôt à un format desktop - n'est pas optimale.
Garantir la bonne taille d'image pour le bon appareil est ce que l'on appelle des "images adaptatives". Les images adaptatives permettent d'accélérer les vitesses de chargement, d'économiser de la bande passante et d'offrir aux visiteurs une meilleure expérience de navigation.

Pour mettre tout cela en place, deux modules Drupal vont être utilisés :

• Responsive Image  : module présent dans le core de Drupal et dont le but est d'obtenir un rendu optimal des images en précisant les tailles de celles-ci en fonctions des différents breakpoints.
• Webp : module créant une copie WebP des images issues des styles d'images (afin de réduire les temps de chargement) et permettant d'améliorer leur qualité (également très utile pour le SEO).

1. Création des breakpoints

Après avoir activé le module Responsive Image, à la racine du thème, il faut renommer/ créer le fichier "nom_du_theme.breakpoints.yml", en remplaçant "nom_du_theme" par le nom du thème.

Il va ensuite être question de créer plusieurs breakpoints pour les différents styles d’image, c’est à dire de savoir quelles seront les tailles différentes nécessaires pour une même image selon la taille d'écran de l'utilisateur.

Exemple

Voici un exemple de configuration de 3 breakpoints pour ce thème. Un pour les téléphones mobiles, un autre pour les tablettes et un dernier pour le desktop.

Chaque breakpoint indiquera à Drupal quelle taille d'image charger pour chaque mediaQuery assigné.

Par exemple, nous chargerons une image pour les appareils mobiles en utilisant un style d'image plus petit pour le point d'arrêt à min-width : 0px.
Pour le desktop, lorsque le navigateur est à la largeur minimale de 1200px, nous pouvons charger nos images en taille réelle au plus grand format.
Entre les 2, à partir de 768px jusqu'à 1200px, nous chargerons notre style d'image "tablette".

L'attribut multipliers permettra d'afficher une image plus nette pour l'affichage HD et Retina.

2. Créer les différents styles d’images

Ensuite, il faut créer un style d'image pour chaque breakpoint configurés dans le fichier "my_theme_name.breakpoints.yml" en allant à cette adresse : "/admin/config/media/image-styles".

Reprenons l’exemple plus haut : nous avons créé trois breakpoints dans notre fichier, ainsi que deux tailles de résolution (1 pour les écrans Retina ready et 1 pour les autres) pour chaque format d'image. Nous aurons donc un total de six styles d'image.

Attention : il est nécessaire de créer un style d’image Retina avec des dimensions deux fois plus grandes que le style non-Retina.

Voici un exemple de nommage pour ces styles d'image :

• Mobile 1X
• Mobile 2X (Retina)
• Tablet 1X
• Tablet 2X (Retina)
• Desktop 1X
• Desktop 2X (Retina)

3. Configurer Responsive Image

Il faut maintenant attribuer les styles d'image aux différents breakpoints : rendez-vous sur "/admin/config/media/responsive-image-style".
Après avoir cliqué sur "Add responsive image style", il faut sélectionner "nom_du_theme" et choisir les styles d'image appropriés pour chaque breakpoint.
Contrairement au fichier de configuration des breakpoints précédemment créé, l’interface Drupal affichera ces derniers du plus grand au plus petit.

En se basant sur notre exemple, pour l’image desktop Retina ready, il faut dérouler l’intitulé "2X Large" et sélectionner le style d'image "Desktop 2X". Pour l’image non Retina "1X Large", ça sera "Desktop 1X". Et ainsi de suite pour chaque breakpoint.

A la fin du formulaire, le style d’image de repli ne devrait apparaître sur le site que si une erreur se produit avec l'un des breakpoints.

4. Assigner la configuration à un champ Image

Maintenant que Responsive Image est configuré, il doit être assigné à l'un des champs image utilisé.

Dans la gestion d’affichage d’un type de contenu, pour un champ image, il est désormais possible de sélectionner comme "Format" : "Image adaptative", puis le "Style d'image adaptatif" créé précédemment.

Désormais, l'image présente dans ce champ configuré sera affichée sur un écran de type Rétina (et équivalent) avec une résolution doublée par rapport à un écran standard.

Image

Image

Une fois le module Webp activé, en se rendant à cette adresse "/admin/config/media/webp/settings", il sera possible de choisir le niveau de qualité pour les images rendues par Responsive Image.

Ces différentes étapes peuvent sembler fastidieuses mais elles sont essentielles afin de permettre une expérience utilisateur optimale. Les images se retrouvent correctement dimensionnées en impactant au minimum le temps de chargement de la page, ce qui peut être un énorme atout pour les pages devant afficher un grand nombre d'images ainsi que pour les sites à fort traffic.

Sources 

https://www.aurone.com/blog/des-images-responsive-sur-drupal-8-belles-sur-tous-les-appareils/
https://drupak.com/blog/responsive-images-in-drupal-8
https://drupalsun.com/aaron-armstrong/2021/12/15/how-set-responsive-images-drupal-9