Utilisez picture pour basculer entre des fichiers image carrés et larges à un point de rupture de la fenêtre d’affichage. Attribuez à chaque source ses propres dimensions et laissez le CSS redimensionner proportionnellement l’image sélectionnée. Ce guide crée et teste un exemple local sur Mac.

Comment picture bascule-t-il entre différents rapports d’aspect ?

Placez un élément source avec une condition media avant l’élément de repli img à l’intérieur de picture. Le navigateur sélectionne la première source admissible dont la condition correspond, puis choisit une image dans son srcset. C’est ce qu’on appelle la direction artistique : proposer différentes compositions pour différentes mises en page. Le standard HTML prend explicitement en charge cette approche. Standard HTML : Images

Trois éléments fonctionnent ensemble : la source choisit la ressource, les attributs de dimension décrivent les proportions de cette ressource et le CSS contrôle sa taille affichée. Les attributs width et height de la source sélectionnée peuvent fournir le rapport d’aspect utilisé par l’image qu’elle contient. L’élément picture lui-même n’affiche pas l’image ; c’est son img qui le fait. Standard HTML : Contenu intégré

Choisissez le mécanisme selon le résultat recherché :

Besoin Mécanisme approprié
Modifier la composition ou le rapport d’aspect à un point de rupture picture avec un source utilisant media
Proposer différentes résolutions pour une même composition srcset, avec sizes pour les descripteurs de largeur
Conserver un seul fichier, mais le recadrer dans un cadre fixe Dimensionnement CSS et object-fit: cover

Ces mécanismes répondent à des choix différents. La direction artistique détermine quelle composition apparaît. Le choix de résolution permet au navigateur de sélectionner un candidat approprié au sein d’une composition. L’ajustement CSS détermine comment la ressource sélectionnée occupe son cadre. MDN décrit ces usages de picture et son lien avec srcset et les propriétés d’ajustement. MDN : L’élément picture

Créer un exemple local complet sur votre Mac

L’exemple utilise deux ressources SVG originales contenant un cercle orange et un rectangle arrondi turquoise. La version carrée les empile ; la version large les place côte à côte. Tous les fichiers se trouvent dans un seul dossier, sans ressources externes ni JavaScript pour le basculement.

Le contrat des ressources est simple : sous une largeur de fenêtre d’affichage de 700px, utiliser une ressource carrée de 600 × 600. À partir de 700px, utiliser une ressource large de 1200 × 600. L’image affichée remplit une zone de contenu avec 16px de marge de chaque côté, jusqu’à une largeur maximale de 960px. Ces dimensions et ce point de rupture sont des choix de conception donnés à titre d’exemple.

Enregistrer les deux ressources de formes

Créez un dossier nommé picture-demo. À l’aide d’un éditeur de code en texte brut, créez-y les deux fichiers suivants en conservant exactement leurs noms et extensions. Chaque bloc de code contient le fichier complet ; copiez son contenu sans les délimiteurs Markdown.

Enregistrez ceci sous shapes-square.svg :

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600">
  <rect width="600" height="600" fill="#fff5df"/>
  <circle cx="300" cy="180" r="100" fill="#de7b35"/>
  <rect x="150" y="340" width="300" height="160" rx="40" fill="#247d83"/>
</svg>

Enregistrez ceci sous shapes-wide.svg :

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600">
  <rect width="1200" height="600" fill="#fff5df"/>
  <circle cx="320" cy="300" r="180" fill="#de7b35"/>
  <rect x="650" y="150" width="400" height="300" rx="60" fill="#247d83"/>
</svg>

Enregistrer la page HTML

Créez index.html dans le même dossier. Si vous utilisez TextEdit, choisissez Fichier > Nouveau, puis Format > Convertir au format texte avant de coller le code. Enregistrez le fichier avec l’extension .html et choisissez Utiliser .html si vous y êtes invité. Apple décrit cette procédure pour créer des fichiers HTML. Apple : Utiliser des documents HTML dans TextEdit sur Mac

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape study</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    main { width: calc(100% - 32px); max-width: 960px; margin: 24px auto; }
    picture { display: block; }
    .study-image { display: block; width: 100%; height: auto; }
  </style>
</head>
<body>
  <main>
    <h1>Shape study</h1>
    <picture>
      <source media="(min-width: 700px)" srcset="shapes-wide.svg"
              width="1200" height="600">
      <img class="study-image" src="shapes-square.svg"
           width="600" height="600"
           alt="An orange circle and a teal rounded rectangle on cream.">
    </picture>
    <p>Resize the viewport to compare the two arrangements.</p>
  </main>
</body>
</html>

Ouvrez index.html dans Safari. Avec une fenêtre d’affichage suffisamment large, les formes devraient apparaître côte à côte. Dans une fenêtre plus étroite, elles devraient s’empiler. Gardez les trois fichiers ensemble : les URL relatives des ressources sont résolues à partir de l’emplacement du fichier HTML.

La source large utilise srcset, même si elle ne contient qu’une seule URL. Dans picture, source exige srcset ; son attribut src n’est pas autorisé. Les attributs de dimension sont des entiers sans unité : utilisez donc width="1200", et non width="1200px". MDN : L’élément source

Pourquoi déclarer les dimensions de la source et de l’image de repli ?

Les dimensions 600 × 600 de l’image de repli décrivent la ressource carrée. Les dimensions 1200 × 600 de la source large décrivent la ressource large. Fournir les deux paires permet à un navigateur compatible d’établir les proportions de l’image sélectionnée avant son téléchargement. Réutiliser les dimensions carrées pour la source large donnerait un rapport initial incorrect. Standard HTML : Attributs de dimension des sources

Le CSS définit ensuite la largeur de l’image selon celle de la zone de contenu disponible, tout en laissant la hauteur automatique. Cette dimension automatique permet aux proportions de l’image de déterminer sa hauteur. Le brouillon sur le dimensionnement des boîtes CSS décrit le rôle du rapport d’aspect privilégié dans le dimensionnement automatique ; fixer explicitement les deux dimensions supprime cette flexibilité. Module CSS Box Sizing niveau 4

Pour cet exemple, on peut vérifier la mise en page avec un petit calcul :

largeur de l’image = min(largeur de la fenêtre - 32, 960)
hauteur carrée = largeur de l’image
hauteur large = largeur de l’image / 2
Largeur de la fenêtre en pixels CSS Ressource sélectionnée Taille calculée de l’image
500 shapes-square.svg 468 × 468
699 shapes-square.svg 667 × 667
700 shapes-wide.svg 668 × 334
1000 shapes-wide.svg 960 × 480

Ces valeurs sont des résultats calculés pour le CSS fourni, en supposant qu’aucune largeur de barre de défilement ne réduise la zone de contenu disponible. La syntaxe SVG, les noms des ressources, les dimensions déclarées et les calculs ont été vérifiés par programmation ; l’exemple n’a pas été affiché dans un navigateur pendant sa préparation.

Remarquez la grande variation de hauteur entre 699px et 700px. Elle découle directement du passage d’une composition carrée à une composition large. C’est normal pendant le redimensionnement. Si un second saut survient après le chargement alors que la fenêtre conserve la même taille, vérifiez les dimensions déclarées et la présence éventuelle de règles CSS qui les remplacent.

Tester précisément le point de rupture dans Safari

Le mode de conception adaptative de Safari permet de redimensionner la fenêtre d’affichage de la page indépendamment de celle du bureau. Dans les réglages Avancé de Safari, activez Afficher les fonctionnalités pour les développeurs web. Ouvrez l’exemple, puis choisissez Développement > Entrer en mode de conception adaptative, ou appuyez sur Contrôle-Commande-R. WebKit documente le réglage, le raccourci et l’aperçu redimensionnable. WebKit : Mode de conception adaptative simplifié

Testez d’abord 699px et 700px, puis une fenêtre nettement étroite et une autre nettement large. Vérifiez que la composition change à la limite prévue, que la forme orange reste circulaire et que le paragraphe sous l’image suit les variations de hauteur de celle-ci. Rechargez de chaque côté du point de rupture pour vérifier la mise en page initiale ainsi que le redimensionnement.

Pour vérifier directement quel fichier Safari a sélectionné, exécutez cet extrait de diagnostic facultatif dans la console de l’inspecteur Web tout en affichant l’exemple :

const studyImage = document.querySelector('.study-image');
if (!studyImage) {
  throw new Error('Open the Shape study example before running this snippet.');
}
const studyBox = studyImage.getBoundingClientRect();
console.table({
  selectedURL: studyImage.currentSrc,
  displayedWidth: studyBox.width,
  displayedHeight: studyBox.height
});

Exécutez à nouveau l’extrait après avoir franchi le point de rupture. L’URL sélectionnée devrait se terminer par le nom de fichier carré ou large correspondant. La propriété currentSrc indique l’URL choisie par le navigateur ; sa valeur seule ne prouve pas que la ressource s’est chargée correctement. MDN : Propriété currentSrc de HTMLImageElement

Que vérifier si le changement ne fonctionne pas comme prévu ?

Vérifiez dans cet ordre la sélection, les dimensions de la ressource et la présentation. Cela évite de confondre un problème de dimensionnement CSS avec un problème de sélection de ressource.

  1. Le fichier carré reste sélectionné lorsque la fenêtre est large. Vérifiez que la fenêtre atteint 700px, que source précède img et que la source utilise srcset. S’il y a plusieurs sources, vérifiez leur ordre : une source antérieure dont la condition correspond peut être prioritaire. Standard HTML : Sélection de direction artistique
  2. Une ressource ne s’affiche pas. Comparez les noms de fichier dans le balisage avec ceux des fichiers du dossier, extensions comprises. Pour cet exemple, les deux fichiers SVG doivent se trouver à côté de index.html.
  3. La bonne ressource apparaît avec une forme incorrecte. Examinez le CSS appliqué à l’élément img lui-même, en particulier les règles qui définissent une hauteur fixe. Rétablissez height: auto pour un dimensionnement proportionnel.
  4. L’image saute après son chargement. Comparez chaque paire de dimensions déclarées au rapport réel de la ressource correspondante. Vérifiez aussi si une propriété CSS explicite aspect-ratio remplace les proportions prévues.

Si votre conception exige réellement un cadre fixe, choisissez délibérément le comportement d’ajustement. object-fit: contain conserve la ressource entière et peut laisser de l’espace vide ; cover remplit le cadre et peut rogner le contenu ; fill peut l’étirer. Appliquez les propriétés d’ajustement à img. L’exemple fourni n’a pas besoin de cadre fixe, car sa mise en page suit les proportions de la ressource sélectionnée. MDN : object-fit

Quelles sont les limites de compatibilité des navigateurs ?

La prise en charge de picture et celle des dimensions propres à chaque source sont deux considérations distinctes. Le récapitulatif de compatibilité du standard HTML répertorie picture dans les moteurs de navigateur actuels. MDN indique que la propriété source width, qui reflète son attribut de dimension, est disponible dans tous les navigateurs depuis décembre 2022. Il ne faut pas supposer que les anciens navigateurs réservent correctement l’espace selon les dimensions propres à chaque source. Standard HTML : L’élément picture, MDN : Propriété width de HTMLSourceElement

Lorsqu’aucune source ne correspond, ou si le navigateur ne prend pas en charge picture, l’image de repli img fournit l’image. Dans cet exemple, il s’agit de la composition carrée. Un navigateur capable de changer de ressource, mais qui ne prend pas en charge les dimensions propres aux sources, peut n’établir les proportions finales de l’image large qu’après son chargement. MDN : L’élément picture

Pour un navigateur cible qui prend en charge le CSS aspect-ratio, mais nécessite une règle de dimensionnement explicite, ajoutez le fragment CSS suivant à la feuille de style existante. Il reprend le point de rupture HTML et fournit des rapports d’aspect provisoires, tout en permettant au rapport naturel de l’image chargée de prendre le relais :

.study-image {
  aspect-ratio: auto 1 / 1;
}

@media (min-width: 700px) {
  .study-image {
    aspect-ratio: auto 2 / 1;
  }
}

MDN documente cette combinaison de auto et d’un rapport d’aspect, et indique que le CSS aspect-ratio est disponible dans tous les navigateurs depuis septembre 2021. Ce fragment a donc sa propre limite de compatibilité. Gardez son point de rupture synchronisé avec la condition de la source et testez les versions des navigateurs dont vous devez réellement tenir compte. MDN : aspect-ratio

Une fois que l’exemple fonctionne correctement, remplacez les fichiers synthétiques par vos propres compositions et mettez à jour leurs dimensions en même temps. Veillez à ce que la condition de la source, les proportions de la ressource et le dimensionnement CSS restent cohérents, puis répétez les vérifications juste en dessous et au-dessus du point de rupture.

Sources