Medien nur einmal komponiert

Jedes Beispiel auf dieser Seite verwendet denselben semantischen Renderer, denselben Katalog und dieselbe responsive Auslieferungsrichtlinie. Ändern Sie die Größe, öffnen Sie die Galerie oder deaktivieren Sie JavaScript – der Inhalt bleibt vollständig.

Sieben Ergebnisse, ein gemeinsamer Baustein

Anordnung, Seitenverhältnis, Anpassung und logische Position verändern das Ergebnis, ohne getrennte Komponenten zu erzeugen.

Drei goldbraune Sauerteigbrote über dem Text der gestapelten Karte.
Bäckereifotografie mit Landschaftsausschnitt.

Bild oberhalb

Eine stabile Stapelkomposition hält das Bild bei jeder Containerbreite vor dem Text.

Warm beleuchtete handwerkliche Bäckerei vor dem Kartentext.
Fotografie der Bäckerei in einer responsiven geteilten Karte.

Bild davor

Die geteilte Komposition wird erst horizontal, wenn ihr eigener Container genügend Platz bietet.

Bild danach

Der Text bleibt in der Lesereihenfolge zuerst, während das Bild visuell und im Dokument danach folgt.

Bäcker beim Formen von Sauerteig nach dem Kartentext.
Die Werkstattfotografie bewahrt eine sinnvolle Quellreihenfolge.
Porträt von Ana in einem vertikalen redaktionellen Rahmen.
Porträtformat mit füllender Anpassung.

Redaktionelles Porträt

Das Porträtprofil wählt eine schmalere Bildrichtlinie und einen bewusst vertikalen Ausschnitt.

Drei handwerkliche Bäcker hinter kontrastreichem Überlagerungstext.
Das überlagerte Medium behält seine eigene Bildunterschrift.

Lesbare Überlagerung

Text liegt nur über Bildern, wenn eine kontrollierte dunkle Fläche und eine lesbare Kontrastvorgabe aktiv sind.

Bäcker beim Formen von Teig in einer warmen Werkstatt als breite Hervorhebung.
Die hervorgehobene Werkstattfotografie überspannt das Raster.

Hervorgehobene Breite

Die hervorgehobene Karte belegt das verfügbare Raster und behält dieselben Medien- und Inhaltsbereiche.

Vollständiges Foto von Sauerteigbroten in einem quadratischen Rahmen.
Quadratischer Rahmen mit vollständig sichtbarem Foto.

Eingepasstes Foto

Die eingepasste Darstellung zeigt das vollständige Foto und macht den Unterschied zu zugeschnittenen Varianten direkt sichtbar.

Semantische Abbildung mit Katalognachweis

Wenn eine Beschriftung oder ein Nachweis zu einem Bild gehört, erzeugt der Renderer echte figure- und figcaption-Elemente. Der Nachweis stammt aus dem Medienkatalog und wird nicht im Seitentext dupliziert.

Die drei Bäcker von Goldkorn als eigenständige semantische Abbildung.
Ein Bild, eine Beschriftung und kataloggeführte Herkunft. OpenAI

Galerien zuerst als statischer Inhalt

Jedes Element bleibt in Quellreihenfolge vorhanden. Scroll-Einrasten und native dialog-Lightbox erhöhen den Komfort, ohne Inhalte hinter JavaScript zu verstecken.

Scroll-Einrasten mit Lightbox

In einem schmalen Container kann die vollständige Reihe gescrollt werden. Bei mehr Platz werden dieselben Abbildungen zu einem Raster. Aktivieren Sie ein Bild, um die barrierefreie Lightbox zu öffnen.

Statisches Porträtraster

Diese Galerie verzichtet vollständig auf die Lightbox. Alle Abbildungen und Beschriftungen bleiben ohne clientseitiges Verhalten verfügbar.

Für Geschwindigkeit gebaut

Die Seite zeigt neben den visuellen Ergebnissen auch die Auslieferungsrichtlinie. Lighthouse prüft das bereitgestellte Ergebnis nach jeder Umsetzung.

Passende Quellgrößen

Benannte Profile erzeugen begrenzte Breiten und genaue sizes-Angaben, statt überall ein übergroßes Bild auszuliefern.

Bewusstes Laden

Nur das erste Bild wird sofort und mit hoher Priorität geladen. Alle weiteren Bilder laden verzögert und werden asynchron dekodiert.

Kleine Erweiterung

Die Galerie liefert zuerst vollständiges HTML. Ein isoliertes Skript erweitert direkte Links um natives dialog, Tastatursteuerung und Fokusrückgabe.