Charger des images de taille différentes selon la largeur de l'écran

Bonsoir

Une fois n’est pas coutume, j’ai des soucis de mise en page, et là, c’est l’histoire d’optimiser le chargement d’images en fonction de la "largeur d’écran" détectée.

Pour l’instant, je m’amuse avec des données de Random User Api, qui fournit gracieusement trois tailles d’image pour un utilisateur généré. Ce que j’aimerais, c’est réussir à comprendre et faire en sorte que la plus petite image se charge pour les petits écrans (moins de 576 pixels).

J’ai donc mis en place la balise suivante.

<img
	srcset="https://randomuser.me/api/portraits/thumb/men/30.jpg 48w,
		https://randomuser.me/api/portraits/med/men/30.jpg 72w,
		https://randomuser.me/api/portraits/men/30.jpg 128w"
	sizes=" (max-size: 575px) 48px,
		(max-size: 767px) 72px,
		128px"
	src="https://randomuser.me/api/portraits/thumb/men/30.jpg"
	alt="Pwet pwet"
/>

De ce que je crois avoir finalement compris, c’est que dans srcset, on spécifie les images et leurs tailles respectives (pas en pixels pour les histoires de densité). Jusque là, ça me paraît OK.

Par contre, je dois avoir compris partiellement, ou mal, ou même totalement à l’envers ce que je dois mettre dans sizes, vu que c’est apparemment toujours la plus grande image qui semble se charger. Avec l’exemple que j’ai mis, je m’attendais à ce que l’image chargée pour un très petit écran soit celle qui est de 48 pixels.

Quelqu’un pourrait relever mon erreur ?

Merci beaucoup

Si tu test cette page (référencé par la doc MDN: https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html ) est-ce que ça fonctionne comme attendu ?

D’après cette doc: https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Mais je ne vois pas de différence notable avec ton code. En dehors du fait qu’ils mettent l’image la plus grande par défaut.

Oui, je découvre d’ailleurs qu’au survol de l’image dans l’inspecteur de DOM, il est fournit la taille de l’image chargée. Edge Chromium ne semble pas s’en sortir avec la seule balise <img />, Firefox m’affiche comme quoi ce serait l’image correcte qui est chargée, et c’est avec lui que j’ai fait la plupart des tests.

L’image par défaut n’est apparemment pas prise en compte dans ce que je fais, étant donné que c’est toujours la plus grande qui est prise et que par défaut j’ai demandé la plus petite.

Pour information, j’utilise le simulateur de taille des navigateurs, mais je force le rafraichissement après avoir changé la taille. J’imagine que pour des raisons d’économie, certains navigateurs ne rechargent pas de nouvelles ressources dans ce cas.

Pour information, j’utilise le simulateur de taille des navigateurs, mais je force le rafraichissement après avoir changé la taille. J’imagine que pour des raisons d’économie, ceertains navigateurs ne rechargent pas de nouvelles ressources dans ce cas.

Pense à bien faire un Ctrl+F5, ça devrait (normalement) recharger toutes les ressources

Alors le truc, c’est que je l’ai fait dès que je me suis rendu compte qu’un redimensionnement de viewport ne lançait pas de rechargement, et cela ne semble pas changer ce que j’espérais.