Les styles d'images adaptatifs dans Drupal

Lundi 23 Août 2021

Voici le petit guide à jour du traitement des images dans Drupal. Notre objectif : optimiser l'affichage des sites sur tous les supports.

Image illustrant une séance photo

Lors de la phase de conception, les UX et UI designers sont en contact permanents avec les développeurs, qui discutent des interfaces et les valident. Le traitement des images nécessite une attention toute particulière pour optimiser l'expérience de contribution d'une part, la performance d'affichage d'autre part. L'idée est alors de proposer la meilleure qualité d'image possible avec le minimum de poids, dans le but de servir chaque type et taille d'écran avec la solution idéale.

Images adaptatives

L'utilisation d'images adaptatives va nous permettre de remplir ces objectifs. Les images et les styles d'images vont permettre le chargement d'images spécialement dimensionnées pour l'écran de l'utilisateur en fonction des points d'arrêt (breakpoints).

La balise <picture>

Dans Drupal, les images adaptatives sont rendues à l'aide de la balise HTML5 <picture>.

Le navigateur utilise les valeurs de <source> pour charger l'image la plus appropriée. Il utilise le premier élément <source> qui correspond à ses besoins et ignore toutes les balises <source> suivantes.

L'élément <img> est requis comme dernière balise enfant dans <picture>. L'élément <img> est utilisé pour fournir une rétrocompatibilité pour les navigateurs qui ne supportent pas l'élément <picture>. Il permet également d'afficher une image si aucune des balises <source> ne correspond au besoin du navigateur.

L'élément <picture> fonctionne de manière similaire aux éléments <video> et <audio>. Vous configurez différentes sources, et la première source qui correspond aux préférences est utilisée.

Pré-requis

Modules à activer :

  • Breakpoints ;
  • Responsive Image ;
  • Media.

Breakpoints

Les points d'arrêt sont utilisés pour diviser votre écran en plusieurs largeurs de rupture (peut aussi être des hauteurs mais nous utilisons des largeurs). L'affichage responsive s'ajuste à ces points d'arrêt pour afficher correctement le contenu sur différents appareils (ordinateur, tablette, mobile).

Vous définissez les points d'arrêt à utiliser sur votre site dans un fichier yml dans votre thème. Le fichier yml s'appelle "your_theme.breakpoints.yml" et se trouve dans :"/themes/custom/your_theme".

Pour plus d'informations sur les points d'arrêt et des exemples de configuration - https://www.drupal.org/docs/theming-drupal/working-with-breakpoints-in-drupal.

Une fois les modules installés et les points d'arrêt définis, nous pouvons créer les styles d'image adaptatifs ici : /admin/config/media/responsive-image-style.Différents styles d'images peuvent être attribués à chaque point d'arrêt.

Remarque sur le paramètre multipliers : il s'agit d'une mesure de la résolution de viewport.
Normalement, 1x sera utilisé pour les tailles standard et 2x pour retina display (voir ci-après).

Méthodes + avantages/ inconvénients 

Selon les besoins d'un site particulier, une ou plusieurs de ces méthodes sont utilisées sur ce site.

Utilisation du backoffice de Drupal pour appliquer des styles d'image adaptatifs aux champs Média

Avantages :
C'est la plus simple des 3 méthodes et la plus rapide. Elle ne nécessite pas de code.

Inconvénients :
Pour des sites complexes ou des profils d'installation, cette méthode est contestable. Chaque modification devra être reproduite manuellement sur les configurations ou sur chaque profil. Il est donc préférable dans ce cas d'appliquer des styles d'image par l'intermédiaire du code.

Méthode :
Etape 1 : créez l'affichage ici : /admin/structure/media/manage/image/display.
Ajoutez un mode d'affichage de type media, et pour le champ image choisissez le format « Responsive image (Image adaptatif) ». Accédez à la configuration et choisissez le style d'image responsive que vous souhaitez appliquer à cette vue.

Exemple :

Etape 2 : Dans votre paragraphe / type de contenu / bloc qui contient votre champ image, accédez à la gestion de l'affichage. Pour l'image concernée, choisissez le format Rendered Entity (Entité rendue) et choisissez l'un des modes d'affichage que vous avez créé à l'étape 1.

Exemple :

L'image sera rendue en tant qu'image adaptative et utilisera le style d'image adaptatif défini dans le mode d'affichage média attribué à ce champ.

Utilisation du Preprocess pour le rendu des styles d'image réactifs

Avantages :
Cette méthode est facile à gérer et particulièrement utile pour les profils avec plusieurs sites.

Inconvénients :
Cette méthode consomme plus de temps à mettre en place. Le code peut nécessiter une maintenance sur les modifications majeures de la version Drupal ou les modifications apportées au module Media (exemples changement de classes de Media etc.)

Méthode :
Si vous devez appliquer des styles d'image responsive à plusieurs types de contenu / paragraphes, il est préférable de définir une fonction à appeler dans chaque preprocess node/paragraphe pour appliquer les styles d'image.

Exemple :

function _eliorblog_set_responsive_image(&$variables, $entity, $field_image_name, $image_style_name){
    $field_image = $entity->get($field_image_name)->first();
    if ($field_image instanceof \Drupal\Core\Field\Plugin\Field\FieldType\EntityReferenceItem) {
          $media = $field_image->entity;
          $responsive_image = [
            '#theme' => 'responsive_image_formatter',
            '#item' => $media->get('field_image')->first(),
            '#responsive_image_style_id' => $image_style_name
          ];
          $renderer = \Drupal::service('renderer');
          $renderer->addCacheableDependency($responsive_image, $media);

          $variables['responsive_image'] = $responsive_image;
          return true;
    }
    return false;
 }

Vous appelez maintenant cette fonction dans votre fonction de preprocess.

Exemple :

function elior_blog_preprocess_paragraph__infographie(&$variables){
        $paragraph = $variables['elements']['#paragraph'];
        //responsive_image
           				 		_eliorblog_set_responsive_image($variables$paragraph,field_image_infographie','image_paragraph_infographie');
   }

finalement dans votre template, au lieu de
{{ content.field_image }}
vous manipulerez {{ responsive_image }} qui est la variable définie dans la configuration.

Application de styles d'image adaptatifs dans les Templates

Avantages :
Facile à gérer et particulièrement utile pour les profils avec plusieurs sites. Cette méthode est plus rapide à appliquer, directement dans la template sans avoir besoin de passer par un preprocess.

Inconvénients :
Nous avons besoin de l'uri du champ image. Cette recherche peut consommer un peu de temps pour obtenir l'uri dans twig. 

Méthode :
Vous n'avez besoin que de l'uri du champ image, puis vous appliquez le code qui crée une image adaptative.

{% set rendered_responsive_image = {
        '#theme': 'responsive_image',
        '#responsive_image_style_id': 'actualites_a_la_une',
        '#uri': image_field_uri|trim,
       }  
   %}

Maintenant vous pouvez utiliser cette image adaptative directement comme {{ rendered_responsive_image }}.

Et le format WebP ?

WebP est un format d'image créé par google. En utilisant le format d'image WebP, vous pouvez réduire la taille des images de votre site de 20 % ou plus, sans perdre en résolution. La performance d'affichage est améliorée.

Un site rapide obtient également des points SEO, améliorant le classement du site et aidant son contenu à être plus facilement découvert par les utilisateurs. Vous devez disposer de styles d'image réactifs sur votre site web pour utiliser Webp.

Module à installer : https://www.drupal.org/project/webp

L'utilisation de webp sur le serveur nécessitera l'installation d'une extension pour gd sur le serveur (ext-gd). Pour plus de détails, vous pouvez consulter cet article https://dev.acquia.com/blog/webp-and-drupal.

A NOTER / ISSUES : Il existe un conflit entre ce module et le module Image Widget Crop.
L'utilisation du module Image Widget Crop provoque une anomalie d'affichage dans l'espace d'administration. L'affichage d'une image existante n'est pas mise à jour pas car l'image Webp n'est générée qu'une seule fois.
Les modifications sont appliquées au site lorsque vous réenregistrez le style d'image car les images sont régénérées. Cette anomalie est documentée dans le module WebP issues : https://www.drupal.org/project/webp/issues/3082266.

Retina ?

Apple a créé le terme «Retina display» pour décrire ses écrans qui ont des résolutions très élevées en raison de la densité de pixels.

Comment ajouter le support Retina à vos styles d'images adaptatifs ?

Dans «your_theme.breakpoints.yml », vous disposez d'une configuation nommé multipliers dans le viewport d’un breakpoint. Pour supporter les écrans retina, ajoutez 1x et 2x à votre point d'arrêt. Dans votre style d’image adaptatif, si vous avez un style d'image (300px x 300px) pour votre multiplier 1x, vous devriez avoir un style d'image (600px x 600px) pour votre style d'image 2x pour ce point d'arrêt (juste le double des dimensions) - le 2x ayant un nombre plus élevé de pixels adapté aux écrans Retina.

Conclusion

Ce que nous servons aux différentes résolutions d'écran doit être soigneusement configuré. Nous devons être précis - servir chaque type et taille d'écran avec la ressource optimisée. Drupal propose cela avec des styles d'image adaptatifs.

Références :