Des images responsives automatiquement dirigées par l'art ? Voici.

Dans de nombreux projets, les images réactives ne sont pas un problème technique mais une préoccupation stratégique . Fournir différentes images sur différents écrans est techniquement possible avec srcset et tailles et élément <picture> et Picturefill (ou un polyfill similaire); mais toutes ces variantes d'images doivent être créées, ajustées et intégrées dans la logique du CMS existant. Et ce n'est pas facile.

En plus de cela, le balisage des images réactives doit également être généré et ajouté au HTML, et si une nouvelle variante d'image entre en jeu à un moment donné (par exemple, un format de fichier comme WebP ou une grande variante paysage/portrait), le balisage a à mettre à jour. La quantité de travail supplémentaire requise cause souvent des problèmes - donc si vous avez une photo de produit parfaite, vous devez soit créer manuellement des variantes pour les vues mobiles et portrait et paysage et plus grandes, soit créer des plugins et des extensions pour automatiser le processus.

Parfois, les solutions de contournement fonctionnent très bien aussi. L'un d'eux est les images compressives, une technique intelligente qui suggère que le niveau de compression fait plus de différence que ses dimensions physiques. Ainsi, selon les mots de Scott Jehl, "étant donné deux images identiques affichées à la même taille sur un site Web, l'une peut être considérablement plus petite que l'autre en taille de fichier si elle est à la fois fortement compressée et considérablement plus grande en dimensions qu'elle n'est affichée. ”

Lectures complémentaires sur SmashingMag :

• Images réactives simples avec des images d'arrière-plan CSS
• Automatisez vos images réactives avec Mobify.js
• Comment résoudre des images adaptatives dans une conception Web réactive
• Images réactives dans WordPress avec direction artistique
  

Donc, fondamentalement, nous pourrions agrandir une image donnée, l'enregistrer dans la pire qualité possible dans Photoshop et laisser le navigateur faire le redimensionnement - en moyenne, l'image réelle envoyée sur le réseau serait plus grande en dimensions mais environ 50 à 65 % plus petite en taille du fichier. Maintenant, c'est toute une différence. Et cela fonctionne dans de vrais projets.

L'inconvénient : nous déchargeons le travail sur le client et si l'utilisateur choisit d'enregistrer l'image, il en obtiendra une version assez sous-optimale. Et cela ne nous aide pas non plus avec les images dirigées par l'art. Ce n'est pas tout à fait une solution propre que nous recherchons.

Le diable est dans le… back-end !

Un scénario courant consisterait à intégrer une sorte de logique back-end dans le CMS, permettant aux gestionnaires de contenu de télécharger des images, de définir des points focaux pour chaque image donnée et de générer toutes ces variantes recadrées de chaque image à la volée.

Le "recadrage" est délicat, et si vous êtes parfaitement d'accord pour redimensionner les images sans direction artistique et permettre au navigateur de sélectionner une image qui, selon lui, conviendrait le mieux, ce ne sera pas un gros problème - vous pourriez utilisez ImageMagick ou tout autre outil d'édition d'images pour le redimensionnement, ou les plugins CMS pourraient s'en occuper pour vous : par exemple l'API Mobify.js, les images réactives dans le noyau WordPress et il existe également une solution pour Drupal.

Cependant, si la direction artistique est importante, par exemple si vous souhaitez envoyer des photos de produits très spécifiques à différents types d'écrans, vous devrez rechercher des options plus avancées. Une photo de paysage large réduite pour la fenêtre d'affichage étroite ne sera pas particulièrement utile, pas plus qu'une image étroite agrandie pour remplir toute la fenêtre d'affichage sur un écran large. C'est là que nous avons besoin de meilleures solutions plus intelligentes.

Alors, quelles sont les options ?

Eh bien, nous pourrions exécuter un traitement par lots via le remplissage sensible au contenu dans Photoshop, ou utiliser des outils comme Smartcrop.js, qui est une implémentation assez simple du recadrage d'image sensible au contenu avec JavaScript. Potentiellement, nous pourrions même intégrer le smartcrop-cli (avec ImageOptim-CLI) dans nos processus de construction Grunt et Gulp et recadrer des images à la volée. Vous pouvez également utiliser imgix avec son recadrage automatique des points d'intérêt. C'est déjà un bon début, mais nous aurions besoin d'écrire le balisage pour toutes ces variantes manuellement.

Bonne nouvelle : il y a un petit nouveau dans le quartier. Il y a quelques jours à peine, nous avons écrit sur le Responsive Image Breakpoints Generator, un petit outil open source qui vous permet de calculer interactivement les points d'arrêt de vos images. Fondamentalement, vous pouvez télécharger une image, et l'outil détectera les points d'arrêt appropriés, redimensionnera les images et générera un balisage d'images réactif que vous pourrez ensuite copier/coller dans votre code HTML. Vous pouvez aller encore plus loin et créer automatiquement des images réactives directes à l'aide de l'API de l'outil.

Comme Eric Portis l'explique dans son article, lorsque vous utilisez l'API Cloudinary, vous pouvez spécifier un crop_mode qui vous permet d'imiter background-size: cover en CSS. En plus de fournir des hauteurs et des largeurs, vous pouvez également spécifier le point focal à l'aide du paramètre de gravity , du facteur de zoom et des rapports d'aspect, ce qui peut rendre les URL un peu plus faciles à lire. En fait, l'API prend en charge la détection des visages, donc si vos images contiennent des visages humains, la direction artistique peut être automatisée avec une probabilité plus élevée de recadrage assez décent.

Si vous souhaitez pouvoir définir explicitement des points focaux pour les images , vous pouvez consulter Sizzlepig (non gratuit), un outil de traitement par lots d'images dans le navigateur qui peut être intégré à Google Drive et Dropbox, et vous permet de modifier le recadrage. et la mise à l'échelle de chaque image.

Sommaire

Idéalement, nous aimerions avoir un outil qui générerait soit des recadrages "assez intelligents" et brancherait automatiquement le balisage des images réactives dans la construction, soit fournirait une interface pour ajuster visuellement le point focal des images et produire "prêt-à- aller "balisage. Nous n'en sommes pas encore là, mais nous y serons peut-être bientôt.

En attendant, les outils répertoriés ci-dessus pourraient être des options suffisamment intéressantes pour s'attaquer à une tâche assez ardue consistant à produire des variantes d'images dirigées par l'art, soit manuellement, soit en créant des plugins CMS personnalisés.