11521 sujets

JavaScript, DOM et API Web HTML5

Srcset

Bonjour'

J'ai définit une image avec srcset, afin qu'il charge une image plus petite sur mobile.
<img itemprop="logo" src="/img/logo-8.jpg" srcset="/img/logo-8_320.jpg 320w,				/img/logo-8_640.jpg 640w," />


mais je suis supris. sur chrome et FF ils me charge deux images?
la standard définit par src et celle srcset?
ou est mon erreur?
Administrateur
Bonjour,

Difficile de deviner, mais il est possible que ce soit parce que tu as une erreur dans la chaîne. Il y a une virgule en trop à la fin ("640w,").
Je te remercie.

Le problème ne semble pas venir de la virgule.
Sinon on est d'accord avec une fenetre de 320 il ne devrait charger que l'image /img/logo-8_320.jpg ?
Mais pas d'abord la standard puis le réduite?
gotcha5832 a écrit :
Sinon on est d'accord avec une fenêtre de 320 il ne devrait charger que l'image /img/logo-8_320.jpg ? Mais pas d'abord la standard puis le réduite?

Ce n'est pas exactement cela : "320w" ne correspond pas à une taille de fenêtre de 320px, il donne au navigateur un indice sur le "poids" de l'image. Et chaque navigateur l’interprète comme il le veut...

Pour cette raison j'utilise les attributs srcset avec l'attribut media : Picture tag, srcset and sizes attributes
Administrateur
gotcha5832 a écrit :

Sinon on est d'accord avec une fenetre de 320 il ne devrait charger que l'image /img/logo-8_320.jpg ?
Mais pas d'abord la standard puis le réduite?

C'est effectivement un peu plus compliqué que cela.

Déjà, ça dépend de ta façon de tester. Le descripteur "w" correspond à la taille de l'image, et c'est au navigateur de définir ce qui lui convient le mieux par rapport à son viewport.

- Si tu testes dans Chrome ou Firefox en redimensionnant simplement ta fenêtre, alors le navigateur va continuer à se comporter en navigateur desktop et se baser sur la taille de ton écran. Les tests seront faussés quoi qu'il arrive.
- Si tu testes avec l'inspecteur d'élément Chrome en mode "device", ou bien en mode responsive sur Firefox (ctrl+maj+m), alors le browser émule un navigateur mobile et les tests seront plus fiables.

Ensuite c'est au navigateur de choisir. Par exemple un viewport de 320px sur un navigateur "retina"(pixel-ratio de 2) choisira l'image de taille 640px, par exemple.
Sujet clos
Aller à