Guide du débutant pour les images réactives : comment les obtenir correctement

Ce didacticiel sur les images réactives passera en revue les techniques CSS, les fonctionnalités HTML et certains outils que vous voudrez prendre en compte. Tout cela devrait vous donner un bon aperçu de la mise en route des images réactives dans vos projets aujourd'hui.

Table des matières:

• Images réactives avec CSS simple
• Images réactives avec les srcset et sizes
• Utilisation de srcset avec un descripteur de densité de pixels
• Utilisation de l'élément <picture>
• Outils et services pour aider avec des images réactives

Images réactives avec CSS simple

Le moyen le plus simple de rendre une image réactive sur une page Web ne nécessite pas de requêtes multimédias ni de code HTML supplémentaire. Vous pouvez faire grossir et rétrécir n'importe quelle image en fonction de la taille de la fenêtre avec quelques lignes de code HTML et CSS.

Tout d'abord, mon code HTML inclura les attributs width et height :

Inclure les valeurs de width et de height dans le code HTML est une bonne pratique. Cela garantit que le navigateur réserve l'espace nécessaire pour l'image et qu'il n'y a pas de redistribution de page ultérieure pendant le chargement de l'image.

Parallèlement à cela, je vais utiliser le CSS suivant :

 img { max-width : 100% ; height : auto; }
 Langage de code : CSS ( css )

Ces valeurs remplaceront mon HTML. La propriété max-width est définie sur 100% pour s'assurer qu'elle remplit tout l'espace nécessaire, jusqu'à un maximum de 1000px (la valeur du HTML). La valeur de height auto garantit que la hauteur de l'image maintient les dimensions de l'image proportionnelles à sa largeur et sa hauteur naturelles. Si je supprime la height: auto , l'image restera à la hauteur définie dans le HTML, quelle que soit la largeur - ce qui n'est généralement pas ce que je veux.

Vous pouvez essayer cet exemple simple en utilisant le CodePen suivant. Il est préférable d'ouvrir la démo dans une nouvelle fenêtre si vous souhaitez tester la réactivité.

Et notez que dans mon exemple, les dimensions naturelles de l'image sont de 2000px x 1333px mais je choisis de l'afficher à un maximum de 1000px.

Théoriquement, je pourrais faire ce qui précède pour chaque image de ma page, et ce serait un moyen rudimentaire et acceptable d'incorporer des images réactives dans mes projets. Mais idéalement, j'aimerais passer au niveau supérieur et prendre le contrôle de la résolution de l'image et d'autres facteurs, pour améliorer les performances et aider au référencement, dont je parlerai dans les sections suivantes.

Images réactives avec les srcset et sizes

Dans l'exemple CSS simple ci-dessus, je charge une image d'une taille d'environ 1,44 Mo, même après avoir utilisé la compression sans perte pour réduire la taille. Ce n'est pas terrible en soi lorsqu'il est affiché sur un ordinateur de bureau, mais ce n'est certainement pas la taille que je veux charger sur un petit appareil, comme un smartphone. C'est là que les srcset et sizes sont utiles.

L'attribut srcset vous permet de spécifier plusieurs tailles d'image dans une seule valeur. Ce seront les images auxquelles le navigateur ou l'appareil aura accès dans des circonstances définies. L'attribut sizes fonctionne avec srcset pour indiquer au navigateur laquelle des images choisir.

Voici un exemple qui utilise plusieurs versions de l'image leopard.png de l'exemple précédent :

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 Langage de code : HTML, XML ( xml )

Si vous n'avez jamais vu les srcset et sizes auparavant, cela peut sembler déroutant à première vue. Je vais tout décomposer pour que ce soit relativement facile à comprendre.

Décomposer l'attribut srcset

L'attribut srcset accepte une liste séparée par des virgules d'une ou plusieurs chaînes. Chaque chaîne contient :

• Une URL pointant vers une image
• L'un des descripteurs facultatifs suivants (séparés par un espace) :
  • Un descripteur de largeur
  • Un descripteur de densité de pixels

Dans mon exemple, j'ai inclus un descripteur de largeur, qui est celui que vous verrez le plus souvent. J'ai inclus trois versions différentes de l'image : la grande version haute résolution, une de 800 px de large et une autre de 480 px de large.

Remarquez que lorsque j'ai utilisé le descripteur de largeur dans l'exemple ci-dessus, la syntaxe est la valeur de largeur immédiatement suivie d'un "w" (n'utilisez pas de valeur d'unité "px" !). Pour chacun des descripteurs de largeur représentant les images, j'utilise la largeur intrinsèque de l'image en pixels. Vous pouvez obtenir la taille réelle de n'importe quelle image de plusieurs manières différentes - en référençant ses propriétés dans votre système de fichiers, un éditeur de photos ou même dans votre navigateur ou les outils de développement de votre navigateur.

Décomposer l'attribut sizes

L'attribut sizes ne fonctionne qu'avec l'attribut srcset . Vous pouvez utiliser srcset seul (voir la section suivante), mais la manière la plus courante d'utiliser srcset est de l'accompagner de sizes .

L'attribut sizes accepte une liste séparée par des virgules d'une ou plusieurs chaînes. Chaque chaîne contient :

• Une condition de média (similaire aux requêtes média utilisées dans CSS)
• Une valeur définissant la taille de la "fente" que l'image occupera

La valeur de l'emplacement peut être une longueur absolue comme em ou px ou une unité relative de la fenêtre (par exemple vw ). Remarquez dans mon exemple que les valeurs d'emplacement dans l'attribut sizes ne correspondent pas exactement aux trois descripteurs de largeur. Voici à nouveau le code :

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 Langage de code : HTML, XML ( xml )

Le fait que les valeurs d'emplacement ne correspondent pas exactement aux descripteurs de largeur est correct. Dans mon cas, je peux décomposer la valeur des sizes comme suit :

• Une fenêtre d'affichage de 600 pixels de large chargera l'image 480w à partir de la valeur srcset à l'intérieur d'un emplacement de 480 pixels de largeur.
• Une fenêtre d'affichage de 1 000 pixels de large chargera l'image de 800 w dans un emplacement de 800 px.
• L'image pleine taille par défaut (2000w) remplira un emplacement de 1000 pixels si les conditions de support précédentes ne sont pas remplies.

La dernière chaîne est une valeur d'emplacement seule, sans condition de support. Comme mentionné, cela garantit que le navigateur aura quelque chose à afficher si aucune des conditions de support n'est remplie, fonctionnant par défaut.

Vous pouvez voir l'exemple de code en action à l'aide de la démo CodePen ci-dessous. Notez que dans ce cas, vous devrez tester sur quelque chose qui imite différents appareils (comme les DevTools dans Chrome). Vous pouvez également ouvrir la page en utilisant une variété d'appareils réels pour effectuer un véritable test. Pour plus de commodité, j'ai inclus une superposition de texte sur chacune des images afin que vous puissiez voir ce qui se charge lorsque vous affichez la page.

Notez qu'après le chargement de l'image d'origine, la taille de l'image ne change pas lorsque vous modifiez la taille de la fenêtre d'affichage. Les srcset et sizes sont utiles pour charger des images en fonction des conditions du support lors du premier chargement, mais n'aideront pas à changer d'image en fonction du redimensionnement de l'écran. Plus tard, je vous montrerai une autre fonctionnalité d'images réactives qui résoudra ce problème.

Utilisation de srcset avec un descripteur de densité de pixels

Plus tôt, j'ai mentionné que l'attribut srcset peut être utilisé avec un descripteur de densité de pixels. Ce descripteur permet au navigateur de décider quelle image utiliser en fonction des capacités de résolution de l'appareil. Voici à quoi cela ressemble :

 < img srcset = "images/leopard-480.png, images/leopard-800.png 1.5x, images/leopard.png 2x" src = "images/leopard-480.png" alt = "Leopard on a tree branch" >
 Langage de code : HTML, XML ( xml )

Remarquez quelques choses ici. Premièrement, pour l'attribut src régulier, j'utilise la plus petite image, garantissant une approche mobile d'abord. Ensuite, l'attribut srcset inclut quelques autres versions de l'image, avec une résolution indiquée par les descripteurs 1,5x et 2x. L'image 480 n'inclut pas de descripteur car le 1x est implicite. Enfin, notez qu'il n'y a pas d'attribut sizes présent, dont je n'ai pas besoin dans ce cas. MDN explique comment le navigateur choisit l'image :

Pour comprendre le fonctionnement des descripteurs, n'oubliez pas qu'un pixel d'appareil représente chaque pixel CSS. Ainsi, 1x serait un rapport de 1:1, 1,5x serait un rapport de 1,5:1, et ainsi de suite. Vous pouvez l'essayer dans le CodePen ci-dessous, mais vous devrez utiliser différents appareils (ou utiliser un outil qui les imite) pour voir la différence.

Utilisation de l'élément <picture>

Jusqu'à présent, les fonctionnalités dont j'ai parlé pour incorporer des images réactives supposent que j'affiche toujours la même image mais à des tailles et des résolutions différentes. Et bien que j'utilise CSS dans tous les exemples pour modifier la largeur des images lorsque l'utilisateur redimensionne le navigateur, l'image elle-même ne change jamais une fois la page chargée.

L'élément <picture> est une fonctionnalité HTML qui vous permet de proposer des versions alternatives d'une image en fonction de la présence de fonctionnalités multimédias spécifiques. Cela permet également de désactiver les images lorsque l'utilisateur redimensionne la fenêtre et vous permet essentiellement de faire de la direction artistique avec vos images, en montrant des variétés de la même scène mais recadrées ou agrandies différemment selon la taille de l'appareil.

Par exemple, un plan large avec un petit objet au milieu serait approprié pour un appareil plus grand sur un ordinateur de bureau ou une tablette, mais un appareil plus petit comme un smartphone pourrait charger la même image recadrée ou agrandie.

Voici un exemple de code qui me permettra de faire de la direction artistique sur mon image :

Remarquez ce qui suit à propos du code :

• L'élément <picture> accepte plusieurs éléments <picture> imbriqués comme enfants
• Chacun des éléments <source> à l'intérieur <picture> utilise l'attribut media pour définir la condition média qui déclenche l'utilisation de cette image source
• L'élément <picture> accepte l'élément <img> élément en tant qu'enfant, que le navigateur reconnaît comme une solution de secours s'il ne prend pas en charge <picture>
• Il n'y a pas d'attributs directement sur l'élément <picture <picture> ( <picture> n'accepte que les attributs globaux de HTML et n'a pas d'attributs propres)

Le CodePen ci-dessous le démontre :

Si vous ouvrez la démo dans une nouvelle fenêtre, vous pouvez redimensionner la fenêtre pour voir l'image changer. Remarquez comment le sujet de l'image devient plus agrandi à mesure que la fenêtre du navigateur devient plus petite. Il s'agit d'un moyen simple de créer des images réactives dirigées par l'art qui semblent appropriées sur n'importe quel appareil utilisé. Bien sûr, cela demande un peu plus de travail, mais cela en vaut la peine si vous voulez que vos images aient un sens sur n'importe quel appareil utilisé.

Outils et services pour aider avec des images réactives

Il existe d'innombrables outils disponibles, gratuits et commerciaux, qui vous aideront à mettre en œuvre des images réactives. Et certains d'entre eux vous aideront même à éviter d'avoir à écrire une grande partie du code dont j'ai parlé. En voici quelques-unes qui pourraient vous être utiles :

Fait important et pratique, un certain nombre de services différents peuvent créer automatiquement des images réactives, offrant des fonctionnalités telles que différentes tailles d'image, une API pour la génération d'images à la volée, etc.

Même WordPress lui-même est livré avec un support intégré pour les images réactives (à partir de la version 4.4).

Un autre outil/service qui mérite d'être examiné est Optimole. Il s'agit d'un outil avancé d'optimisation et de livraison d'images conçu par l'équipe derrière Themeisle. Celui-ci réduira non seulement la taille du disque de vos images sans que la qualité visuelle en pâtisse, mais se chargera également de fournir les images aux visiteurs de votre site Web via un CDN d'images. L'un des aspects de cette fonctionnalité de livraison d'images est que vos images seront également optimisées pour être visualisées sur différents appareils.

Une version gratuite d'Optimole est disponible. Il permet jusqu'à 5 000 visites de sites Web par mois et vous offrira toutes les fonctionnalités de mise à l'échelle automatique, CDN, etc.

Quelle est votre expérience avec les images responsives sur les sites Web ? Faites-le nous savoir dans les commentaires ci-dessous.

Mise en page et présentation par Chris Fitzgerald et Karol K.