web-dev-qa-db-fra.com

images sensibles srcset ne fonctionne pas

J'ai essayé d'implémenter la nouvelle approche srcset pour les images responsive, en utilisant le code HTML suivant.

        <img class="swapImages"
        srcset="assets/images/content/large.jpg 1200w,
                assets/images/content/medium.jpg 800w,
                assets/images/content/small.jpg 400w"
        sizes="100vw"
        src="assets/images/content/small.jpg"
        alt="responsive image">

En utilisant chrome 40 et tout ce que je reçois est la plus grande image, redimensionner mon navigateur, vider le cache ne fait rien.

J'ai lu quelque part que je devais polyfill, alors j'ai utilisé le plugin picturefill, même si chrome devrait le supporter ..... ne fonctionne toujours pas.

Je m’ai préparé une page de démonstration: http://www.darrencousins.com/lab/resp-img-srcset/

Qu'est-ce que je fais mal/ne reçois pas?

Toute aide est massivement appréciée.

imageresponsive-designsrcset
32
sygad1

Vous avez le correct.

Le fait est qu’une fois que votre navigateur a une image de résolution supérieure (chargée, en cache), il n’a aucun intérêt à en télécharger une de qualité inférieure, même lorsque vous réduisez la taille de votre fenêtre (il s’agit pour cela de réduire le trafic).

Donc, si vous voulez tester cela, réduisez simplement votre fenêtre et ALORS chargez la page (après avoir effacé le cache/ou utilisez le mode incognito). Vous obtiendrez la version mobile ou tablette. Ensuite, en agrandissant la fenêtre, vous verrez un jour votre navigateur basculer vers une image à résolution supérieure.

52
TondaCZE

Lorsqu'il est utilisé dans une balise img, l'attribut srcset laisse les décisions au navigateur en ce qui concerne l'image à charger, comme indiqué par TondaCZE. Si vous souhaitez forcer les navigateurs à charger des images dans des fenêtres spécifiées, vous souhaitez utiliser l'élément image.

<picture>
  <source srcset="large.jpg" media="(min-width: 1200px)" />
  <source srcset="medium.jpg" media="(min-width: 800px)" />
  <img src="small.jpg" />
</picture>
23
mike.pj

Je viens de remarquer que votre page de démonstration ( http://www.darrencousins.com/lab/resp-img-srcset/ ) n'affichait jamais la version mobile (même lors du redimensionnement du navigateur ou de l'utilisation de DevTools mode) sur Google Chrome (version 48).

Changer le ratio de pixels de l'appareil en 1 semble charger l'image correcte.

 enter image description here

 enter image description here

Je ne sais pas pourquoi, je me demande si les descripteurs w prennent en compte le rapport pixels de périphérique

6
MeV

Je suppose que vous testez sur un navigateur Chrome et que la seule raison pour laquelle il ne fonctionne pas, c’est que c’est une fonctionnalité de chrome. Voir ci-dessous le fil de débordement de la pile (il convient également à la dernière version de chrome v54):

Problèmes d'attribut srcset avec Google Chrome version 40

Vérifié votre page sur IE8 et Firefoxv49 et les choses fonctionnent comme un charme!

L’autre chose que j’ai observée est que, bien que Chrome ne télécharge pas d’autres images, il redimensionne plutôt celle qui a été téléchargée. Donc, d’une certaine manière, nous sommes toujours dans un bien meilleur état si cela n’avait été que sur la page:

<img srcset="assets/images/content/large.jpg 1200w" alt="large image">

5
Kaashan

Pour toute personne utilisant la barre latérale de Chrome DevTools, vous pouvez indiquer à Chrome de désactiver le cache lorsque DevTools est ouvert. Le fait de changer de fenêtre et d'actualiser servira alors l'image réactive correcte si elle vous fournit constamment la plus grande image (mise en cache).

  1. Outils de développement ouverts (F12)
  2. Aller à Paramètres
  3. Faites défiler jusqu'à Réseau
  4. Check Disable cache (lorsque DevTools est ouvert)
0
BadHorsie