web-dev-qa-db-fra.com

Img réactif obtient des images erronées de srcset

Testé en utilisant Google Chrome en mode navigation privée et en rechargeant la page avec "cache vide et rechargement dur" à chaque fois.

J'ai l'image responsive html suivante:

<img class="content-img" src="/app/uploads/2018/07/1400x750.png" 

srcset="/app/uploads/2018/07/1400x750.png 1400w, 
        /app/uploads/2018/07/1400x750-768x411.png 768w, 
        /app/uploads/2018/07/1400x750-1280x686.png 1280w, 
        /app/uploads/2018/07/1400x750-520x279.png 520w, 
        /app/uploads/2018/07/1400x750-420x225.png 420w, 
        /app/uploads/2018/07/1400x750-340x182.png 340w, 
        /app/uploads/2018/07/1400x750-600x321.png 600w" 

sizes="(max-width: 666px) 100vw, (max-width: 1399px) 38vw, 535px" 
>

Comportement attendu:

1. Largeurs de fenêtre 0px - 666px:

  • Le navigateur doit prendre la largeur de pixel de la fenêtre d'affichage complète, par exemple 450px, et sélectionnez le plus petit src du srcset où la largeur est supérieure à 450px, dans ce cas '/app/uploads/2018/07/1400x750-520x279.png'

2. Largeurs de la fenêtre d'affichage 667px - 1399px:

  • Le navigateur doit occuper 38% de la largeur de la fenêtre, par exemple 380px @ 1000px viewport, et sélectionnez le plus petit src du srcset où la largeur est supérieure à 380px, dans ce cas '/app/uploads/2018/07/1400x750-420x225.png'

. Largeurs de la fenêtre d'affichage 1400+ px:

  • Le navigateur doit prendre la valeur par défaut de 535px et sélectionner le plus petit src du srcset où la largeur est supérieure à 535px, dans ce cas '/app/uploads/2018/07/1400x750-600x321.png'

Comportement réel:

Tester dans Google Chrome, en utilisant les outils de développement inspecter l'élément sur l'img pour tous les exemples ci-dessus, le "CurrentSrc" résultant dans chaque cas est:

  1. /app/uploads/2018/07/1400x750-520x279.png (CORRECT)

  2. /app/uploads/2018/07/1400x750-1280x686.png (INCORRECT (avec une largeur de 420 pixels)

  3. /app/uploads/2018/07/1400x750.png (INCORRECT (attend une largeur de 600 px)

Je me gratte la tête, d'autres questions similaires semblent toutes se résumer à un problème de mise en cache de Google Chrome, mais j'ai pris soin d'éliminer ce problème lors des tests et je ne le fais toujours pas ' t obtenir les images src que j'attends.

Je ne suis sûr qu'à 90% d'avoir écrit l'attribut "tailles" correct pour le comportement que je souhaite. Notez que la logique est légèrement complexe en raison de l'alignement avec des points d'arrêt CSS réactifs et d'essayer de charger des largeurs d'image sensibles dans le contexte.

htmlimagemedia-queriessrcset
10
mike-source

Quelques précisions sur la façon dont les attributs srcset et sizes définissent la façon dont le navigateur doit choisir l'image à afficher (voir Images réactives pour plus de détails).

Tout d'abord, le navigateur vérifie l'attribut sizes pour trouver la première condition de média qui s'applique à la largeur actuelle du périphérique. Ainsi, pour les points d'arrêt que vous avez spécifiés, le navigateur doit afficher l'image sélectionnée à pleine largeur de fenêtre d'affichage pour les appareils jusqu'à 666 px de largeur, puis à 38% de la largeur de fenêtre d'affichage pour les appareils entre 667 px et 1399 px de largeur, et enfin à une largeur fixe de 535 px pour les appareils. supérieure à 1399 px de large.

Deuxièmement, le navigateur vérifie l'attribut srcset pour trouver l'image qui correspond le mieux à la taille de la fente d'image déterminée par l'attribut sizes (comme décrit ci-dessus).

Donc, pour les points d'arrêt que vous avez spécifiés, attendez-vous à ce qui suit:

1) Pour les appareils d'une largeur maximale de 666 pixels, le navigateur doit sélectionner la largeur d'image la plus proche de la largeur de l'appareil (pas la plus petite image supérieure à la largeur de l'appareil).

Exemples:

Sur un appareil de 450 pixels de large, le navigateur doit sélectionner l'image 420 W.

Sur un appareil de 599px de large, le navigateur doit sélectionner l'image 600w.

2) Pour les appareils d'une largeur comprise entre 667 pixels et 1399 pixels, le navigateur doit sélectionner la largeur d'image la plus proche de 38% de la largeur de l'appareil.

Exemples:

Sur un appareil de 1000 pixels de large, le navigateur doit sélectionner l'image 340 W ou l'image 420 W (vous ne savez pas comment il choisit lorsque vous divisez la différence, car la taille de l'emplacement d'image déterminée par la requête multimédia est de 380 pixels).

Sur un appareil de 1366px de large, le navigateur doit sélectionner l'image 520w (car la taille de slot déterminée par la requête média est de 519px)

3) Pour les appareils de plus de 1399 pixels de large, le navigateur doit sélectionner l'image 520 W (car la taille de l'emplacement déterminée par la requête multimédia est un 535 pixels fixe).

REMARQUE: la rétine et les autres affichages haute résolution modifient un peu les mathématiques, ce qui fait que le navigateur double plus ou moins la largeur de l'image qu'il choisit dans chacun des exemples ci-dessus (voir Images réactives: si vous êtes juste changer les résolutions, utilisez srcset ).

Un couple de pièges potentiels à vérifier. Assurez-vous que vous avez <meta name="viewport" content="width=device-width"> dans la tête pour que les appareils sur lesquels vous testez adoptent leur largeur réelle lors du chargement de la page. Assurez-vous également qu'aucun css ou js en conflit n'interfère avec l'affichage de votre image.

Si vous avez évité les pièges, votre code semble sinon bien et l'extrait similaire ci-dessous donne les résultats attendus pour moi, bien que vous deviez faire attention à la mise en cache lors des tests comme vous l'avez déjà remarqué (une organisation légèrement différente pourrait vous aider à analyser plus rapidement ce qui les images doivent être choisies dans des circonstances différentes). Vous trouverez ci-dessous un extrait utilisant des images d'espace réservé qui montrent leurs largeurs, ce qui peut vous aider dans vos tests.

<img srcset="https://via.placeholder.com/340x182 340w,
             https://via.placeholder.com/420x225 420w,
             https://via.placeholder.com/520x279 520w,
             https://via.placeholder.com/600x321 600w,
             https://via.placeholder.com/768x411 768w,
             https://via.placeholder.com/1280x686 1280w,
             https://via.placeholder.com/1400x750 1400w"
     sizes="(max-width: 666px) 100vw,
            (max-width: 1399px) 38vw,
            535px"
     src="https://via.placeholder.com/340x182"
     alt="placeholder image">
5
benvc