0Pricing
HTML Academy · Leçon

L’élément picture pour la direction artistique

Remplacez des images entières selon les conditions de la fenêtre d’affichage.

L’élément picture pour la direction artistique est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Problème de direction artistique

La direction artistique désigne le fait de proposer un crop ou une composition d’image fondamentalement différents selon la taille de l’écran :

  • Photo de paysage complète sur ordinateur
  • crop de portrait agrandi sur mobile
  • Cela ne peut pas être résolu par srcset + sizes seuls

L’élément picture

L’élément <picture> entoure plusieurs source elements et une solution de repli <img> :

<picture>
  <source media="(min-width: 800px)" srcset="wide-crop.jpg">
  <source media="(min-width: 500px)" srcset="medium-crop.jpg">
  <img src="narrow-crop.jpg" alt="Team photo">
</picture>
<!-- Browser picks the first matching source -->
<!-- img is required as fallback and carries the alt attribute -->

Fonctionnement de picture

Le navigateur évalue les source elements dans l’ordre, de haut en bas :

  1. Vérifier la condition media de la première source — si elle correspond, utiliser cette image
  2. Vérifier la deuxième source — si elle correspond, l’utiliser
  3. Utiliser finalement <img> par défaut

L’élément <img> affiche toujours l’image choisie et porte le texte alt.

Changement de format with picture

<picture> peut également sélectionner des formats d’image selon la prise en charge du navigateur :

<picture>
  <!-- AVIF: best compression, newest support -->
  <source type="image/avif" srcset="photo.avif">
  <!-- WebP: great compression, wide support -->
  <source type="image/webp" srcset="photo.webp">
  <!-- JPEG: universal fallback -->
  <img src="photo.jpg" alt="Mountain photo">
</picture>
<!-- Browser picks the first format it supports -->

Combinaison de la direction artistique et du format

Vous pouvez combiner les conditions de média et la sélection de format :

<picture>
  <source
    media="(min-width: 800px)"
    type="image/webp"
    srcset="hero-wide.webp"
  >
  <source
    media="(min-width: 800px)"
    srcset="hero-wide.jpg"
  >
  <source type="image/webp" srcset="hero-mobile.webp">
  <img src="hero-mobile.jpg" alt="Hero image" width="1200" height="600">
</picture>

L’élément img est obligatoire

L’élément <img> inside <picture> n’est pas facultatif :

  • Il affiche l’image sélectionnée
  • Il porte le texte alt pour l’accessibilité
  • Il porte les attributs width, height, loading et d’autres attributs
  • Sans lui, rien ne s’affiche

Attribut media de source

L’attribut media accepte les requêtes média CSS standard :

<picture>
  <source media="(orientation: landscape)" srcset="landscape.jpg">
  <source media="(orientation: portrait)" srcset="portrait.jpg">
  <img src="portrait.jpg" alt="Scene">
</picture>

<!-- Other media features work too: -->
<!-- (prefers-color-scheme: dark) -->
<!-- (min-resolution: 2dppx) -->
<!-- (max-width: 600px) -->

source srcset with sélection adaptative

Combinez la direction artistique with srcset pour un contrôle complet :

<picture>
  <!-- Desktop: wide hero, multiple resolutions -->
  <source
    media="(min-width: 1024px)"
    srcset="hero-1024.jpg 1024w, hero-2048.jpg 2048w"
    sizes="100vw"
  >
  <!-- Mobile: portrait crop -->
  <img
    srcset="hero-mobile-400.jpg 400w, hero-mobile-800.jpg 800w"
    sizes="100vw"
    src="hero-mobile-400.jpg"
    alt="Conference keynote speaker on stage"
  >
</picture>

Images en mode sombre

Proposez des images différentes aux utilisateurs du mode sombre :

<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="logo-dark.svg"
  >
  <img src="logo-light.svg" alt="Company logo" width="120" height="40">
</picture>
<!-- Users with dark mode OS setting see logo-dark.svg -->
<!-- Everyone else sees logo-light.svg -->

picture ou CSS background-image

Quand utiliser <picture> ou des arrière-plans CSS :

  • Images de contenu — utilisez <picture> : elles nécessitent un texte alt et font partie du contenu du document
  • Images décoratives — utilisez CSS background-image avec des requêtes média
  • Images importantes pour le référencement — utilisez toujours <picture> : les robots d’indexation analysent les éléments img

Remarque sur l’accessibilité

L’attribut alt appartient toujours à <img>, et non à <source> :

<picture>
  <source srcset="photo.webp" type="image/webp">
  <!-- alt goes on img, not source: -->
  <img src="photo.jpg" alt="Sunset over the Pacific Ocean">
</picture>
<!-- screen readers read img's alt, whichever source was selected -->

Chargement différé with picture

Ajoutez le chargement différé à <img> inside <picture> :

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img
    src="photo.jpg"
    alt="Gallery photo"
    loading="lazy"
    width="800"
    height="600"
  >
</picture>

Vérification rapide

Quel élément d’un bloc picture doit toujours être présent et porte l’attribut alt ?

Récapitulatif : élément picture

Direction artistique avec picture :

  • <picture> entoure des éléments <source> et un <img>
  • Le navigateur choisit le premier <source> correspondant
  • Utilisez media pour les conditions liées à la fenêtre d’affichage et type pour la sélection du format
  • <img> est obligatoire — il affiche l’image et porte le texte alt
  • Combinez with srcset + sizes pour un contrôle adaptatif complet

Questions Fréquemment Posées

La leçon « L’élément picture pour la direction artistique » est-elle gratuite ?

Oui — le texte complet de « L’élément picture pour la direction artistique » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « L’élément picture pour la direction artistique » ?

Remplacez des images entières selon les conditions de la fenêtre d’affichage. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « L’élément picture pour la direction artistique » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. L’élément img : src, alt, width et height
  2. Images adaptatives avec srcset et sizes
  3. L’élément picture pour la direction artistique
  4. figure et figcaption
← Retour à HTML Academy