Ratgeber: Für Kartenbilder Platz reservieren, bevor das Motiv geladen ist

Die Karte soll beim Laden lesbar bleiben

Eine Projektübersicht zeigt Bilder über kurzen Beschreibungen. Während die Dateien noch laden, brauchen diese Bildflächen einen nachvollziehbaren Platz. Die aktuelle MDN-Referenz erklärt aspect-ratio als gewünschtes Verhältnis zwischen Breite und Höhe einer Elementbox. Mindestens eine Größenrichtung muss automatisch bestimmt werden, damit das Verhältnis die Größe beeinflussen kann. Das ist vorhandenes CSS-Wissen, keine heutige Produktankündigung. In unserem eigenen Beispiel geht es um sechs Projektkarten, die auf dem Handy untereinander und am großen Bildschirm nebeneinander stehen.

Bildfläche und Textfläche getrennt betrachten

Plane zunächst das gewünschte Verhältnis nur für den Bildbereich. Die darunterliegende Beschreibung braucht Platz für ihren tatsächlichen Text. Eine starre Höhe für die gesamte Karte kann bei langen Überschriften Inhalte abschneiden. Zeichne deshalb eine kurze und eine doppelt so lange Beschreibung. Beide sollen vollständig lesbar bleiben. Lege außerdem fest, wie ein fehlendes Bild dargestellt wird. Der reservierte Bereich sollte dann eine verständliche Ersatzdarstellung tragen, ohne einen erfolgreich geladenen Inhalt vorzutäuschen.

Drei Motive machen den Unterschied sichtbar

Verwende ein eigenes Querformat, ein Hochformat und ein quadratisches Bild. Prüfe jeweils, ob das gesamte Motiv sichtbar sein muss oder ob ein Ausschnitt akzeptabel ist. Das Seitenverhältnis allein entscheidet diese Inhaltsfrage nicht. Bei einer Produktzeichnung mit wichtigen Randinformationen wäre ein großzügiger Ausschnitt möglicherweise falsch, bei einer dekorativen Landschaft eher vertretbar. Formuliere den erwarteten Umgang für jede Bildart im Auftrag an die Entwicklung. Eine optisch gleichmäßige Reihe ist kein ausreichender Beleg, dass die Bilder inhaltlich gut dargestellt werden.

Den Ladevorgang kontrolliert nachstellen

Teste die Übersicht mit verzögert geladenen Bildern und beobachte, ob die zugehörigen Überschriften währenddessen ihre Position stark verändern. Prüfe zusätzlich einen Bildfehler, sehr schmale Breite und vergrößerte Schrift. Stelle in den Entwicklerwerkzeugen fest, ob feste Breiten und Höhen deiner beabsichtigten Verhältnisregel entgegenstehen. Die Abnahme verlangt keine erfundene Messzahl: Dokumentiere konkret die verwendeten Motive, Ansichtsbreiten und sichtbaren Ergebnisse. Erst wenn Text, Ersatzdarstellung und Bildausschnitt in diesen Fällen verständlich bleiben, ist der Kartenentwurf für den nächsten Umsetzungsschritt ausreichend beschrieben.