Image
Images responsives, écrans rétina ready et format Webp

Gestion des images responsives et des écrans Retina avec Drupal

Responsive Image
Webp
Retina
Performances

L'expérience utilisateur représente un aspect essentiel du développement Web. L'arrivée sur le marché des écrans de type Rétina permet des rendus de très haute qualité. Cependant c'est à double tranchant, car sans travail d'optimisation, cela fait d'autant plus ressortir les défauts potentiels de l'image.
La clé d'un bon affichage d'images responsives passe alors par l'assurance d'un redimentionnement correct, quel que soit son format, tout en impactant au minimum le temps de rendu de la page. 

Comment bien afficher les images ?

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

Responsive Image module

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.

nom_du_theme.small:
  label: small
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
    - 2x
nom_du_theme.medium:
  label: medium
  mediaQuery: 'all and (min-width: 768px)'
  weight: 2
  multipliers:
    - 1x
    - 2x
nom_du_theme.large:
  label: large
  mediaQuery: 'all and (min-width: 1200px)'
  weight: 2
  multipliers:
    - 1x
    - 2x

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 sans optimisation Retina
Image standard
Image
image Retina ready
Image Retina

Mise en place de Webp

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.

 

En conclusion

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.

 

Articles pouvant vous interesser

Image
A quoi s'attendre avec Drupal 10
Drupal 10
Image
Core Web Vitals, la nouvelle référence
SEO
Core Web Vitals
UX
Performances