La spécification d' image réactive est un document fantastique qui décrit de nombreuses utilisations de ces images. Mais l'expérience me dit que le plus souvent, lorsque vous travaillez avec eux, il vous suffit de savoir comment donner au client des copies de la même image de différentes tailles, en les choisissant en fonction de la largeur de la zone d'affichage de la page. Nous appelons cela «commutation de résolution». Pour résoudre ce problème, vous pouvez utiliser les attributs srcsetet sizes.La sortie d'images réactives implique l'utilisation d'une logique assez complexe. Cela comprend, entre autres, la détermination de l'image qui sera affichée, ainsi que la détermination si l'utilisateur travaille avec un écran haute résolution. Heureusement, les navigateurs sont meilleurs que les personnes qui peuvent déterminer quelles images conviennent le mieux à chaque utilisateur. Tout ce que nous devons faire, c'est leur donner des indices. L'attribut srcsetdonne au navigateur une liste de ressources graphiques à partir desquelles il peut sélectionner l'image la plus appropriée. L'attribut sizesvous permet d'indiquer au navigateur la taille d'image que vous souhaitez afficher dans un cas particulier.
Et en passant, en utilisant des images réactives, vous n'avez pas à vous soucier de la prise en charge du navigateur pour cette technologie. Les attributs qui nous intéressent bénéficient d'une excellente prise en charge du navigateur. Et en plus, nous avons à notre disposition un mécanisme de sauvegarde conçu pour les navigateurs plus anciens comme IE11.Comment le tag "communique" avec le navigateur
C'est ainsi que la balise <img>indique au navigateur quelle image sélectionner."Discuter" de la balise et du navigateurIci, la balise<img>indique au navigateur ce qui suit: "Avec cette taille d'écran, je serai affiché dans la taille suivante (indique un attributsizes). Vous pouvez prendre n'importe laquelle de ces images qui ont la largeur suivante (indique un attributsrcset). Par conséquent, veuillez choisir l'image qui est maintenant la mieux adaptée. "Attribut Srcset
L'attribut srcsetdonne au navigateur un ensemble de ressources graphiques parmi lesquelles il peut choisir le plus approprié. Il contient également des informations sur la taille de chacune des images proposées.Attribut SrcsetCet attributsrccontient une image de secours pour les navigateurs qui ne comprennent pas l'attributsrcset. L'srcsetURL contient des images et des informations sur leur largeur. A partir de l'ensemble des images qui lui sont fournies, le navigateur choisira ce qui lui convient le mieux. De plus, si l'utilisateur dispose d'un écran à haute densité de pixels (écran Retina) - le navigateur en tiendra compte lors du choix d'une image.L'attributsrcsetcontient une liste d'URL d'images suivies d'informations sur la largeur de l'image. Les paires sontURL-séparées par des virgules. Listearticles se présentent comme suit:image.jpg 1000w. Un tel enregistrement indique au navigateur que l'imageimage.jpgfait 1000 pixels de large.En décrivant l'ensemble d'images de cette manière, nous indiquons au navigateur ce qui suit: "Je vous donne une liste d'images et je vous fais confiance pour choisir la plus appropriée."Le navigateur sélectionne la meilleure image, guidée par un ensemble complexe de critères, qui incluent l'image que l'utilisateur affiche, la taille actuelle de la zone de visualisation et si l'utilisateur dispose d'un écran haute résolution.Le navigateur est suffisamment intelligent pour savoir que sur un écran de bureau basse résolution, si la largeur de l'image de sortie est de 800 pixels, vous devez sélectionner l'image dans la liste avec une largeur d'au moins 800 pixels.De plus, le navigateur sait que si une image d'une largeur de 320 pixels est affichée sur un écran haute résolution, vous devez sélectionner un fichier image d'au moins 640 pixels de large. Par conséquent, nous n'avons pas à nous soucier des ressources graphiques 1x et 2x. Il vous suffit de donner au navigateur un bon ensemble d'images et de le laisser faire son travail.Comment décrire des images adaptées à différents écrans?Attribut Tailles
L'attribut srcsetest un excellent outil. Mais lorsque le navigateur lit le code HTML de la page, il ne sait pas si, par exemple, le style CSS est utilisé, ce qui définit la taille de l'image à 50% de la largeur de l'écran. C'est là que l'attribut entre en jeu sizes. Avec lui, nous pouvons donner au navigateur un indice sur la taille de l'image qui sera affichée après lui avoir appliqué du CSS.Attribut Tailles100vw- la taille par défaut lorsqu'aucune des conditions n'est remplie. Il est indiqué en dernier dans la liste qui se trouve dans l'attribut sizes.1023px - largeur de la fenêtre.780px - largeur d'image lorsque la condition spécifiée est remplie.
Le navigateur s'arrêtera à la première condition remplie.L'attribut sizescontient une liste de conditions de support, séparées par des virgules. Les conditions multimédias sont un sous-ensemble de requêtes multimédias. Ici, vous ne pouvez pas spécifier le type d'environnement auquel la condition ( printou screen) s'applique , mais vous pouvez utiliser des requêtes multimédias liées à la largeur de la zone d'affichage.Chaque entrée de liste contient la largeur de la fenêtre d'affichage et la largeur d'image correspondante. L'élément de liste a le formulaire (min-width: 1023px) 780px. Un tel enregistrement indique au navigateur que si la largeur de la fenêtre d'affichage est de 1023 pixels (ou plus), vous devez utiliser une image d'une largeur de 780 pixels.Ici, en plus, des unités de largeur relative peuvent être utilisées. Par exemple, quelque chose comme50vw. Cela indique au navigateur que la largeur de l'image sera de 50% de la largeur de la fenêtre. Ici, dans des situations plus complexes, vous pouvez même utiliser la fonction calc. Par exemple, la conception de la vue calc(50vw — 2rem)indique au navigateur que la largeur de l'image correspondra à 50% de la largeur de la fenêtre moins 2rem. Peut-être que la largeur est définie de cette façon pour prendre en compte la largeur d'une indentation ou d'une bordure.Le dernier élément de la liste n'est pas fourni avec une condition de média. Si vous ajoutez une largeur à la liste et ne spécifiez pas de condition de support, la valeur correspondante sera considérée comme la valeur par défaut, c'est-à-dire si aucune des autres conditions n'est remplie.Le navigateur regardera cette liste de haut en bas et s'arrêtera au premier élément approprié correspondant à la largeur de la fenêtre.Supposons que ce qui sizessuit se trouve dans l'attribut :(min-width: 1023px) 780px,
(min-width: 675px) 620px,
100vw
Voici ce qui se passera dans différentes situations:- Si l'utilisateur travaille sur un grand écran de bureau, le navigateur considérera le premier élément de la liste comme approprié et saura que l'image doit avoir une largeur de 780 pixels.
- La largeur standard de la zone de visualisation d'un écran iPad vertical est de 768 pixels. Dans cette situation, le navigateur ignorera la première entrée de la liste, mais trouvera que les conditions actuelles correspondent à la deuxième entrée. Il indique au navigateur que l'image fera 620 pixels de large.
- ,
sizes. , , 100% .
Bien sûr, ce ne sont que des exemples. Dans le monde réel, tout est beaucoup plus compliqué. Par exemple, un utilisateur avec un grand écran affichant une page dans une fenêtre de navigateur étroite recevra une image plus petite que celle qu'il aurait si la fenêtre était agrandie en plein écran. Un utilisateur avec un iPad Pro peut très bien obtenir une image plus grande s'il place l'appareil en mode paysage. S'il utilise la tablette en mode portrait, il peut obtenir une image de taille moyenne. Et s'il utilise le navigateur en mode lorsque l'écran est divisé entre plusieurs fenêtres, il peut obtenir une petite image. Certains téléphones avec de grands écrans respecteront la deuxième règle de notre liste lorsqu'ils travailleront avec eux en mode paysage. C'est le charme du système décrit:le développeur n'a pas besoin de prendre en charge tous ces cas particuliers et les différents facteurs de forme des appareils. Il lui suffit de dire au navigateur quelle version de l'image choisir pour une zone de visualisation spécifique.Comment préparer une liste d'images parmi lesquelles le navigateur choisira la plus appropriée?Attribut Src
Vous avez peut-être remarqué que l'attribut est toujours utilisé dans tous les exemples ci-dessus src. Vous vous demandez peut-être si cet attribut est nécessaire étant donné l'attribut srcset. Le point ici est que si nous donnons au navigateur un attribut srcset, alors s'il s'agit d'un navigateur moderne, il remplacera la valeur srcdans le DOM par la valeur correspondant à l'image sélectionnée srcset. En conséquence, il s'avère que les navigateurs modernes ignorent l'attribut src, se concentrant plutôt sur l'attribut srcset.Mais l'attribut src, en soi, est toujours important pour les navigateurs qui ne prennent pas en charge le travail avec des images réactives. Ces navigateurs, assez anciens, ignorent les attributs srcsetet sizes. Ils ignorent tout simplement leur existence. Mais attributsrcils comprennent, vous pouvez donc y écrire l'adresse de l'image, qui servira d'option de sauvegarde pour ces navigateurs. J'écris généralement dans cet attribut l'adresse de la plus petite image qui semble bonne sur les moniteurs de bureau qui n'ont pas une densité de pixels élevée.Questions et réponses
▍Comment générer des ensembles d'images?
Les images peuvent être générées de différentes manières: manuellement, en utilisant l'outil de création d'images réactives, en utilisant les capacités CDN appropriées.Pour créer des images manuellement, vous devez ouvrir l'image originale dans Photoshop (ou dans un autre éditeur que vous utilisez) et l'exporter dans toutes les tailles nécessaires.Cela peut nécessiter beaucoup de temps, vous pouvez donc souhaiter automatiser ce travail à l'aide de l'outil approprié. Parmi ces outils, j'aime le plus Responsive Image Breakpoints Generator .de Cloudinary. Lorsque vous travaillez avec cet outil, transférez simplement l'image dessus, après quoi il créera automatiquement ses variantes de différentes tailles. Ici, vous pouvez ajuster le nombre d'images générées. Une fois que les images sont prêtes, elles peuvent être téléchargées et utilisées dans le projet.Une autre option pour prendre en charge les images réactives consiste à utiliser le CDN approprié pour les héberger. Par exemple - Cloudinary ou imgix. En utilisant un service similaire, l'image à la résolution la plus élevée disponible est téléchargée sur le CDN. Vous pouvez ensuite demander des versions de l'image de différentes tailles à l'aide des paramètres d'URL. Dans ce cas, vous n'avez pas à vous soucier du redimensionnement de l'image: indiquez simplement au CDN la taille dans laquelle vous allez afficher l'image correspondante.Voici une liste de services et de projets que vous pouvez utiliser pour créer des variations d'images de différentes tailles.HatQuelles tailles dois-je fournir au navigateur?
Bonne question! Si vous donnez au navigateur trop de ressources graphiques, vous perdrez simplement votre temps et vos efforts à les créer. S'il y a trop peu de ressources, cela signifie que vous obligez les utilisateurs de votre site à télécharger des images plus grandes que nécessaire.Si vous travaillez avec une seule image et que vous avez la possibilité de personnaliser la mise en page pour la sortie de cette image, vous pouvez utiliser l'outil Générateur de points d'arrêt d'images réactifs. Il examinera automatiquement l'image et décidera quel est l'ensemble optimal de ressources (en termes d'équilibre entre les tailles de fichier et leur résolution) générées à partir de cette image. Ensuite, cet outil générera non seulement des fichiers, mais préparera également automatiquement srcsetet des attributs sizes.Un ensemble standard de tailles d'image avec une largeur de 320 à 2560 pixelsSi vous travaillez dans un certain CMS, ou si vous créez une application Web, et que vous ne savez pas quelle taille d'image sera affichée à un endroit ou à un autre, alors je recommande d'utiliser l'ensemble de tailles standard images. Auparavant, je les dimensions suivantes:320w,640w,960w,1280w,1920wet2560w. Ce sont des nombres ronds obtenus en multipliant 320 par différents coefficients. Cet ensemble de ressources couvre les besoins d'une grande variété d'écrans - des petits écrans mobiles aux énormes moniteurs de bureau.Cependant, l'utilisation d'un ensemble de ressources standard est toujours moins efficace que l'utilisation de votre propre ensemble, compte tenu des caractéristiques du projet. Dans ce cas, bien que nous voyons une séquence assez logique, elle montre une augmentation progressive de la taille des fichiers, car si la largeur (et, en conséquence, la hauteur) d'une image est doublée, le nombre de pixels de cette image est quadruplé . Par conséquent, si vous devez utiliser un ensemble standard de tailles d'image, vous devrez peut-être choisir un ensemble qui aura moins d'options pour les images de petites tailles et plus d'options pour les grandes tailles.Si vous hébergez des images sur Cloudinary, une autre approche sera à votre disposition. C'est utiliserAPI Cloudinary , qui vous permet de traiter des images à l'aide du générateur de points d'arrêt d'image réactifs lors de leur téléchargement. Une fois les images traitées automatiquement, vous pouvez remplir dynamiquement les attributs srcsetet à l'aide de la réponse de l'API sizes.▍ Quelles valeurs faut-il saisir dans l'attribut tailles?
Afin de déterminer quelles valeurs doivent être saisies dans l'attribut sizes, vous devez analyser le CSS et comprendre quelle largeur d'image est affichée dans différentes conditions.Parfois, cela est déterminé par la largeur de l'image elle-même:img {
width 320px;
}
@media screen and (min-width: 37.5em) {
width: 640px;
}
Dans ce cas, il existe deux options de taille d'image fixe. Ce fait peut être directement reflété dans l'attribut sizes:<img
alt="Ferrari"
src="ferrari.jpg"
srcset="ferrari-s.jpg 320w,
ferrari-m.jpg 960w,
ferrari-l.jpg 1920w"
sizes="(min-width: 37.5em) 640px, 320px">
Cependant, il s'avère souvent que les tailles d'image sont flexibles. Les images héritent souvent des tailles de leurs conteneurs:img {
height: auto;
width: 100%;
}
.container {
padding: 1rem;
width: 100%;
}
@media screen and (min-width: 37.5em) {
.container {
width: 50%;
}
}
Dans cet exemple (en supposant que le seul élément affectant la largeur de l'image soit .container), la largeur du conteneur peut être considérée comme la largeur de l'image. Ici, il convient de prêter attention au fait que la largeur du retrait intérieur est soustraite de la largeur du récipient. Vous devrez peut-être considérer cela, peut-être pas. Tout dépend de la façon dont l'indentation affecte la largeur finale de l'image.<img
alt="Ferrari"
src="ferrari.jpg"
srcset="ferrari-s.jpg 320w,
ferrari-m.jpg 960w,
ferrari-l.jpg 1920w"
sizes="(min-width: 37.5em) calc(50vw - 2rem),
calc(100vw - 2rem)">
Comme vous pouvez le voir, la définition d'un attribut sizesdépend fortement de la disposition particulière. Habituellement, je crée du travail, en commençant par la recherche d'images dans les outils de développement du navigateur et en déterminant quelles options affectent la taille des images.OwComment vérifier les paramètres corrects pour des images réactives?
Il est facile d'imaginer que tester les paramètres corrects pour des images réactives peut être difficile et prendre du temps. Mais, à notre bonheur, il existe un outil qui simplifie la résolution de ces problèmes. Il s'agit d'un Linter d'image réactive .Il s'agit d'un bookmarklet qui peut être ajouté au navigateur et utilisé sur votre propre site. Lorsqu'il est appelé, il numérise automatiquement la page, en utilisant différentes tailles de la zone de visualisation et la densité de pixels de l'écran pour tester les images.Il affiche ensuite un rapport contenant des informations sur toutes les images de la page, et si la gestion de leurs tailles est correctement organisée. Si quelque chose ne va pas lors du test de la page, vous en serez informé et recevrez même des conseils sur la façon de résoudre le problème.Sommaire
Comme vous pouvez le voir, la combinaison d'attributs srcsetet sizesoffre une énorme opportunité. En définissant ces deux attributs, vous indiquez au navigateur la largeur des images que vous souhaitez utiliser pour une certaine largeur de la zone d'affichage et donnez une liste de ressources graphiques à partir desquelles le navigateur sélectionne celle qu'il considère la plus appropriée.Si vous devez résoudre des problèmes plus complexes lorsque vous travaillez avec des images, sachez qu'il existe des outils pour résoudre ces problèmes. Disons que cela revient à utiliser des formats graphiques modernes comme WebP ou à envoyer différentes images au client, selon la taille de l'écran. Si vous voulez vous plonger dans le travail avec des images réactives - jetez un œil à ce matériel.Chers lecteurs! Utilisez-vous des images réactives dans vos projets?