Quelle image ? — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 9)

Quelle image ?

Responsive design · niveau 2

Énoncé

Une image est déclarée ainsi :


<img src="couv-600.jpg"
     srcset="couv-300.jpg 300w, couv-600.jpg 600w, couv-1200.jpg 1200w"
     sizes="(width >= 64rem) 25vw, (width >= 40rem) 50vw, 100vw"
     alt="Couverture de L’Étranger" width="600" height="800">

Quelle largeur l'image occupe-t-elle, et quel fichier le navigateur choisit-il :

sur un téléphone de 360 pixels CSS, de ratio 3 ;
sur une tablette de 768 pixels, de ratio 2 ;
sur un écran de 1280 pixels, de ratio 1 ;
sur un écran de 1920 pixels, de ratio 2 ?

Corrigé

Seuils : $40 rem = 640$ , $64 rem = 1024$ pixels.

360 pixels : aucune condition vraie, l'image occupe 100vw, 360 pixels ; besoin $360 \times 3 = 1080$ : couv-1200.jpg.
768 pixels : 50vw, 384 pixels ; besoin 768 : couv-1200.jpg (le fichier de 600 pixels ne suffit pas).
1280 pixels : 25vw, 320 pixels ; besoin 320 : couv-600.jpg.
1920 pixels : 25vw, 480 pixels ; besoin 960 : couv-1200.jpg.

La page code/ch9/exercices/quelle-image.html, simulée dans Chromium à ces quatre tailles et ratios, charge bien ces quatre fichiers. L'ordre de sizes compte : la première condition vraie l'emporte, d'où les seuils écrits du plus grand au plus petit. Les navigateurs peuvent choisir un fichier plus petit en cas de connexion lente, ou garder un fichier plus grand déjà en cache : srcset est une proposition, pas un ordre.