Tester la fonction srcset

Bonjour,

J'explique le problème. J'ai installé sur mon site la fonction srcset, afin de proposer des images de différentes dimensions. Afin de vérifier qu'elle est bien opérationnelle, je voudrais tester cette fonction srcset, mais depuis Firefox version desktop, c'est toujours l'image par défaut proposée par la balise de "secours" img src qui est chargée. Et ceci, quelque soit le redimensionnement que j'effectue sur le navigateur. Et j'en suis certain, j'ai vérifié les urls des images avec l'outil adéquat.

En un mot, je voudrais savoir si le redimensionnement du navigateur est détecté par le serveur distant comme un appareil réel ou simplement une astuce ? En effet, si le serveur détecte toujours mon écran desktop, même redimensionné, il est normal qu'il propose l'image qui lui correspond.

Un test sur un smartphone réel ne me dit pas si c'est la bonne image qui est chargée.

A tout hasard, le code en question :

<picture>   
      <source srcset="Images/Canal-1024-C.jpg 1024w" media="(min-width: 1024px)" sizes="1024px">
      <source srcset="Images/Canal-780-C.jpg 780w"  media="(min-width: 767px)" sizes="100vw">   
      <source srcset="Images/Canal-320-C.jpg 320w" media="(min-width: 320px)" sizes="320px">
      
      <source srcset="cropped-Images/Canal-1024-C.jpg 2x,
         cropped-Images/Canal-1024-C.jpg 1x" />
	<img class="image.fit" src="Images/Canal-1024-C.jpg" title="Le long du canal" sizes="100vw" alt="Le long du canal"> 
   
</picture>

Merci pour les réponses.
Modifié par Bongota (08 Nov 2017 - 10:47)

Hello Bongota,

Le redimensionnement se fait côté client et non serveur : c'est le navigateur qui va lancer la requête en fonction des conditions que tu as donné dans l'élément source via - par exemple - les attributs media.
Même si ton code pourrait être optimisé, il devrait théoriquement marcher (testé en local). Qu'elle est ta version de Firefox ? Dans l'outil de dev, onglet Réseau, est-ce que les requêtes sont lancées ?

Bonjour,
j'ai testé avec l'outil de développement de firefox.

En résolution smartphone 320x480 sur Firefox (en réalité iceweasel firefox ESR 45.5.0 sous debian) j'ai bien un 200 GET sur toutes les images en 320 px, ce qui est normal et indique une reconnaissance du code. Mais j'ai aussi un 200 GET sur les images de secours 2014... Sans surprise, le temps de chargement n'est pas le même en 320 et 1024. Sur le premier, c'est entre 196 et 311 ms et sur le second c'est entre 579 et 762 ms. Je ne comprends pas pourquoi dans cette résolution, l'image en 1024 est aussi téléchargée.
Par contre, en résolution 767x600, je n'ai que l'image en 1024 qui est téléchargée, alors que mon code demande celle en 780 px.
Il y a du mélange, sans doute dans les chiffres de mon code, parce qu'en résolution 800x1280, j'ai cette fois l'image en 780 chargée, mais toujours celle en 1024.
Enfin, en résolution 1024x768, je n'ai que la 1024 qui arrive.

Je dois reprendre tout. Si quelqu'un avait la solution toute cuite, je serais preneur

Bonjour,

j'ai repris le fichier srcset original, celui qui était sur le site. Il avait aussi des défauts, mais différents de celui que j'ai listé plus haut. J'ai retravaillé dessus et je me suis souvenu d'une petite phrase, lancée je ne sais sur quel forum ni par je ne sais qui. En tous cas, l'auteur parlait d'une possible influence de l'ordre des valeurs données à srcset. En un mot, il était question d'inverser cet ordre, de partir de la plus petite résolution jusqu'à la plus grande. Et ça fonctionne !!! Voici, tronqué, ce nouveau srcset, tel qu'il est sur le site. Une virgule en moins et c'est une résolution qui ne passe pas.

<div id="slider">
<figure>
		<picture>
   <source media="(min-width: 16em)"
      srcset="Images/Canal-320-C.jpg 320w,
      Images/Canal-780-C.jpg 780w, 
      Images/Canal-1024-C.jpg 1024w,
      sizes="33.3vw" />
   <source srcset="cropped-Images/Canal-1024-C.jpg 2x,
         cropped-Images/Canal-1024-C.jpg 1024w 1x" />
   <img src="Images/Canal-1024-C.jpg 1024w" alt="Le long du canal" />
</picture>

Ci-dessous, le lien vers une des trois pages concernées. Les autres sont identiques.
http://mamoutou-kone.fr/Montage.html

En cliquant sur l'image de la page, on arrive sur le slider. On peut, avec l'outil de développement "réseau", vérifier que les images sont bien téléchargées en fonction de la résolution de l'écran. Voili voilà, ceci n'empêche pas d'améliorer ce srcset, notamment de prendre en compte les écrans retina. Reste aussi le fait que quand je bascule un smartphone de portrait à paysage, l'image fournie passe à la valeur plus haute. Ceci semble logique, la valeur prise en compte étant la largeur de l'écran. Il ne me restera plus qu'à installer une image de très haute résolution pour les très grands écrans.
Modifié par Bongota (09 Nov 2017 - 10:53)