Catégories
Astuces et Design

Guide de la syntaxe des images réactives en HTML

Ce guide concerne les Syntaxe HTML pour des images réactives (et un peu de CSS pour faire bonne mesure). La syntaxe des images réactives consiste à servir une image à partir de plusieurs options en fonction des règles et des circonstances. Il existe deux formes d'images réactives, et elles correspondent à deux choses différentes:

Si votre seul objectif est…

Augmentation des performances

Alors ce dont vous avez besoin c'est…

https://css-tricks.com/

Il y a beaucoup du gain de performance à obtenir en utilisant des images réactives. Le poids de l'image a un impact énorme sur les performances globales des pages, et les images réactives sont l'une des meilleures choses que vous puissiez faire pour réduire le poids de l'image. Imaginez que le navigateur puisse choisir entre une image 300 × 300 ou une image 600 × 600. Si le navigateur n'a besoin que du 300 × 300, c'est potentiellement une économie de 4 × octets sur le fil! Les économies augmentent généralement à mesure que la résolution d'affichage et la taille de la fenêtre diminuent; sur les plus petits écrans, quelques études de cas ont montré une économie d'octets de 70 à 90%.

Si vous avez également besoin…

Contrôle de conception

Alors ce dont vous avez besoin c'est…


  
  
  https://css-tricks.com/

Un autre objectif parfaitement légitime avec des images réactives n'est pas seulement de servir différentes tailles de la même image, mais de servir différentes images. Par exemple, recadrer une image différemment en fonction de la taille de l'écran et des différences de mise en page. C'est ce qu'on appelle la «direction artistique».

le L'élément est également utilisé pour les types d'images de secours et tout autre type de commutation de requête de média (par exemple, différentes images pour le mode sombre). Vous obtenez un meilleur contrôle de ce que les navigateurs affichent.


Il y a beaucoup de choses à discuter ici, alors passons en revue les deux syntaxes, tous les attributs et valeurs associés, et parlons de quelques sujets connexes en cours de route, comme les outils et les navigateurs.


En utilisant srcset

le https://css-tricks.com/ la syntaxe sert à servir des versions de tailles différentes du même image. Vous pourriez essayer pour servir des images entièrement différentes en utilisant cette syntaxe, mais les navigateurs supposent que tout dans un srcset est visuellement identique et choisira la taille qu'il pense être la meilleure, de manière impossible à prédire. Je ne le recommanderais donc pas.

Peut-être le le plus simple possible la syntaxe des images réactives ajoute un srcset attribut avec x des descripteurs sur les images pour les étiqueter afin de les utiliser sur des écrans de différentes densités de pixels.

Un bébé souriant avec un bandeau jaune. "
  src = "https://css-tricks.com/baby-lowres.jpg"
  srcset = "baby-highres.jpg 2x

Ici, nous avons fait la valeur par défaut (la src) la copie «basse résolution» (1 ×) de l'image. Le choix par défaut des ressources les plus petites / les plus rapides est généralement le choix intelligent:. Nous proposons également une version 2 ×. Si le navigateur sait qu'il se trouve sur un affichage à plus haute densité de pixels (le 2x partie), il utilisera cette image à la place.

Démo
Un bébé souriant avec un bandeau jaune. "
  src = "https://css-tricks.com/baby-lowres.jpg"
  srcset = "
    baby-high-1.jpg 1.5x,
    baby-high-2.jpg 2x,
    baby-high-3.jpg 3x,
    baby-high-4.jpg 4x,
    baby-high-5.jpg 100x
  

Vous pouvez faire autant de variantes de densité de pixels que vous le souhaitez.

Bien que ce soit cool et utile, x les descripteurs ne représentent qu'un faible pourcentage de l'utilisation d'images réactives. Pourquoi? Ils ne permettent aux navigateurs de s'adapter qu'en fonction d'une seule chose: afficher la densité de pixels. Souvent, cependant, nos images réactives sont sur des mises en page réactives, et les images taille de mise en page rétrécit et s'étire à droite avec la fenêtre. Dans ces situations, le navigateur doit prendre des décisions basées sur deux choses: la densité de pixels de l'écran et la taille de mise en page de l'image. C'est là que w descripteurs et sizes attribut entre, que nous verrons dans la section suivante.

En utilisant srcset / w + sizes

Ce sont les bonnes choses. Cela représente environ 85% de l'utilisation d'images réactives sur le Web. Nous diffusons toujours la même image dans plusieurs tailles, mais nous fournissons plus d'informations au navigateur afin qu'il puisse s'adapter en fonction de la densité de pixels et taille de la mise en page.

Un bébé souriant avec un bandeau jaune. "
  srcset = "
    baby-s.jpg 300w,
    baby-m.jpg 600w,
    baby-l.jpg 1200w,
    baby-xl.jpg 2000w
  "
  tailles = "70vmin

Nous fournissons toujours plusieurs exemplaires du même l'image et en laissant le navigateur choisir la plus appropriée. Mais au lieu de les étiqueter avec une densité de pixels (x) nous les étiquetons avec leur largeur de ressource, en utilisant w descripteurs. Donc si baby-s.jpg est de 300 × 450, nous l'étiquetons comme 300w.

En utilisant srcset avec largeur (w) des descripteurs comme celui-ci signifie qu'il devra être associé au sizes afin que le navigateur sache la taille de l'espace dans lequel l'image sera affichée. Sans ces informations, les navigateurs ne peuvent pas faire de choix judicieux.

Démo

Création précise sizes

Créer sizes les attributs peuvent devenir délicats. le sizes l'attribut décrit la largeur que l'image affichera dans la mise en page de votre site spécifique, ce qui signifie qu'il est étroitement lié à votre CSS. La largeur à laquelle les images sont rendues dépend de la disposition plutôt que simplement de la fenêtre!

Jetons un œil à une mise en page assez simple avec trois points d'arrêt. Voici une vidéo illustrant cela:

Les points d'arrêt sont exprimés avec des requêtes multimédias en CSS:

body {
  margin: 2rem;
  font: 500 125% system-ui, sans-serif;
}
.page-wrap {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 200px;
  grid-template-areas:
    "header header"https://css-tricks.com/"main aside"https://css-tricks.com/"footer footer";
}

@media (max-width: 700px) {
  .page-wrap {
    grid-template-columns: 100%;
    grid-template-areas:
      "header"https://css-tricks.com/"main"https://css-tricks.com/"aside"https://css-tricks.com/"footer";
  }
}
@media (max-width: 500px) {
  body {
    margin: 0;
  }
}

L'image est dimensionnée différemment à chaque point d'arrêt. Voici une ventilation de tous les bits et pièces qui affectent la largeur de mise en page de l'image au plus grand point d'arrêt (lorsque la fenêtre est plus large que 700 pixels):

L'image est aussi large que 100vw moins tout ce qui est explicitement dimensionné margin, padding, largeurs de colonne et gap.
  • À la plus grande taille: il y a 9rem d'espacement explicite, donc l'image est calc(100vw - 9rem - 200px) large. Si cette colonne utilise un fr unité au lieu de 200px, on serait un peu foutu ici.
  • De taille moyenne: la barre latérale est placée en dessous, il y a donc moins d'espacement à considérer. Pourtant, nous pouvons faire calc(100vw - 6rem) pour tenir compte des marges et du rembourrage.
  • À la plus petite taille: la marge du corps est supprimée, donc juste calc(100vw - 2rem) fera l'affaire.

Phew! Pour être honnête, j'ai trouvé cela un peu difficile à réfléchir et j'ai fait un tas d'erreurs en créant cela. Au final, j'ai eu ceci:

UNE sizes attribut qui donne au navigateur la largeur de l'image sur les trois points d'arrêt, en tenant compte de la grille de mise en page et de tous les environnements gap, margin, et padding qui finissent par avoir un impact sur la largeur de l'image.

Attends maintenant! Roulement de tambour! 🥁🥁🥁C'est toujours faux. Je ne comprends pas pourquoi exactement, car pour moi, cela ressemble à 100% décrit ce qui se passe dans la mise en page CSS. Mais c'est faux parce que RespImageLint de Martin Auswöger le dit. L'exécution de cet outil sur la démonstration isolée ne signale aucun problème, sauf le fait que le sizes l'attribut est incorrect pour certaines tailles de fenêtres et devrait être:

Je ne sais pas comment cela est calculé et c'est tout à fait impossible à maintenir à la main, mais c'est exact. L'outil de Martin redimensionne par programme la page d'un tas et écrit un sizes attribut qui décrit la largeur réelle et observée de l'image sur une large gamme de tailles de fenêtres. Ce sont les ordinateurs, les mathématiques, donc c'est vrai. Donc, si vous voulez une super précision sizes attribut, je vous recommande de simplement en mettre un mauvais au début, d'exécuter cet outil et de copier le bon.

Pour une plongée encore plus profonde dans tout cela, consultez Eric Portis w descripteurs et sizes: Sous la capuche.

Être plus cool sizes

Une autre option consiste à utiliser la méthode Horseshoes & Hand Grenades sizes (ou, en d'autres termes, des comptes serrés).

Par exemple, sizes="96vw" dit: «Cette image va être assez grande sur la page – presque toute la largeur – mais il y aura toujours un peu de rembourrage sur les bords, donc pas tout à fait. Ou sizes="(min-width: 1000px) 33vw, 96vw" dit: "Cette image est dans une disposition à trois colonnes sur de grands écrans et proche de la pleine largeur sinon." Sur le plan pratique, cela peut être une solution sensée.

Vous trouverez peut-être que certaines solutions d'images réactives automatisées, qui n'ont aucun moyen de connaître votre mise en page, font une supposition – quelque chose comme sizes="(max-width: 1000px) 100vw, 1000px". C'est juste dire, "Hé, nous ne savons pas grand-chose sur cette mise en page, mais nous allons essayer et dire, dans le pire des cas, l'image est pleine largeur, et espérons qu'elle ne sera jamais plus grande que 1000 pixels".

Abstrait sizes

Je suis sûr que vous pouvez imaginer à quel point il est facile non seulement sizes mal, mais aussi devenir mal au fil du temps car les mises en page changent sur votre site. Il peut être judicieux de l'abstraire à l'aide d'un langage de modèle ou d'un filtre de contenu afin de pouvoir modifier plus facilement la valeur de toutes vos images.

Je parle essentiellement de définir un sizes valeur dans une variable une fois, et en utilisant cette variable dans un tas de différents des éléments sur votre site. Le HTML natif ne propose pas cela, mais tout langage back-end le fait; par exemple, les constantes PHP, les variables de configuration Rails, l'API de contexte React utilisée pour une variable d'état globale ou des variables dans un langage de modèles comme Liquid peuvent toutes être utilisées pour abstraire sizes.



https://css-tricks.com/ "
  tailles = "<?php echo $my_sizes; ?>"
/></code></pre>
<h4>"Choix du navigateur"</h4>
<p>Maintenant que nous avons <code>sizes</code> attribut en place, le navigateur sait à quelle taille (ou à proximité) l'image sera rendue et peut <strong>travailler sa magie</strong>. Autrement dit, il peut faire des calculs qui tiennent compte de la densité de pixels de l'écran et de la taille à laquelle l'image sera rendue, puis choisir l'image de la taille la plus appropriée. </p>
<p>Le calcul est assez simple au début. Supposons que vous êtes sur le point d'afficher une image de 40 Vw de large sur une fenêtre de 1 200 pixels de large, sur un écran de 2x pixels. L'image parfaite aurait une largeur de 960 pixels, donc le navigateur va chercher ce qu'il y a de plus proche. Le navigateur calculera toujours une taille cible qu'il<em> préférerais</em> en fonction de la fenêtre d'affichage et des situations de densité de pixels, et de ce qu'il sait de <code>sizes</code>et comparer cet objectif à <em>ce qu'il a</em> choisir parmi <code>srcset</code>. Cependant, la façon dont les navigateurs font la cueillette peut devenir un peu bizarre.</p>
<p>Un navigateur peut prendre en compte <em>plus de choses</em> dans cette équation si elle le souhaite. Par exemple, il pourrait considérer les vitesses de réseau actuelles de l'utilisateur, ou si l'utilisateur a inversé une sorte de préférence «d'économiseur de données». Je ne sais pas si des navigateurs font réellement ce genre de choses, mais ils sont libres de le faire s'ils le souhaitent car c'est ainsi que la spécification a été écrite. Ce que certains navigateurs choisissent parfois de faire est d'extraire du cache. Si les calculs montrent qu'ils devraient utiliser une image de 300 pixels, mais qu'ils ont déjà 600 pixels dans le cache local, ils l'utiliseront simplement. <em>Intelligent.</em> La place pour ce genre de chose est <em>force</em> du <code>srcset</code>/<code>sizes</code> syntaxe. C'est aussi pourquoi vous utilisez toujours différentes tailles de <em>même</em> image, dans <code>srcset</code>: vous n'avez aucun moyen de savoir quelle image va être sélectionnée. C'est le <strong>choix du navigateur</strong>.</p>
<h4>C'est bizarre. Le navigateur ne connaît-il pas déjà ce genre de choses?</h4>
<p>Vous pensez peut-être, <em>"Uhm pourquoi dois-je dire au navigateur la taille de l'image, n'est-ce pas?"</em> Eh bien, c'est le cas, mais seulement après avoir téléchargé votre code HTML et CSS et tout présenté. le <code>sizes</code> l'attribut concerne la vitesse. Il donne au navigateur suffisamment d'informations pour faire un choix intelligent <em>dès qu'il voit votre <code><img></code></em>.</p>
<div class=

Maintenant, vous pensez peut-être, "Mais qu'en est-il des images chargées paresseusement?" (comme dans, au moment où une image paresseuse est demandée, la mise en page est déjà terminée et le navigateur connaît déjà la taille de rendu de l'image). Eh bien, bonne réflexion! La bibliothèque paresseuse d'Alexander Farkas écrit sizes automatiquement sur lazyload, et il y a une discussion en cours sur la façon de fairesizes pour les images chargées paresseusement, nativement.

sizes peut être plus grand que la fenêtre

Note rapide sur sizes. Supposons que vous ayez un effet sur votre site afin qu'une image «zoome» lorsque vous cliquez dessus. Peut-être qu'il s'agrandit pour remplir la fenêtre entière, ou peut-être qu'il zoome encore plus, pour que vous puissiez voir plus de détails. Dans le passé, nous aurions peut-être dû échanger src au clic pour passer à une version haute résolution. Mais maintenant, en supposant qu'une source à haute résolution est déjà dans le srcset, vous pouvez simplement changer sizes attribuer à quelque chose d'énorme, comme 200vw ou 300vw, et le navigateur devrait télécharger automatiquement la source super haute résolution pour vous. Voici un article de Scott Jehl sur cette technique.

↩️ Haut de page


En utilisant

Avec un peu de chance, nous l'avons battu au sol https://css-tricks.com/ sert à servir des versions de tailles différentes du même image. le la syntaxe peut le faire aussi, mais la différence ici est que le navigateur doit respecter les règles que vous définissez. C'est utile lorsque vous souhaitez modifier plus que la résolution de l'image chargée pour l'adapter à la situation de l'utilisateur. Ce changement intentionnel de l'image est généralement appelé «direction artistique».

Direction artistique


  
  
  Bébé dort

Ce bloc de code est un exemple de ce à quoi il pourrait ressembler d'avoir trois étapes d'une image «dirigée par l'art».

  • Sur les grands écrans, affichez une photo agrandie.
  • Sur les écrans moyens, montrez cette même photo, un peu agrandie.
  • Sur les petits écrans, zoomez encore plus.

Le navigateur doit respecter nos requêtes médiatiques et échanger des images à nos points d'arrêt exacts. De cette façon, nous pouvons être absolument sûrs que personne sur un petit écran ne verra une petite image dézoomée, ce qui pourrait ne pas avoir le même impact que l'une des versions zoomées.

Voici une démo, écrite en Pug pour résumer une partie de la nature répétitive de .

La direction artistique peut faire bien plus que simplement recadrer

Bien que le recadrage et le zoom comme celui-ci soient de loin la forme la plus courante de direction artistique, vous pouvez lot plus avec elle. Par exemple, vous pouvez:

Le ciel est la limite, vraiment.

Combiner source et srcset

Parce que utilise également le srcset syntaxe, ils peuvent être combinés. Cela signifie que vous pouvez toujours profiter des avantages de performances de srcset même en échangeant des images visuellement différentes avec . Cela devient assez verbeux cependant!


  
  
  Bébé dort

Plus vous créez de variantes et plus vous créez de versions redimensionnées par variation, plus ce code doit être détaillé.

Remplacement des formats d'image modernes

le L'élément est particulièrement adapté pour pouvoir gérer les «replis». Autrement dit, des images dans des formats de pointe que tous les navigateurs ne sont peut-être pas en mesure de gérer, avec des formats alternatifs pour les navigateurs qui ne peuvent pas charger le modèle préféré. Par exemple, supposons que vous souhaitiez utiliser une image au format WebP. C’est un très bon format d’image, souvent le choix le plus performant, et il est pris en charge partout où le l'élément est, sauf Safari. Vous pouvez gérer cette situation vous-même, comme:


  
  Une énorme fête avec des gâteaux.

Cela réussit à servir une image WebP aux navigateurs qui la prennent en charge et revient à une image JPEG, qui est définitivement prise en charge par tous les navigateurs.

Voici un exemple d'une photographie (de moi) à la même taille exacte où la version WebP représente environ 10% (!!!) de la taille du JPEG.

Comment tu créer une image WebP? Eh bien, c'est plus une douleur dans le cul que vous ne le souhaiteriez, c'est sûr. Il existe des convertisseurs en ligne, des outils de ligne de commande et certains logiciels de conception modernes, comme Sketch, vous aident à exporter dans ce format. Ma préférence est d'utiliser un service d'hébergement d'images CDN qui envoie automatiquement des images au format parfait pour le navigateur demandeur, ce qui rend tout cela inutile (car vous pouvez simplement utiliser img/srcset).

WebP n'est pas le seul joueur comme celui-ci. Safari ne prend pas en charge WebP, mais Est-ce que prend en charge un format appelé JPG 2000 qui présente certains avantages par rapport au JPEG. Internet Explorer 11 prend en charge un format d'image appelé JPEG-XR qui présente différents avantages. Donc, pour toucher les trois, cela pourrait ressembler à:


  
  
  

Cette syntaxe (empruntée à un article de blog de Josh Comeau) prend en charge les trois formats d'image «nouvelle génération» en une seule fois. IE 11 ne prend pas en charge le la syntaxe, mais cela n'a pas d'importance car il obtiendra le secours qui est au format JPEG-XR qu'il comprend.

Estelle Weyl a également couvert cette idée dans un article de blog de 2016 sur l'optimisation d'image.

↩️ Haut de page


Où obtenez-vous les images de tailles différentes?

Vous pouvez les faire vous-même. Heck, même l'application gratuite Aperçu sur mon Mac peut redimensionner une image et «Enregistrer sous».

L'application de prévisualisation Mac redimensionne une image, ce que n'importe quelle application d'édition d'image (y compris Photoshop, Affinity Designer, Acorn, etc.) peut également faire. De plus, ils aident souvent en exportant les variations en une seule fois.

Mais c'est du travail. Il est plus probable que la création de variantes de ces images soit automatisée d'une manière ou d'une autre (voir la section ci-dessous) ou que vous utilisiez un service qui vous permet de créer des variantes en manipulant simplement l'URL de l'image. C’est une caractéristique très courante de tout service d’hébergement d’image / CDN d’image. Pour n'en nommer que quelques-uns:

Non seulement ces services offrent un redimensionnement d'image à la volée, mais ils offrent également souvent des éléments supplémentaires, tels que le recadrage, le filtrage, l'ajout de texte et toutes sortes de fonctionnalités utiles, sans parler de la gestion efficace des actifs à partir d'un CDN et automatiquement dans les prochains. formats gén. Cela en fait un choix vraiment solide pour à peu près n'importe quel site Web, je dirais.

Voici Glen Maddern dans un très bon screencast parlant de l'utilité des CDN d'image:

Les logiciels de conception sont de plus en plus conscients du fait que nous avons souvent besoin de plusieurs copies d'images. L'interface d'exportation de Figma est assez agréable, où n'importe quelle sélection donnée peut être exportée. Il permet plusieurs exportations à la fois (dans différentes tailles et formats) et se souvient de ce que vous avez fait lors de la dernière exportation.

Exporter à Figma

Images réactives automatisées

La syntaxe des images réactives est complexe au point que le faire à la main est souvent hors de question. Je recommande fortement d’automatiser et d’abstraire autant de données que possible. Heureusement, de nombreux outils qui vous aident à créer des sites Web le savent et incluent une sorte de support pour cela. Je pense que c'est génial parce que c'est ce logiciel devrait faire pour nous, en particulier lorsque c'est quelque chose qui est entièrement programmatique et qui peut être mieux fait par le code que par les humains. Voici quelques exemples…

  • Cloudinary a cet outil réactif de points d'arrêt, y compris une API pour générer les points d'arrêt parfaits.
  • WordPress génère par défaut plusieurs versions d'images et de sorties dans la syntaxe des images réactives.
  • Gatsby a un sac à main de plugins pour transformer et implémenter des images sur votre site. Vous les implémentez finalement avec gatsby-image, ce qui est très sophistiqué pour implémenter des images réactives et d'autres optimisations de chargement d'images. En parlant de React, il a des abstractions de composants comme «Un composant d'image React presque idéal» qui fait aussi des trucs sympas.
  • Le module Images Responsiver Node de Nicolas Hoizey (et son plugin Eleventy) fait une tonne de choix de balisage intelligents pour vous, et se marie bien avec un CDN qui peut gérer les bits de redimensionnement à la volée.
  • Ce ne sont que quelques exemples! Littéralement, tout ce que vous pouvez faire pour rendre ce processus plus facile ou automatique vaut la peine d'être fait.
Voici que j'inspecte une image dans un article de blog WordPress et que je vois un costaud srcset avec une quantité saine d'options de taille pré-générées et un sizes attribut adapté à ce thème.
Une page de destination pour gatsby-image expliquant tous les trucs supplémentaires de chargement d'image qu'il peut faire.

Je suis sûr qu'il existe de nombreux autres CMS et autres produits logiciels qui aident à automatiser la complexité de la création de la syntaxe des images réactives. Bien que j'aime que toute cette syntaxe existe, je la trouve tout à fait trop lourde à écrire à la main. Pourtant, je pense qu'il vaut la peine de connaître toute cette syntaxe afin que nous puissions créer nos propres abstractions, ou vérifier les abstractions que nous utilisons pour nous assurer qu'elles font les choses correctement.

Concepts associés

  • le object-fit La propriété CSS contrôle le comportement d'une image dans sa propre boîte. Par exemple, une image «écrase» normalement si vous changez les dimensions en quelque chose de différent de son rapport d'aspect naturel, mais object-fit peut être utilisé pour le recadrer ou le contenir à la place.
  • le object-position La propriété en CSS vous permet de déplacer une image dans sa boîte.

Qu'en est-il des images réactives en CSS avec des images d'arrière-plan?

Nous avons couvert exactement cela auparavant. L'astuce consiste à utiliser @media requêtes pour modifier le background-image la source. Par exemple:

.img {
  background-image: url(small.jpg);
}
@media 
  (min-width: 468px),
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) {
  .img {
    background-image: url(large.jpg);
  }
}

Avec cette syntaxe CSS, selon les conditions du navigateur, le navigateur télécharge uniquement l'une des deux images, ce qui permet d'atteindre le même objectif de performances que la syntaxe des images réactives en HTML. Si cela peut vous aider, considérez ce qui précède comme l'équivalent CSS du syntaxe: le navigateur doit suivez vos règles et affichez ce qui correspond.

Si vous cherchez à laissez le navigateur choisir la meilleure option, comme srcset/sizes, mais en CSS, la solution sera finalement le image-set() une fonction. Il y a deux problèmes avec image-set()aujourd'hui, cependant:

  • Le support n'est pas encore là. L'implémentation de Safari mène le peloton, mais image-set() a été préfixé dans Chrome pendant huit ans, et il n'est pas du tout présent dans Firefox.
  • Même la spécification elle-même semble en retard. Par exemple, il prend uniquement en charge x descripteurs (non w, encore).

Il est préférable d'utiliser simplement les requêtes multimédias pour l'instant.

Avez-vous besoin de polyfill?

Je suis jolie meh sur pollyfilling tout cela en ce moment. Il existe cependant un excellent polyfill, appelé Picturefill, qui vous offrira une prise en charge complète d'IE 9-11 si vous en avez besoin. N'oubliez pas, cependant, qu'aucune de ces choses ne s'arrête au point de ne pas afficher d'image du tout dans les navigateurs non compatibles, en supposant que vous avez un https://css-tricks.com/ quelque part. Si vous faites l'hypothèse (assez sûre) qu'IE 11 s'exécute sur un écran de bureau à faible densité de pixels, vous pouvez faire en sorte que vos sources d'images reflètent cela par défaut et se développent à partir de là.

Autres considérations d'image importantes

  • Optimiser la qualité: Le point des images réactives est de charger la ressource la plus petite et la plus impactante possible. Vous ne pouvez pas y parvenir sans compresser efficacement votre image. Vous visez un «point idéal» pour chaque image, entre une belle apparence et une lumière. J'aime laisser les services d'hébergement d'images résoudre ce problème pour moi, mais Etsy a une très bonne synthèse de ce qu'ils ont pu accomplir avec l'infrastructure qu'ils ont eux-mêmes construite.
  • Servir à partir de CDN: En parlant de services d'hébergement d'images, la vitesse se présente sous plusieurs formes. Les serveurs rapides géographiquement proches de l'utilisateur sont également un facteur de vitesse important.
  • Mise en cache: Quoi de mieux que de charger moins de données sur le réseau? Chargement d'aucune donnée! C’est à cela que sert la mise en cache HTTP. En utilisant le Cache-Control En-tête, vous pouvez dire au navigateur de conserver les images afin que si la même image est à nouveau nécessaire, le navigateur n'a pas besoin de passer par le réseau pour l'obtenir, ce qui représente une amélioration considérable des performances pour les visionnements répétés.
  • Chargement paresseux: C'est une autre façon d'éviter de charger entièrement des images. Le chargement paresseux signifie attendre de télécharger une image jusqu'à ce qu'elle soit dans ou près de la fenêtre. Ainsi, par exemple, une image située bien en bas de la page ne se chargera pas si l'utilisateur n'y fait jamais défiler.

Autres bonnes ressources

(Que je n'ai pas déjà lié dans le post!)

Prise en charge du navigateur

C'est pour srcset/sizes, mais c'est pareil pour .

Bureau

Chrome Firefox C'EST À DIRE Bord Safari
38 38 Non 16 9

Mobile / Tablette

Android Chrome Android Firefox Android iOS Safari
81 68 81 9.0-9.2

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *