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.

Elysia Tools

Navigation mobile

Development

Constructeur d'art direction responsive Picture / srcset

Génère un balisage <picture> complet avec recadrages art direction : éléments <source media> 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.

Exécution

Exécuter cet outil

Remplissez le formulaire, lancez l’outil et consultez le résultat au même endroit.

Exécutions d’exemple préparées

Cliquez sur un exemple pour remplir automatiquement le formulaire. Les fichiers doivent toujours être téléversés.

2 exemples

Hero classique à trois recadrages, mode densité

Une ligne par recadrage art direction : hero large dès 1280px, recadrage moyen dès 768px, et le recadrage vertical étroit en repli du <img>. Les densités 1x,2x génèrent des candidates @2x façon retina.js, et les attributs loading/decoding écartent le hero du chemin critique.

<section class="pb-wrap">breakpoint ladder 1280→768→img · <picture> HTML block with two media sources (1x/@2x candidates) and a lazy fallback img · JSX twin · clean lint banner</section>

Descripteurs de largeur + sizes + couches AVIF/WebP en JSX

Un modèle d'URL en {w} avec les vraies largeurs de fichiers (800/1024/1600), un attribut sizes pour que le navigateur choisisse selon la largeur de mise en page au lieu de supposer 100vw, et des couches AVIF+WebP répétant la source par type MIME — en JSX React avec srcSet camelCase et balises auto-fermantes.

<section class="pb-wrap">breakpoint ladder 1024→img · JSX block: three <source> elements (avif/webp/original) each with srcSet="…{800w,1024w,1600w}" and sizes · lint note about combining art-direction media with media conditions inside sizes</section>

Entrées

Les options sont groupées pour rendre les longs formulaires plus lisibles.

10 réglages

FichiersImportez les fichiers source du flux.1

Facultatif : téléverser des variantes recadrées à la place (jusqu'à 6 images)fileOptionnel

Taille maximale pour chaque fichier : 20 MB / Nombre max de fichiers : 6Types pris en charge : image/jpeg, image/jpg, image/png, image/webp, image/avif, image/gif

ContenuCollez ou saisissez les valeurs principales.5

Sources art direction (une par ligne : minWidth URL [largeurs])textareaOptionnelDensitéstextOptionnelAttribut sizes (mode w)textOptionnelURL du <img> de replitextOptionnelTexte alternatiftextOptionnel

RéglagesAjustez formats, plages, nombres et modes.3

Mode de descripteursselectRequisCouche de formatselectRequisVariante de balisageselectRequis

OptionsActivez ou désactivez les comportements optionnels.1

Ajouter les attributs loading/decodingcheckboxOptionnelActivé si coché

Résultat

Prêt à exécuter

Après exécution, les fichiers, textes, données structurées ou sorties en flux apparaîtront ici.

Exemples

Exemples adaptés à cet outil

Associé

Continuer avec des outils et dossiers associés

sources: "768 /img/hero-mid.jpg\n1280 /img/hero-wide.jpg" descriptorMode: "density" densities: "1x,2x" fallbackUrl: "/img/hero-mobile.jpg" altText: "Pain au levain sur un comptoir" flavor: "html" lazyAttrs: true

Constructeur d'art direction responsive Picture / srcset

Exécuter cet outil

Exécutions d’exemple préparées

Entrées

Résultat

Exemples adaptés à cet outil

Continuer avec des outils et dossiers associés

Exécutions d’exemple préparées

Entrées

Résultat

Découvrez quand utiliser cet outil, ce qu'il prend en charge et comment les utilisateurs l'appliquent.

Points clés

Aperçu

Quand l’utiliser

Fonctionnement

Cas d’usage

Exemples

1. Bannière Hero multi-points d'arrêt en mode densité

2. Composant produit React avec couches AVIF/WebP et descripteurs de largeur

FAQ

Exemples de Traitement d'Images Web Python

Exemples de Traitement d'Images Web TypeScript

Exemples de Traitement d'Images Android Java

Exemples de Traitement d'Images Android Kotlin

Générateur de Data URI

Conversion d'Images en Lot

Conversion d'Images par Lot

Visionneuse d'Informations d'Images en Lot

Outils de masquage, de surlignage et de mise en forme de texte

Outils de conversion de formats d image et d export anime

Outils de conversion de casse, d’encodage et de normalisation de texte

Outils de nettoyage, finition et preparation d images en lot