Discussion :

[Esther Brulard]

Bonjour, je m'intéresse à l'optimisation des images pour les écrans hautes résolutions, j'ai donc rajouté une ligne de code à leur destination dans un <source> au sein de la balise <picture>. J'ai vérifié le fonctionnement de mon optimisation image pour le reste des <source>. Je n'ai pas d'écran rétina ou HiDPI pour vérifier la dernière balise en 2x, et c'est la première fois que j'utilise ce code dans un de mes sites. Pouvez vous me dire si syntaxiquement c'est correct ou si je m'y prend mal?

[darkstar123456]

Bonjour,

Je n'ai pas de rétina pour vérifier (et c'est bien le problème de l'utilisation du 2x)
Je pense que le mieux est plutôt d'utiliser les indices de tailles qui sont plus souples à utiliser et qui fonctionnent partout alors que les indices de densité ne fonctionnent que pour la densité.

C'est aussi plus facile à lire & à écrire.

NB : Préférez un copier/coller et l'utilisation des balises [ CODE] [/ CODE] plutôt que des captures d'écran.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<img src="img/musician-min.jpg" alt=""
     srcset="img/musician-285w-min.jpg 285w,
             img/musician-360w-min.jpg 360w,
             img/musician-840w-min.jpg 840w" />

Pour votre 2x, pourquoi avoir mis un max-width ?? Ca veut dire qu'en densité 2.0 et sur une résolution de 600px c'est une image plus petite (360w) qui va se charger

[Esther Brulard]

Est ce que celà veut dire que sans préciser que l'image en 840 est destinée aux hautes résolutions, le navigateur sur un appareil équipé rétina par exemple va forcément choisir la grande image?
Pour les srcset j'ai préféré picture, parce que j'ai remarqué en testant img srcset en local que ma ressource en 360 n'était pas utilisée à l'un des breakpoint choisi et spécifié, seulement celle par défaut, sans doute le navigateur qui n'a pas voulu faire comme indiqué dans les media queries. Du coup j'ai essayé de lui forcer la main, ça marche avec les balises picture. Est ce un tort?

[darkstar123456]

Un écran en 420px & densité 2x retournera bel et bien 840px pour l'utilisation du srcset

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<img src="mon-image.jpg"
     srcset="mon-image-320.jpg 320w,
             mon-image-640.jpg 640w"
      sizes="100vw"
      alt="">

Dans cet exemple, nous indiquons au navigateur que l'image devra au final occuper toute la surface. Son choix risque d'être celui-ci :

• un iPhone 3 dont la taille est de 320px chargera mon-image-320.jpg
• un iPhone 4 dont la taille est de 320px mais où la densité de pixels est de 2 chargera mon-image-640.jpg

[Esther Brulard]

Oh super, merci pour cette explication.

[YoanneJoschua]

bonjour

Merci beaucoup pour votre explication, ca m'a beaucoup aidé!! Encore merci