Was sind adaptive Bilder?

Adaptive Bilder sind Bildvarianten, die passend zu Bildschirmgröße, Pixeldichte, Formatunterstützung oder Netzwerkbedingungen der betrachtenden Person ausgewählt oder erzeugt werden. Jede Variante stellt dieselbe Quelle mit einem geeigneten Auslieferungsprofil dar.

Die adaptive Bildauslieferung behält eine Quelle bei und bietet mehrere Varianten an, die sich in Pixelbreite, Pixeldichte, Zuschnitt oder Encoding-Format unterscheiden. Der HTML-Standard behandelt die Technik unter der Überschrift „Adaptive Bilder“; MDN nennt sie responsive Bilder. Die Variante kann an zwei Stellen ausgewählt werden. Im Markup listen srcset und sizes die Kandidaten auf, und der Browser wählt einen davon aus. Dagegen ergänzt picture mit Elementen vom Typ source Regeln für die Bildgestaltung (media) und das Format (type). Auf dem Server liefert eine einzelne URL abhängig von Anfrage-Headern wie Accept oder Client Hints unterschiedliche Bytes zurück. Die Auswahl per Markup benötigt nur eine eigene URL pro Variante. Die serverseitige Auswahl hält das HTML kurz, doch korrekte Ergebnisse hängen davon ab, wie Caches über die variierenden Header informiert werden.

Warum wird für ein kleines Bild auf der Seite trotzdem die größte Datei heruntergeladen? Der Browser beginnt mit dem Abrufen der Bilder, bevor er das CSS der Seite angewendet hat. Deshalb muss die Layoutbreite im HTML angegeben werden. Bei Deskriptoren vom Typ w verlangt der HTML-Standard ein Attribut sizes. Fehlt es oder kann es nicht geparst werden, wird die Breite als 100vw angenommen, als würde das Bild den gesamten Viewport ausfüllen. Jeder Wert für w muss außerdem der tatsächlichen Pixelbreite der Datei entsprechen. Bei Bildern mit loading="lazy" ermöglicht sizes="auto" dem Browser, die dargestellte Breite zu verwenden. Dahinter folgt eine Fallback-Liste für Browser, die das Schlüsselwort nicht unterstützen. Nur vor einem solchen Element img dürfen Elemente vom Typ source auf sizes verzichten. Der Standard behandelt dies als gleichwertig mit auto.
Kann ich genau vorhersagen, welchen Kandidaten ein Browser lädt? Nicht allein anhand von srcset. Der Standard erlaubt dem Browser eine Auswahl „auf implementierungsspezifische Weise“. Dabei kann er Pixeldichte, Zoomstufe und möglicherweise Netzwerkbedingungen abwägen. Zwei Browser können daher aus demselben Markup unterschiedliche Dateien laden. Die Auswahl zwischen Elementen vom Typ source ist dagegen regelbasiert: Der Browser prüft sie der Reihe nach und verwendet das erste Element, dessen Abfrage für media zutrifft und dessen type er unterstützt. Ein fehlendes Attribut gilt dabei als erfüllt. Verwenden Sie media nur für die Bildgestaltung, wenn ein anderer Zuschnitt angezeigt werden muss, und überlassen Sie dem Browser die Wahl zwischen den Auflösungen.
Wie biete ich AVIF oder WebP mit einem Fallback an? Setzen Sie innerhalb von picture pro Format ein Element source, jeweils mit einem Attribut type wie type="image/webp". Danach folgt ein Element img in einem breit unterstützten Format. Der Browser überspringt jedes Element source, dessen Typ er nicht unterstützt. Lassen Sie type nicht weg: Laut HTML-Standard wechselt der Browser ohne dieses Attribut nicht zu einem anderen Element source, nachdem er ein nicht unterstütztes Bildformat abgerufen hat. Wird mit media auch ein Zuschnitt ausgewählt, geben Sie diesem ebenfalls ein Element source im Fallback-Format und platzieren Sie seine Quellen vor den allgemeineren Quellen. Andernfalls fällt ein Browser, der das neuere Format nicht decodieren kann, auf einen anderen Zuschnitt zurück.
Was ändert sich, wenn stattdessen der Server die Variante auswählt? Caches müssen wissen, von welchen Anfrage-Headern die Auswahl abhing. Eine Antwort, die anhand von Accept oder eines Client Hints ausgewählt wurde, sollte diesen Header in Vary aufführen. Andernfalls kann ein Cache eine Variante für eine Anfrage wiederverwenden, die eine andere benötigt hätte. Hints wie Sec-CH-Width werden erst gesendet, nachdem der Server sie mit Accept-CH angefordert hat. MDN kennzeichnet Sec-CH-Width als experimentell. Prüfen Sie daher die Browserunterstützung und behalten Sie einen sinnvollen Standard für Anfragen ohne Hints bei.

Liefern Sie kleinere Varianten an schmale Bildschirme aus und halten Sie zugleich Versionen mit höherer Pixeldichte für entsprechende Displays bereit. Falsche Größenregeln können Bandbreite verschwenden oder dazu führen, dass ein Bild in seiner dargestellten Größe sichtbar unscharf ist.

Transloadits Smart CDN kann die Varianten auf Anfrage erstellen. Eine URL mit der Domain tlcdn.com benennt Ihren Workspace, ein Template und die Quelldatei. URL-Parameter wie eine Breite befüllen Template-Variablen, die Robots wie /image/resize konfigurieren. Bei einer Anfrage ohne Cache-Treffer wird das Template ausgeführt; bei einem Cache-Treffer wird das gespeicherte Ergebnis wiederverwendet. Welche URL ein Besucher lädt, bestimmen weiterhin Sie in Ihrem Markup: Die hier verlinkten Seiten beschreiben Varianten, die über URL-Parameter adressiert werden, und keine Auswahl anhand von Anfrage-Headern wie Accept. Listen Sie die Varianten-URLs daher in srcset oder picture auf.

Bei jeder Anfrage ohne Cache-Treffer wird die Datei importiert und transformiert, was zum Verbrauch zählt: bei der ersten Anfrage für jede neue Parameterkombination sowie bei jeder späteren Anfrage, sobald die Kopie im Cache nicht mehr verfügbar ist. Wann das geschieht, hängt von Ihren Cache-Einstellungen ab. Bei Cache-Treffern wird nicht erneut transformiert. Begrenzen Sie die Variablen, die ein Template akzeptiert, und signieren Sie Smart-CDN-URLs, damit Besucher keine beliebigen Varianten anfordern können. Wenn alle Größen vor der Veröffentlichung bekannt sind, lassen sich Transformationen auf Anfrage vermeiden, indem Sie eine Assembly einmal ausführen und ihre gespeicherten Ausgaben ausliefern.

Entdecken Sie Transloadits Möglichkeiten zur Bildverarbeitung

Was sind adaptive Bilder?

So funktionieren adaptive Bilder

Wichtige Fakten

Wann adaptive Bilder wichtig sind

So hilft Transloadit bei adaptiven Bildern

Quellen

Machen Sie aus Medienwissen eine funktionierende Pipeline