5568 sujets

Sémantique web et HTML

Srcset ne charge pas l'image que je veux

Bonjour à tous,

Je suis confronté à un problème concernant srcset
Voici le code : 

<img srcset ="/images/fleurs600.jpg 1298w, 
                          /images/fleurs600.webp 600w, 
                          /images/fleurs300.webp 300w"
 sizes="100vw"  
src="/images/fleurs300.jpg"
style="width:100%; max-width: 600px;" 
 alt="Belles fleurs">


Je ne comprends pas pourquoi le navigateur s'obstine à me charger l'image "fleurs600.webp" ! Que ce soit sur mobile, sur desktop c'est toujours la même Smiley hum

Si vous avez une idée ... ?? Merci

ps : j'ai modifié les urls des images pour la lisibilité
Modifié par J_B (06 Nov 2019 - 11:27)
Je me rends compte que je n'ai pas été très clair dans ma demande :

Je voudrais que lorsque je suis sur mobile, ce soit l'image au mieux "fleurs300.webp" ou "fleurs300.jpg" qui soit chargée. Ce qui n'est pas le cas.

J'ai essayé en rajoutant des conditions à sizes
sizes="(min-width : 600px) 600px, (min-width: 200px) 320px"


ça ne change rien !

Edit : j'ai modifié le code pour y mettre ceci à la place : 

<picture>
 <source srcset="/images/fleurs600.webp" media="(min-width:500px)"> 
 <source srcset="/images/fleurs300.webp" media="(min-width:200px)">
 <img src="/images/fleurs300.jpg" alt="Belles fleurs" style="width:100%; max-width: 600px;" >
</picture>

Là ça fonctionne, mais j'aurais préféré l'autre solution ... Je laisse ça le temps de comprendre pourquoi ça marche pas avec <srcset>
Modifié par J_B (06 Nov 2019 - 12:02)
Bonjour,

oui, comme le suggère aliasdmc, tu devrais lire l'article d'Alsacreations cité, il est très explicite.
En attendant, tu peux t'inspirer de mon css où je traite un carroussel avec srcset. Je ne prétends pas qu'il est parfait et qu'on ne pourrait pas enlever, ajouter ou modifier quelques règles, mais il fonctionne. Je viens de refaire le test (F 12 sous Firefox + Reseau). Sur la plus faible résolution 320x480, sont bien téléchargées les images de 320. Si l'on change l'orientation du smartphone ou que l'on passe à d'autres appareils plus larges, ce sont les images en 780 ou 1024 qui sont téléchargées. Je pense cependant que je pourrais ajuster plus finement ces valeurs. Il n'y a plus beaucoup d'appareils en 320x480. Et sur un iPhone 5/SE (320x568), ce sont les images en 768 qui sont téléchargées. C'est aussi un compromis entre le poids des images et leur qualité. Je note qu'une image de 780 pesant 79 K est téléchargée en 101 ms sur ma ligne. Un ajustement très fin nécessiterait un stock trop important d'images de différentes résolutions. 
<div id="slider">
 <figure>
	<picture>
   <source media="(min-width: 16em)"     
      srcset="Images/image-320-C.jpg 320w,
      Images/image-780-C.jpg 780w, 
      Images/image-1024-C.jpg 1024w"/>
   <img src="Images/image-1024-C.jpg" alt="Le long du canal" />
</picture>

..../

</figure>
</div>
Bonjour,

Oui j'avais lu l'article ( 2 fois)
Mais si vous me dites ça, c'est que j'ai du passé à côté de quelque chose, je me pencherais à nouveau dessus demain.

Merci à vous, merci Bongota pour ton script et tes explications
Modifié par J_B (07 Nov 2019 - 20:08)
Sujet clos
Aller à