Élément picture HTML

Un seul img suffit pour beaucoup de pages. Quand vous avez besoin de fichiers différents selon l’écran ou le format — un cadrage large sur ordinateur, un cadrage plus serré sur téléphone, ou un format moderne avec un secours JPEG — l’élément picture propose des candidats. Le navigateur en choisit un ; votre img de secours couvre les clients plus anciens et l’accessibilité.

Ce qu’apporte picture

picture est un conteneur. À l’intérieur, vous placez zéro ou plusieurs éléments source et exactement un img de secours. Chaque source peut indiquer quand il s’applique (media) ou quel format il représente (type), et où se trouve le fichier (srcset). Le img n’est pas une décoration optionnelle : c’est le secours obligatoire et l’endroit pour alt.

Réponse directe

Enveloppez un ou plusieurs éléments <source> et un <img> de secours dans <picture>. Utilisez media pour les conditions de viewport et type pour les formats comme WebP. Le img a toujours besoin de src et alt. Les débutants peuvent commencer avec deux largeurs de la même photo avant de rassembler tous les formats modernes.

Direction artistique avec media

La direction artistique signifie des cadrages ou des mises en page différents selon les viewports — pas seulement « la même photo plus petite ». media sur source vous permet d’envoyer les mises en page larges et étroites vers des fichiers différents.

Lire l’exemple media

• Les source sont souvent listés des conditions plus précises vers les plus larges dans les modèles d’enseignement courants ; le navigateur évalue tout de même et choisit une correspondance
• srcset sur source pointe vers l’URL du fichier candidat
• Le img final fournit src et alt quand aucune source ne correspond ou quand le support de picture est incomplet
• Redimensionnez la fenêtre en pratique pour voir quel fichier convient — utilisez le réseau des outils de développement si vous voulez confirmer la requête

Choix de format avec type

Parfois la même composition est livrée en WebP pour les navigateurs qui le supportent et en JPEG pour les autres. type indique au navigateur le type MIME afin qu’il puisse ignorer les formats non pris en charge sans les télécharger d’abord.

Garder le périmètre du premier jour petit

Vous n’avez pas besoin de tous les formats et de tous les points de rupture dès le premier essai. Faites fonctionner un picture avec deux candidats sensés, gardez un alt honnête sur le img, puis élargissez. Les descripteurs de densité srcset responsives et les attributs sizes avancés viennent plus tard, au fur et à mesure.

alt reste sur img

Ne mettez pas le texte d’accessibilité uniquement sur source. Les lecteurs d’écran et le rendu de secours s’appuient sur le img. Les règles décoratives de la session Images s’appliquent encore : les images informatives ont besoin d’un vrai alt ; la pure décoration peut utiliser alt="".

picture contre un seul img

Utilisez un img simple quand un seul fichier suffit. Passez à picture quand vous avez vraiment besoin de fichiers différents selon des conditions — direction artistique de viewport ou bascule de format. Du balisage en trop sans vrai besoin complique seulement la maintenance.

Ordre et habitudes de secours

Listez les éléments source avant le img. Incluez toujours le img. Si vous oubliez le secours, certains navigateurs et de nombreux outils pédagogiques traiteront le schéma comme incomplet. Testez avec une fenêtre étroite et une fenêtre large, et avec un navigateur qui pourrait ne pas préférer votre format sophistiqué.

Pratiquer dans votre éditeur

1. Préparez deux largeurs d’image de la même photo (ou deux fichiers d’entraînement clairs).
2. Construisez un picture avec deux media queries source et un img de secours.
3. Redimensionnez la fenêtre du navigateur et observez quel fichier convient.
4. Confirmez que alt reste sur le img, pas seulement dans un commentaire.
5. Ajoutez éventuellement un source WebP avec type="image/webp" au-dessus d’un img JPEG et confirmez que le schéma affiche encore une image partout.

Erreurs fréquentes

• Oublier le img de secours
• Mettre alt seulement sur source au lieu du img
• Compliquer avec trop de formats avant que le schéma media de base fonctionne
• Utiliser picture quand un seul img optimisé aurait suffi
• Des cadrages mal assortis qui surprennent les utilisateurs quand le viewport croise un point de rupture
• Confondre srcset sur source avec le href d’un lien

Résumé

• picture propose plusieurs candidats d’image ; le navigateur en choisit un
• Utilisez source plus un img de secours obligatoire
• media guide le choix selon le viewport ; type guide le choix de format
• alt reste sur le img
• Commencez simple : deux largeurs ou un format moderne plus un secours JPEG