# Constructeur d'art direction responsive Picture / srcset Génère un balisage complet avec recadrages art direction : éléments par point d'arrêt, candidates 1x/2x ou descripteurs de largeur par modèle {w}, couches AVIF/WebP optionnelles, gestion de sizes, width/height anti-CLS, et déclinaisons HTML et JSX avec notes de lint fondées sur la spécification. > Page canonique: https://elysiatools.com/fr/tools/responsive-picture-srcset-art-direction-builder - **Catégorie:** Development - **Mots-clés:** élément picture, générateur srcset, art direction, images responsives, points d'arrêt, avif webp ## Présentation Le Constructeur d'art direction responsive Picture / srcset génère un balisage HTML ou JSX conforme aux spécifications web pour adapter vos images selon les écrans. Il configure les éléments source par point d'arrêt, prend en charge les densités de pixels ou les descripteurs de largeur, intègre les formats modernes comme AVIF et WebP, et inclut des règles de validation pour éviter les décalages de mise en page (CLS). ## Entrées - **Sources art direction (une par ligne : minWidth URL \[largeurs\])** (textarea): 1280 /img/hero-wide.jpg 768 /img/hero-mid.jpg 0 /img/hero-mobile.jpg - **Facultatif : téléverser des variantes recadrées à la place (jusqu'à 6 images)** (file): Optional — upload the narrow crop, mid crop, wide crop… - **Mode de descripteurs** (select) - **Densités** (text): 1x,2x - **Attribut sizes (mode w)** (text): (min-width: 1024px) 960px, 100vw - **URL du de repli** (text): /img/hero-mobile.jpg - **Texte alternatif** (text): Fresh sourdough loaves on a marble counter - **Couche de format** (select) - **Variante de balisage** (select) - **Ajouter les attributs loading/decoding** (checkbox) ## Quand l'utiliser - Lorsque vous devez afficher des cadrages d'images différents selon la taille de l'écran (art direction mobile vs bureau). - Pour servir des formats légers (AVIF, WebP) avec repli automatique sur JPEG ou PNG via la balise picture. - Lors de l'optimisation des performances web pour générer des attributs srcset et sizes sans introduire de décalage de mise en page (CLS). ## Fonctionnement - Renseignez vos points d'arrêt et URL d'images dans le champ des sources ou téléversez directement vos variantes d'images. - Sélectionnez le mode de descripteurs (densité 1x/2x ou largeurs en w), l'attribut sizes, ainsi que l'URL de repli pour la balise img. - Activez si besoin la négociation de format (couches AVIF et WebP) et les attributs de chargement différé (loading, decoding). - Générez et copiez le code structuré en syntaxe HTML classique ou JSX (React), accompagné des recommandations de lint associées. ## Cas d'usage - Intégration d'une bannière hero plein écran avec un cadrage vertical sur smartphone et panoramique sur grand écran. - Distribution optimisée d'actifs d'e-commerce avec des variantes multi-résolutions AVIF/WebP pour améliorer le score Core Web Vitals. - Migration de composants d'images statiques vers des structures responsives dynamiques dans une application React. ## Questions fréquentes ### Quelle est la différence entre le mode densité et le mode largeur ? Le mode densité utilise des descripteurs de type 1x et 2x pour cibler les écrans haute résolution, tandis que le mode largeur emploie des descripteurs numériques (ex. 800w) combinés à l'attribut sizes. ### Pourquoi la balise img de repli est-elle obligatoire dans l'élément picture ? La spécification HTML impose un élément img à l'intérieur de picture pour assurer l'accessibilité, le texte alternatif et la compatibilité descendante. ### Comment fonctionnent les couches de formats AVIF et WebP ? L'outil duplique les éléments source en injectant les attributs type correspondants afin de servir en priorité les formats les plus légers supportés par le navigateur. ### La sortie JSX est-elle directement compatible avec React ? Oui, le mode JSX convertit automatiquement les attributs comme srcset en srcSet et applique la syntaxe de balises auto-fermantes. ### Comment cet outil aide-t-il à réduire le Cumulative Layout Shift (CLS) ? Il structure les sources et la balise img avec les recommandations nécessaires pour que le navigateur réserve l'espace d'affichage avant le chargement du fichier. ## Outils associés - [Générateur de Data URI](https://elysiatools.com/fr/tools/data-uri-generator): Convertit les fichiers en Data URI (Base64 ou pourcentage-encodé) pour intégrer images, polices et ressources directement dans HTML, CSS ou Markdown - [Conversion d'Images en Lot](https://elysiatools.com/fr/tools/batch-convert): Convertir plusieurs images en différents formats avec paramètres de qualité - [Conversion d'Images par Lot](https://elysiatools.com/fr/tools/image-batch-convert): Convertir plusieurs fichiers image entre différents formats comme JPG, PNG, WebP, AVIF, TIFF, GIF avec réglages de qualité et traitement par lot - [Visionneuse d'Informations d'Images en Lot](https://elysiatools.com/fr/tools/image-batch-info): Voir les informations de base de plusieurs images à la fois - dimensions, format, taille du fichier et présence des métadonnées - [Redimensionneur d'Image](https://elysiatools.com/fr/tools/image-resize): Outil professionnel de redimensionnement d'image avec plusieurs méthodes, préservation du rapport d'aspect et conversion de format, y compris le flou de fond, supportant GIF/Animated WebP/APNG et JPEG/PNG/WEBP. - [De la palette d’image aux design tokens](https://elysiatools.com/fr/tools/image-to-design-tokens): Extrait les couleurs dominantes d’une image par k-means et les exporte en variables CSS / SCSS / config Tailwind / tokens JSON, avec noms et échelle de teintes - [Rognage d'Images par Lot](https://elysiatools.com/fr/tools/image-batch-crop): Rogner plusieurs images à des dimensions spécifiques ou un rapport d'aspect avec un positionnement personnalisé. Renvoie les images rognées en téléchargement ZIP. - [Composition d'Images](https://elysiatools.com/fr/tools/image-composite): Composer plusieurs images ensemble avec un contrôle précis sur la position, l'opacité et les modes de fusion ## Exemples - [Exemples de Traitement d'Images Web Python](https://elysiatools.com/fr/samples/web-image-processing-python): Exemples de traitement d'images Web Python utilisant PIL/Pillow incluant la lecture, l'enregistrement, le redimensionnement et la conversion de format - [Exemples de Traitement d'Images Web TypeScript](https://elysiatools.com/fr/samples/web-image-processing-typescript): Exemples de traitement d'images Web TypeScript incluant lecture/sauvegarde, redimensionnement et conversion de format - [Exemples de Traitement d'Images Android Java](https://elysiatools.com/fr/samples/android-image-processing-java): Exemples de traitement d'images Android Java incluant lecture/écriture, mise à l'échelle et conversion de format - [Exemples de Traitement d'Images Android Kotlin](https://elysiatools.com/fr/samples/android-image-processing-kotlin): Exemples de traitement d'images Android Kotlin incluant lecture/écriture, mise à l'échelle et conversion de format ## Contenu associé - [Outils de masquage, de surlignage et de mise en forme de texte](https://elysiatools.com/fr/hubs/text-format): Comparez les outils de masquage de texte sensible, de détection de PII, de normalisation de numéros, de surlignage, de centrage et de formatage de diff dans un hub unique. - [Outils de conversion de formats d image et d export anime](https://elysiatools.com/fr/hubs/image-convert): Comparez les convertisseurs d image pour JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 et les exports orientes animation dans un meme hub. - [Outils de conversion de casse, d’encodage et de normalisation de texte](https://elysiatools.com/fr/hubs/text-convert): Comparez les outils de conversion de casse, de largeur de caractères, d’encodage, de quoted-printable et de normalisation de texte dans un hub unique. - [Outils de nettoyage, finition et preparation d images en lot](https://elysiatools.com/fr/hubs/image-utility): Regroupe dans un meme hub les outils de nettoyage d image, rognage, marge, encadrement, redimensionnement et compression par lot, filigrane et finition visuelle.