Das Markup für responsive Bilder lässt sich in zwei Szenarien unterteilen: Situationen, in denen das Ziel die effizientesten Bilder ist, und Situationen, in denen Sie explizit steuern müssen, welche Bildquelle der Browser auswählt. Sie können sich diese als deskriptive bzw. präskriptive Syntax vorstellen.
In diesem Modul lernen Sie beide Ansätze kennen. Zuerst besprechen wir srcset und sizes und wie du den Browser dabei unterstützen kannst, die beste Wahl basierend auf den Informationen über den Nutzer, sein Gerät und seine Browsersituation zu treffen. Anschließend bestimmen Sie das <picture>-Element, mit dem Sie die Quellauswahl anhand von Faktoren wie der Größe des Darstellungsbereichs und der Browserunterstützung für Bildformate explizit steuern können.
Beschreibende Syntaxen
Eine beschreibende Syntax liefert dem Browser Informationen über Bildquellen und deren Verwendung, überlässt aber letztendlich dem Browser die Entscheidungsfindung. Dies ist bei weitem das üblichere Szenario. Bei den meisten Bildern wollen Sie das Browserverhalten nicht detailliert steuern. Browser haben weit mehr Informationen als Webentwicklern und können auf der Grundlage dieser Informationen komplexe Entscheidungen treffen. Sie können den Browserkontext von Nutzern nicht genau vorhersagen. Es gibt zu viel über ihre Hardware, Einstellungen und Verbindungsgeschwindigkeiten, die Sie nicht wissen. Im besten Fall können Sie fundierte Vermutungen anstellen, wissen aber nicht genau, wie jeder Nutzer das Web nutzt. Der zentrale Anwendungsfall für responsive Bilder ist aus Entwicklersicht streng zielorientiert: Sie ermöglichen es Browsern, auf Grundlage der Informationen, die dem Browser zur Verfügung stehen, möglichst effiziente Bildanfragen durchzuführen.
Damit Browser diese Auswahl treffen können, können Sie mit srcset eine Liste möglicher Quellen für das Ausfüllen eines einzelnen <img>-Objekts im Browser bereitstellen. Mit sizes können Sie dem Browser Informationen darüber zur Verfügung stellen, wie die <img> gerendert wird. Wie Sie diese verwenden, erfahren Sie im nächsten Modul.
Präskriptive Syntaxen
Mithilfe einer präskriptiven Syntax teilen Sie dem Browser mit, was zu tun ist: welche Quelle er basierend auf bestimmten von Ihnen definierten Kriterien auswählen soll. Dieser Anwendungsfall ist zwar nicht so üblich wie „Laden Sie einfach das effizienteste Asset zum Rendern dieses Bildes“, aber es ermöglicht uns, dem Browser Nutzungsanweisungen zur Verfügung zu stellen, um Informationen zu berücksichtigen, die ihm vor der Übertragung von Assets nicht zur Verfügung stehen, wie z. B. Inhalte der Quellen oder deren Formate.
Während srcset und sizes eine Syntax für die Weitergabe von Informationen an den Browser des Nutzers bereitstellen und diesem ermöglichen, Entscheidungen über Bildquellen zu treffen, gibt es Situationen, in denen Sie explizit steuern müssen, welche Quelldatei wann präsentiert wird. Sie haben beispielsweise die Möglichkeit, Versionen desselben Bildinhalts mit unterschiedlichen Seitenverhältnissen basierend auf unterschiedlichen Layout-Haltepunkten zu präsentieren oder dafür zu sorgen, dass nur Browser, die eine bestimmte Codierung unterstützen, bestimmte Quellen erhalten.
In diesen Fällen möchten Sie ausdrücklich steuern, welche Quelle wann angezeigt wird. Zusicherungen, die srcset und sizes von vornherein nicht bestätigen können. Um dieses Steuerelement zu erhalten, müssen wir das <picture>-Element verwenden.