Drupal services by Pepper Cube
< Retour au Blog

Drupal : compresser vos images dans les champs wysiwig

S'il est relativement simple de contrôler les dimensions des images insérées dans les contenus en mettant en place des styles d'images responsive et en configurant le display de ceux-ci, l'opération se relève plus délicate dans les champs wysiwig mis à la disposition de vos contributeurs. Il n'est pas rare de trouver dans ce type de champs des images en png, 10 fois plus lourdes que leur équivalent en jpeg ou des images très largement supérieures à la taille de l'écran, redimensionnée artificiellement, sans parler des copier/coller depuis des logiciels de traitement de texte comme Word qui encode le fichier image en base 64.

Pour pallier ce genre de problématique, on peut mettre en place des styles d'images responsive qui vont mettre à l'échelle les images et les compresser dans différents formats comme nous allons le voir ci-dessous.

Par ailleurs l'import de fichier en base 64, suite à un copier/coller malencontreux peut être évité en activant le module CKeditor block image paste

Mise en place des styles responsive dans les champs wysiwig

Il faut commencer par installer, via composer, le module inline responsive images :

composer require 'drupal/inline_responsive_images:^2.2'

ainsi que le module webP si ce n'est pas déjà fait :

composer require 'drupal/webp:^1.0@beta'

Une fois installés, il faut créer un style d'image responsive qui associera, en fonction des break points de votre thème, différents styles d'images.

 

Style adaptatif Puis configurer votre éditeur wysiwig dans format de texte et éditeurs comme suit :

Responsive

et en bas de formulaire, activer les styles responsive que vous voulez utiliser dans votre champ wysiwig. activer style d'image

Vous pourrez ensuite insérer une image dans le corps de votre texte en choisissant le style responsive adapté

Insérer une image

 

La balise img sera transformée dans le rendu de la page en une balise picture offrant une version webP de l'image à vos utilisateurs et des versions dans d'autres formats pour les navigateurs non compatible.

Source de la page html

Julien Tubiana
PARTAGER