Valeur w de srcset, ou comment devenir fou ?

Bonjour.

Il y a déjà eu quelques demandes d’aide sur ce forum sur le fonctionnement abscons de srcset, mais il y a eu peu ou pas de réponse. Je tente donc ma chance, quelques mois après…

Tout d’abord, voici ma page Codepen de test :
http://codepen.io/Ogham/pen/qbGOqa

Elle est très basique ; pas de JS, une déclaration CSS pour la gestion des images adaptatives (max-width: 100%) et elle comporte 3 type de tests de srcset sur une balise <img> : test de résolution avec la valeur x, test de taille avec la valeur w et test des 2.

Et bien, je ne sais pas pour vous, mais moi j’ai bien du mal à comprendre comment cela fonctionne !

Si j’ouvre cette page aves des navigateurs officiellement complètement compatibles ->
- Safari 9.0.3 Mac :
- test 1 : OK, affiche la version 1x sur les écran normaux et la version 2x sur les écran HD
- test 2 : OK à 320px de large : affiche la bonne image à la bonne taille,
----------- KO à 480px de large : affiche la grande image (400px de large) en l’agrandissant à 480px (la largeur du viewport) -> ascenseur horizontal.
----------- KO à 1024px de large, idem au-dessus (l’image de 400 px est affichée à 1024 !)
- test 3 : KO, il ne s’en sort pas et me montre l’image de fallback (celle de src)
- Chrome 48 Mac :
idem Safari Mac
- Safari iOS 9.2.1 iPhone 6 :
- test 1 : OK
- test 2 : KO, grande image affichée à une taille trop grande (la largeur du viewport)
- test 3 : KO, fallback
- Safari iOS 8.3 iPhone 6+ :
- test 1 : OK
- test 2 : KO, petite image alors qu’il y a largement la place d’afficher la grande !
- test 3 : KO, fallback
- Android Browser Android 5 Galaxi S5 :
- test 1 : OK
- test 2 : KO, fallback !!!
- test 3 : KO, grande image affichée à une taille trop grande (la largeur du viewport)
- Chrome Android 5 Galaxi S5 :
- test 1 : OK
- test 2 : KO, grande image affichée à une taille trop grande (la largeur du viewport)
- test 3 : KO, fallback

Donc, si un grand manitou du srcset passe par-là et peu m’éclairer, grand merci à lui !
Modifié par Derwoed (29 Feb 2016 - 09:50)

A priori le sujet intéresse, mais n’attire pas les réponses… Est-ce à dire que l’attribut srcset n’est utilisé par personne aujourd’hui (tout du moins avec la valeur de w), pas même en test ?

Bonjur,

Ce n'est pas que le sujet manque d'intérêt car la propriété SRCSET semble vraiment très intéressante pour charger de manière efficace les images.

Toutefois il semble que selon l'unité choisie il puisse il y avoir différents effets négatifs qui dépendent entièrement de l'interprétation des navigateurs.

Difficile dans ces conditions de pouvoir évaluer la consistance d'un fallback ; les possibilités d'interprétation multipliant les demandes d'attention particulière.

Actuellement je n'ai pas trouvé beaucoup d'information au sujet des Srcset. Bien sûr, il y a l'article d'Alsa Images responsives et attribut Sizes aborde la question mais lève plus d'interrogatives qu'il n'en répond finalement.

D'ailleurs l'article d'Alsa renvoi vers le tutoriel Keeping Srcset ans sizes under control (Garder le contrôle sur les attributs Srcset et Sizes) qui semble plus complet mais dont mon niveau en anglais ne m'a pas encore permis de comprendre toutes les subtilités.

Perso, je devrait plancher sur la question d'ici 2 à 3 semaines. Si ça t'intéresse, Derwoed, je pourrais poster ici les résultats de mes tests - si tant est qu'ils soient pertinents.

Par contre je ne suis pas sûr d'utiliser les w comme unité de mesure.

En attendant bon courage sur ce chapitre épineux.

Greg_Lumiere a écrit :
Bonjur,

Ce n'est pas que le sujet manque d'intérêt car la propriété SRCSET semble vraiment très intéressante pour charger de manière efficace les images.

Toutefois il semble que selon l'unité choisie il puisse il y avoir différents effets négatifs qui dépendent entièrement de l'interprétation des navigateurs.

C’est effectivement ce que semble confirmer mes tests. Toutefois, j’ai besoin d’être rassuré sur le fait que les problèmes viennent bien des navigateurs et non de mon code.

a écrit :

Actuellement je n'ai pas trouvé beaucoup d'information au sujet des Srcset. Bien sûr, il y a l'article d'Alsa Images responsives et attribut Sizes aborde la question mais lève plus d'interrogatives qu'il n'en répond finalement.

C’est à partir de cet article et surtout d’un plus ancien Responsive Images – L'arrivée de srcset qui a l’avantage de ne s’appuyer que sur srcset et non sur sizes (que je pensais moins reconnu). Toutefois, dans l’article que tu as mentionné et que je n’avais encore que survolé, je viens de voir :
"*Petite mise à jour du 4 mai 2015 : l'attribut "sizes" est désormais obligatoire quand on utilise srcset et des descripteurs w"

Du coup, je pense que mon problème vient de là !
Je testerai ça dès que possible…

a écrit :
D'ailleurs l'article d'Alsa renvoi vers le tutoriel Keeping Srcset ans sizes under control (Garder le contrôle sur les attributs Srcset et Sizes) qui semble plus complet mais dont mon niveau en anglais ne m'a pas encore permis de comprendre toutes les subtilités.

Je vais le consulter aussi dès que possible…

a écrit :
En attendant bon courage sur ce chapitre épineux.

Merci et bon courage aussi à toi et à ceux qui se lanceront dans leur propres tests…

Derwoed a écrit :
J’ai ouvert un fil sur le forum (http://forum.alsacreations.com/topic-2-78139-1-Valeurwdesrcsetoucommentdevenirfou.html) avec une adresse CodePen de test, mais les réponses ne se bousculent pas. Si un "savant" passe par ici et peu faire un tout là-bas je lui en serrait très reconnaissant (ainsi que d’autres participant au forum sans doute…).

Je n'avais pas vu ce topic, ancien maintenant. Je l'ai trouvé à partir du sujet "Images responsive et attribut sizes, amstramgram, pic..."

@Derwoed : Je suis actuellement en plein dans cette problématique, si tu veux être de la partie : Srcset and sizes attributes

Oui, cela m’intéresse, mais j’ai un peu laissé tombé, faute de temps, pour l’instant. Je vais voir ton propre fil dès que j’ai le temps…