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 -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- -Element im -Tag erforderlich?

Das -Element ist zwingend nötig, da es die Dimensionen und Barrierefreiheit (alt-Attribut) steuert und von Browsern ohne -Support gerendert wird.

Elysia Tools

Mobile Navigation

Development

Responsive Picture / srcset Art-Direction-Builder

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.

Vorbereitete Beispielausführungen

Klicken Sie auf ein Beispiel, um das Formular automatisch auszufüllen. Dateien müssen weiterhin hochgeladen werden.

2 Beispiele

Klassisches Hero mit drei Zuschnitten, Dichtemodus

Eine Zeile pro Art-Direction-Zuschnitt: breites Hero ab 1280px, mittlerer Zuschnitt ab 768px und der schmale Hochformat-Zuschnitt als <img>-Fallback. Die Dichten 1x,2x erzeugen @2x-Kandidaten im retina.js-Stil, und loading/decoding halten das Hero aus dem kritischen Pfad.

<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>

Breitendeskriptoren + sizes + AVIF/WebP-Schichten in JSX

Eine {w}-URL-Vorlage mit echten Dateibreiten (800/1024/1600), ein sizes-Attribut, damit der Browser nach Layoutbreite wählt statt 100vw anzunehmen, sowie AVIF+WebP-Schichten, die die Quelle je MIME-Typ wiederholen — als React-JSX mit camelCase srcSet und selbstschließenden Tags.

<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>

Eingaben

Optionen sind gruppiert, damit lange Formulare übersichtlich bleiben.

10 Optionen

DateienQuelldateien für diesen Workflow hochladen.1

Optional: Zuschnittvarianten hochladen (bis zu 6 Bilder)fileOptionales Feld

Maximale Größe je Datei: 20 MB / Max. Dateien: 6Unterstützte Typen: image/jpeg, image/jpg, image/png, image/webp, image/avif, image/gif

InhaltHaupteingaben einfügen oder eingeben.5

Art-Direction-Quellen (eine pro Zeile: minWidth URL [Breiten])textareaOptionales FeldDichtentextOptionales Feldsizes-Attribut (w-Modus)textOptionales FeldFallback-<img>-URLtextOptionales FeldAlternativtexttextOptionales Feld

EinstellungenFormate, Bereiche, Zahlen und Modi anpassen.3

DeskriptormodusselectPflichtFormatschichtselectPflichtMarkup-VarianteselectPflicht

SchalterOptionales Verhalten aktivieren oder deaktivieren.1

loading/decoding-Attribute hinzufügencheckboxOptionales FeldAktiviert, wenn ausgewählt

Ergebnis

Bereit zum Start

Nach dem Ausführen erscheinen hier Dateien, Text, strukturierte Daten oder Stream-Ausgaben.

Beispiele

Beispiele zu diesem Tool

Verwandt

Mit verwandten Tools und Themen fortfahren

sources: "768 /img/hero-mid.jpg\n1280 /img/hero-wide.jpg" descriptorMode: "density" densities: "1x,2x" fallbackUrl: "/img/hero-mobile.jpg" altText: "Frisches Sauerteigbrot auf Marmortheke" flavor: "html" lazyAttrs: true

Responsive Picture / srcset Art-Direction-Builder

Dieses Tool ausführen

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Beispiele zu diesem Tool

Mit verwandten Tools und Themen fortfahren

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.

Wichtige Fakten

Überblick

Wann verwenden

So funktioniert es

Anwendungsfälle

Beispiele

1. Hero-Banner mit Art Direction und Dichtemodus

2. Produktbild mit Breitendeskriptoren und AVIF/WebP in React JSX

FAQ

Web Python Bildverarbeitung Beispiele

Web TypeScript Bildverarbeitungsbeispiele

Android Java Bildverarbeitungsbeispiele

Android Kotlin Bildverarbeitungsbeispiele

Data-URI-Generator

Batch-Bildkonvertierung

Batch-Bild-Konvertierung

Stapel-Bild-Info-Viewer

Text-Redaktions-, Hervorhebungs- und Darstellungsformatierungs-Tools

Tools fur Bildformat-Konvertierung und animierten Export

Textfall-, Encoding- und Normalisierungs-Konvertierungs-Tools

Werkzeuge fur Bildbereinigung, Rahmen und Batch-Vorbereitung