Optimisation de la largeur de l’écran avec srcset

Génial! Nous pouvons économiser quelques octets supplémentaires pour les appareils non-rétina. Malheureusement, la technique srcset ci-dessus manque un cas d’utilisation important pour les images plus grandes: si l’utilisateur a un smartphone rétina, il téléchargera l’image haute résolution même si la version standard suffirait.

Imaginez que nous voulions afficher une grande photo dans notre .header élément. L’en-tête fait 960 pixels de large dans notre présentation de bureau, notre photo doit donc avoir au moins 1920 pixels de large pour bien s’afficher sur les écrans rétina. Nous fournirons également une photo de 960 pixels pour les écrans standard. Maintenant, considérons un smartphone avec un écran rétina. Les smartphones ont généralement moins de 400 pixels de large en mode portrait, ce qui signifie que l’image de qualité rétina correspondante ne doit avoir qu’une largeur de 800 pixels.

Hey! Nous pouvons servir notre photo à résolution standard sur les smartphones rétina!

La leçon ici est que nous voulons optimiser les images plus grandes en fonction de leurs dimensions finales, et pas seulement de la résolution de l’écran de l’appareil. Allons-y et ajoutons cette grande photo à notre .header élément:

<div class='section header'>
  <div class='photo'>
    <img src='images/photo-small.jpg'
         srcset='images/photo-big.jpg 2000w,
                 images/photo-small.jpg 1000w'
         sizes='(min-width: 960px) 960px,
                100vw'/>
  </div>
</div>

Nous avons le même élément srcset que la dernière section, mais au lieu des descripteurs 1xet 2x, nous fournissons la largeur physique inhérente de l’image. Le 2000w dit au navigateur que photo-big.jpg est de 2000 pixels de large. De même, les 1000wmoyens photo-small.jpgont une largeur de 1000 pixels. Si vous vous interrogez sur ce w, c’est une unité spéciale utilisée uniquement pour ce type de scénario d’optimisation d’image.

La largeur de l’image seule n’est pas suffisante pour qu’un périphérique détermine quelle image il doit charger. Nous devons également lui dire quelle sera la largeur finale de l’image. C’est là que l’attribut sizes entre en jeu. Il définit une série de requêtes multimédia avec la largeur de rendu de l’image lorsque cette requête média est en vigueur.

Ici, nous disons que lorsque l’écran est d’au moins 960px de large large, l’image aura également une largeur de 960 pixels. Sinon, la valeur 100vw par défaut indique au navigateur que la largeur de l’image sera de 100% de la « largeur de la fenêtre d’affichage » (un terme sophistiqué pour la largeur de l’écran). Vous pouvez en savoir plus sur vw sur MDN. Tout cela correspond au comportement de redimensionnement de l’image qui est dans notre CSS.

En parlant de cela, nous devons faire quelques changements pour positionner notre nouvelle image d’en-tête correctement. Ajoutez les deux règles suivantes à nos autres styles de base, juste au-dessus de la requête multimédia de styles mobiles:

.header {
  height: auto;
  justify-content: inherit;
  align-items: inherit;
}

.photo img {
  width: 100%;
  display: block;
}

Rappelez-vous que notre photo basse résolution a une largeur de 1000 pixels, ce qui signifie que les appareils rétina peuvent l’utiliser tant que leur écran a une largeur inférieure à 500 pixels. Dans Firefox, vous devriez maintenant pouvoir redimensionner le navigateur pour voir la version retina (« Big ») quand la fenêtre est plus large que 500 pixels et la version non-rétina (« Small ») pour des largeurs plus étroites.

test avec chrome

Cette technique fonctionne très bien dans Chrome, mais nous ne pouvons pas vraiment le vérifier. Chrome utilisera toujours la version haute résolution si elle a déjà été mise en cache localement, ce qui signifie que nous ne pouvons pas voir la version basse résolution en réduisant simplement la fenêtre du navigateur. Nous devons éviter le cache du navigateur local en ouvrant une nouvelle fenêtre de navigation privée, puis éviter le chargement photo-big.jpgen rendant la fenêtre très étroite avant de charger la page.