HTML : structurer le Web (école d'ingénieur) · Chapitre 4 · Exercice de TD
Format moderne avec repli
Images et médias · niveau 2
Énoncé
Écrire le code qui propose la photo de la vitrine en AVIF, puis en WebP, avec un repli en JPEG pour les navigateurs anciens. Dans quel ordre placer les sources, et pourquoi ?
Corrigé
<picture>
<source type="image/avif" srcset="images/vitrine-large.avif">
<source type="image/webp" srcset="images/vitrine-large.webp">
<img src="images/vitrine-large.jpg"
alt="Vitrine de la librairie, piles de livres de la rentrée"
width="1200" height="500">
</picture>Le navigateur retient la première source qu'il sait lire : on place donc la plus légère (AVIF) en premier, puis WebP ; le JPEG de l'<img> sert aux navigateurs qui ne lisent ni l'un ni l'autre.
100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.