Erzeugt vollständiges <picture>-Markup mit Art-Direction-Zuschnitten: <source media>-Elemente je Breakpoint, 1x/2x-Kandidaten oder Breitendeskriptoren per {w}-Vorlage, optionale AVIF/WebP-Schichten, sizes-Behandlung, CLS-sicheres width/height sowie HTML- und JSX-Varianten mit spec-basierten Lint-Hinweisen.
Ausführung
Dieses Tool ausführen
Fülle das Formular aus, starte das Tool und prüfe das Ergebnis an einem Ort.
Beispiele
Beispiele zu diesem Tool
Verwandt
Mit verwandten Tools und Themen fortfahren
Leitfaden zur Tool-Nutzung
Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.
Wichtige Fakten
Kategorie
Development
Eingabetypen
textarea, file, select, text, checkbox
Ausgabetyp
html
Sample-Abdeckung
4
API bereit
Ja
Überblick
Der Responsive Picture / srcset Art-Direction-Builder generiert sauberen, standardkonformen HTML- oder JSX-Code für das HTML5-<picture>-Element. Er vereinfacht die Erstellung komplexer Bildweichen mit spezifischen Zuschnitten je Breakpoint, Pixeldichten (1x/2x) oder Breitendeskriptoren, modernen Bildformaten wie AVIF und WebP sowie Attributen zur Performance-Optimierung.
Wann verwenden
Wenn unterschiedliche Bildausschnitte (Art Direction) für Smartphone, Tablet und Desktop benötigt werden.
Wenn moderne Bildformate wie AVIF und WebP mit automatischem Fallback für ältere Browser integriert werden sollen.
Wenn fehlerfreies HTML- oder React-JSX-Markup mit korrekten srcset-, media- und sizes-Attributen ohne manuellen Schreibaufwand erzeugt werden soll.
So funktioniert es
1Tragen Sie Breakpoints, Bild-URLs und optionale Breitenangaben zeilenweise in das Quellen-Feld ein oder laden Sie passende Bilddateien hoch.
2Wählen Sie den Deskriptormodus (Pixeldichte wie 1x/2x oder Breiten per {w}-Vorlage) und konfigurieren Sie optional Formatschichten wie AVIF oder WebP.
3Geben Sie Fallback-URL, Alternativtext und gewünschtes Ausgabeformat (HTML oder JSX) an.
4Kopieren Sie das generierte Markup mitsamt standardisierten Attributen wie loading="lazy" und decoding="async" direkt in Ihr Projekt.
Anwendungsfälle
Hero-Banner auf Landingpages mit breitem Querformat für Desktop und engem Hochformat für Smartphones.
E-Commerce-Produktdetailseiten mit optimierten Bildgrößen und AVIF-Kompression zur Reduzierung von Ladezeiten.
Design-System-Komponenten in React, die standardisierte Bildweichen als wiederverwendbare JSX-Snippets einbinden.
Beispiele
1. Hero-Banner mit Art Direction und Dichtemodus
Frontend-Entwickler
Hintergrund
Ein Webdesigner liefert drei verschiedene Zuschnitte für das Hauptbanner einer Website: Desktop (1280px), Tablet (768px) und Mobile.
Aufgabe
Manuelles Schreiben verschachtelter <source>-Tags mit 1x- und 2x-Retina-Varianten ist fehleranfällig und zeitraubend.
Verwendung
Geben Sie die Breakpoints und URLs in das Quellenfeld ein, aktivieren Sie den Pixeldichte-Modus (1x,2x) und wählen Sie HTML als Ausgabe.
Vollständiges HTML5-<picture>-Markup mit zwei <source media>-Definitionen für 1x/2x und einem lazy-loading <img>-Fallback.
2. Produktbild mit Breitendeskriptoren und AVIF/WebP in React JSX
React-Entwickler
Hintergrund
Ein Online-Shop soll Produktbilder responsiv und in modernen Next-Gen-Formaten über ein CDN ausspielen.
Aufgabe
Es wird JSX-konformer Code mit korrekten sizes-Angaben und multiplen MIME-Type-Schichten für moderne Browser benötigt.
FAQ
Was ist der Unterschied zwischen Art Direction und Resolution Switching?
Resolution Switching liefert dasselbe Bild in unterschiedlichen Auflösungen aus, während Art Direction vollkommen unterschiedliche Bildausschnitte oder Motive je nach Bildschirmbreite bereitstellt.
Wie binde ich AVIF- und WebP-Formate ein?
Wählen Sie im Generator die Formatschicht 'AVIF- + WebP-Schichten'. Das Tool erzeugt automatisch die passenden <source type="image/...">-Tags vor dem Standardformat.
Welche Funktion hat das sizes-Attribut im Breitendeskriptormodus?
Das sizes-Attribut teilt dem Browser vor dem Laden mit, welche Layout-Breite das Bild auf dem Zielgerät einnimmt, damit er die optimale Datei aus srcset auswählt.
Unterstützt das Tool React JSX?
Ja, durch Umschalten der Markup-Variante auf JSX werden Eigenschaften wie srcSet in CamelCase formatiert und Tags selbstschließend ausgegeben.
Warum ist ein Fallback-<img>-Element im <picture>-Tag erforderlich?
Tragen Sie die dynamische URL-Vorlage mit {w} ein, wählen Sie den Modus 'Breite', aktivieren Sie 'AVIF- + WebP-Schichten' und wählen Sie das Ausgabeformat JSX.
JSX-Element mit verschachtelten <source type="image/avif">, <source type="image/webp"> und Standard-Quellen inklusive srcSet-Breitenkandidaten.
Das <img>-Element ist zwingend nötig, da es die Dimensionen und Barrierefreiheit (alt-Attribut) steuert und von Browsern ohne <picture>-Support gerendert wird.