Mise en place des styles d’images adaptatifs

Il y a un peu plus d'une semaine, j'ai voulu effectuer des mises à jour sur mon site. La mise à jour du module Blazy en version 2.1.0 a mis en avant des problèmes dans mon utilisation des styles d'images adaptatifs.

J'avais laissé ceux fournis par défaut dans le profil d'installation standard de Drupal. Mais suite à la mise à jour j'ai constaté une dégradation de la qualité d'affichage des images car le style chargé par rapport aux dimensions d'affichage n'était plus le bon car trop petit.

J'en ai donc profité pour repenser tout ça. Même si d'habitude c'est une étape faite en amont sur les projets, la réaliser sur mon site a été assez simple car... mon site est simple, il n'y a pas 36 cas d'affichages différents.

Réalisation

Jusqu'à présent, j'utilisais le « breakpoint » fourni par le module Responsive Image du noyau Drupal. J'ai décidé d'utiliser celui fourni par le thème Bootstrap que j'utilise pour avoir accès à plus de finesse dans le paramétrage.

Nouveaux styles d'images adaptatifs => Nouveaux styles d'images pour correspondre au site !

Les différents points d'arrêts du site sont ceux de Bootstrap 3 :

• 480px

• 768px

• 992px

• 1200px

Pour chaque plages de dimensions, j'ai donc regardé le comportement attendu pour les 2 formats utilisés sur mon site : dans les accroches sur les listes de contenu et pleine largeur dans les détails des articles. Et j'ai arrondi un peu au supérieur en prenant également en compte les padding/margin comme ça si jamais le design du site change un peu, cela évite de devoir refaire les styles d'images car ils auront été configurés au pixel près.

Je n'ai pas de hauteur d'image imposée donc pas de ratio imposé sur mon site, ce qui simplifie grandement le problème, il faut le reconnaître.

Cela a donné pour chaque plage, une largeur d'image respectivement pour image d'accroche et pour image pleine largeur :

• 1200px ≤
  • 350px
  • 850px
• 992 ≤
  • 280px arrondi à 290px pour réutiliser un autre style
  • 700px
• 768 ≤
  • 535px
  • 535px
• < 768 (pleine largeur)
  • 290px pour écran de 320px
  • 290px pour écran de 320px
  • utilisation de l'attribut sizes et application de tous les formats définis, le navigateur fera le choix.

Plus pour chaque style, création d'un style de largeur doublée pour les affichages en densité de pixel 2x.

Ce qui a compliqué la tâche, cela a surtout était un bug du module Blazy apparu dans la mise à jour, auparavant le module ne faisait rien de particulier pour les styles d'images adaptatifs.

Il y a eu des ajouts d'optimisations, mais qui provoquent un problème car les attributs srcset sont mal calculés et donc le navigateur ne choisi pas le bon style d'image. Cela a bien ralenti les tests.

Au moins j'ai pu apporté ma contribution au module en signalant le bug et en fournissant un « quick fix » dans l'issue https://www.drupal.org/project/blazy/issues/3135220.

Conclusion

Les images d'accroches ne sont plus déformées car elles étaient agrandies si trop petites et les images pleine largeur sont plus légères car ce n'est plus le format natif « Max 2600x2600 » qui est chargé.

Ressources :

• https://www.alsacreations.com/article/lire/1621-responsive-images-srcset.html