Das <picture>
-Element rendert nichts selbst, sondern dient stattdessen als Entscheidungsmaschine für ein inneres <img>
-Element.
was gerendert werden soll. <picture>
folgt einem Präzedenzfall, der bereits durch die Elemente <audio>
und <video>
festgelegt wurde: ein Wrapper-Element
die einzelne <source>
-Elemente enthält.
<picture>
<source …>
<source …>
<img …>
</picture …>
Das innere <img>
bietet auch ein zuverlässiges Fallback-Muster für ältere Browser ohne Unterstützung für responsive Bilder:
Wenn das <picture>
-Element vom Browser des Nutzers nicht erkannt wird, wird es ignoriert. Die <source>
-Elemente werden dann ebenfalls verworfen.
da der Browser sie entweder überhaupt nicht erkennt oder ohne ein übergeordnetes <video>
- oder <audio>
-Element keinen aussagekräftigen Kontext für sie hat.
Das innere <img>
-Element wird jedoch von jedem Browser erkannt und die in src
angegebene Quelle wird wie erwartet gerendert.
„Künstlerische Leitung“ Bilder mit <picture>
Änderungen am Inhalt oder Seitenverhältnis eines Bildes basierend auf der Größe des Bildes auf der Seite werden als „Art-Directed“ bezeichnet.
responsive Bilder. srcset
und sizes
funktionieren unsichtbar und tauschen Quellen nahtlos aus, je nachdem, was der Browser des Nutzers vorgibt.
Es gibt jedoch Situationen, in denen Sie Quellen über Haltepunkte hinweg ändern möchten, um den Inhalt auf die gleiche Weise, wie Sie Seitenlayouts anpassen, besser hervorzuheben.
Ein Kopfzeilenbild in voller Breite und ein kleiner Fokuspunkt eignet sich beispielsweise gut für einen großen Darstellungsbereich:
Wird das Bild jedoch für kleine Darstellungsbereiche verkleinert, geht der Fokus des Bildes möglicherweise verloren:
![Bild einer Fliederblume in der Kopfzeile, verkleinert. Die Honigbiene ist kaum zu sehen.](https://web.dev/static/learn/images/prescriptive/image/a-header-width-image-a-p-a272cd48c084e.png?authuser=0&hl=de)
Das Thema dieser Bildquellen ist dasselbe, aber um dieses Thema visuell besser hervorzuheben, ist es sinnvoll, Proportionen der Bildquelle, die sich über Haltepunkte hinweg ändern. Zum Beispiel eine stärkere Zoomstufe in der Bildmitte und einige der Details an den Kanten abgeschnitten:
Diese Art von "Zuschneiden" kann über CSS erzielt werden. Der Nutzer möchte aber alle Daten anfordern, aus denen das Bild besteht. auch wenn sie es vielleicht nie sehen würden.
Jedes source
-Element hat Attribute, mit denen die Bedingungen für die Auswahl dieses source
-Elements definiert werden: media
. Es akzeptiert ein
media query und type
verwenden, für die ein Medientyp (früher als „MIME-Typ“ bezeichnet) akzeptiert wird. Die erste <source>
in der Quelle
Reihenfolge ausgewählt, die dem aktuellen Browserkontext des Nutzers entspricht, und der Inhalt des srcset
-Attributs auf diesem source
wird verwendet, um die richtigen Kandidaten für diesen Kontext zu ermitteln. In diesem Beispiel ist die erste source
mit einem media
-Attribut
die der Größe des Darstellungsbereichs des Nutzers entspricht:
<picture>
<source media="(min-width: 1200px)" srcset="wide-crop.jpg">
<img src="close-crop.jpg" alt="…">
</picture>
Du solltest die innere img
immer an letzter Stelle der Reihenfolge angeben – wenn keines der source
-Elemente mit dem media
oder type
übereinstimmt
wird das Bild als „Standardbild“ Quelle. Wenn Sie min-width
-Medienabfragen verwenden, möchten Sie die größten
wie im vorstehenden Code zu sehen ist. Wenn Sie max-width
-Medienabfragen verwenden, sollten Sie die kleinste Quelle an erster Stelle platzieren.
<picture>
<source media="(max-width: 400px)" srcset="mid-bp.jpg">
<source media="(max-width: 800px)" srcset="high-bp.jpg">
<img src="highest-bp.jpg" alt="…">
</picture>
Wenn eine Quelle anhand der von Ihnen angegebenen Kriterien ausgewählt wird, wird das Attribut srcset
auf source
an den
<img>
, als wäre es auf <img>
selbst definiert. Sie können also sizes
verwenden, um kunstorientierte Bilder zu optimieren.
Quellen hinzu.
<picture>
<source media="(min-width: 800px)" srcset="high-bp-1600.jpg 1600w, high-bp-1000.jpg 1000w">
<source srcset="lower-bp-1200.jpg 1200w, lower-bp-800.jpg 800w">
<img src="fallback.jpg" alt="…" sizes="calc(100vw - 2em)">
</picture>
Natürlich verursacht ein Bild mit Proportionen, die je nach ausgewähltem <source>
-Element variieren können, ein Leistungsproblem:
<img>
unterstützt nur ein einzelnes width
- und height
-Attribut. Das Weglassen dieser Attribute kann jedoch zu einer messbar schlechteren Nutzererfahrung führen.
Um dies zu berücksichtigen, wurde eine relativ neue, aber
gut unterstützt: als Ergänzung zum HTML-Code
In der Spezifikation können die Attribute height
und width
für <source>
-Elemente verwendet werden. Sie reduzieren auch Layout Shifts
wie bei <img>
, wobei der entsprechende Platz in Ihrem Layout für das ausgewählte <source>
-Element reserviert ist.
<picture>
<source
media="(min-width: 800px)"
srcset="high-bp-1600.jpg 1600w, high-bp-1000.jpg 1000w"
width="1600"
height="800">
<img src="fallback.jpg"
srcset="lower-bp-1200.jpg 1200w, lower-bp-800.jpg 800w"
sizes="calc(100vw - 2em)"
width="1200"
height="750"
alt="…">
</picture>
Es ist wichtig zu beachten, dass Art Direction nicht nur für Entscheidungen genutzt werden kann, die auf der Größe des Darstellungsbereichs basieren.
der Großteil dieser Fälle kann mit srcset
/sizes
effizienter bearbeitet werden. Beispielsweise kann die Auswahl einer Bildquelle
das zum Farbschema der Nutzervorlieben passt:
<picture>
<source media="(prefers-color-scheme: dark)" srcset="hero-dark.jpg">
<img srcset="hero-light.jpg">
</picture>
Das Attribut type
Mit dem Attribut type
können Sie die Einzelanfrage-Entscheidungsmaschine des Elements <picture>
so verwenden, dass nur Bildformate bereitgestellt werden
die sie unterstützen.
Wie Sie unter Bildformate und Komprimierung gelernt haben, ist eine Codierung, die der Browser nicht parsen kann, auch nicht als Bilddaten.
Vor der Einführung des <picture>
-Elements waren die brauchbaren Frontend-Lösungen zur Bereitstellung neuer Bildformate erforderlich.
Der Browser fordert und versucht, eine Bilddatei anzufordern und zu parsen, bevor bestimmt wird, ob sie verworfen und ein Fallback geladen werden soll. A
Beispiel für ein Skript in dieser Richtung:
<img src="image.webp"
data-fallback="image.jpg"
onerror="this.src=this.getAttribute('data-fallback'); this.onerror=null;"
alt="...">
Bei diesem Muster wird weiterhin in jedem Browser eine Anfrage für image.webp
gesendet, was für Browser eine Verschwendung von Übertragungen bedeutete.
ohne WebP-Unterstützung. Browser, die dann die WebP-Codierung nicht parsen konnten, geben ein onerror
-Ereignis aus und
den Wert data-fallback
in src
. Es war eine Verschwendung, aber auch hier waren Ansätze wie dieser die einzige Möglichkeit,
die im Frontend verfügbar sind. Denken Sie daran, dass der Browser Bilder anfordert, bevor benutzerdefinierte Skripts ein
oder sogar geparst werden kann,
daher konnten wir diesen Prozess nicht vorzeitig beenden.
Das Element <picture>
ist explizit darauf ausgelegt, diese redundanten Anfragen zu vermeiden. Zwar ist es immer noch nicht möglich,
zur Erkennung eines nicht unterstützten Formats, ohne dies anzufordern, warnt das Attribut type
den Browser vor der Quelle
Codierungen im Voraus, sodass sie entscheiden kann, ob eine Anfrage gestellt werden soll oder nicht.
Im Attribut type
geben Sie den Medientyp (früher MIME-Typ) an.
der Bildquelle, die im Attribut srcset
jedes <source>
angegeben ist. So erhält der Browser alle Informationen,
muss sofort ermitteln, ob der von dieser source
bereitgestellte Bildkandidat decodiert werden kann, ohne dass ein externer
-Anfragen: Wenn der Medientyp nicht erkannt wird, werden <source>
und alle zugehörigen Kandidaten ignoriert und der Browser fährt fort.
<picture>
<source type="image/webp" srcset="pic.webp">
<img src="pic.jpg" alt="...">
</picture>
Hier erkennt jeder Browser, der die WebP-Codierung unterstützt, den im Attribut type
angegebenen Medientyp image/webp
.
des <source>
-Elements wählen Sie <source>
aus. Da wir in srcset
nur einen Kandidaten angegeben haben, weisen Sie den inneren
<img>
zum Anfordern, Übertragen und Rendern von pic.webp
. Jeder Browser ohne WebP-Unterstützung ignoriert die source
und
ohne anderslautende Anweisungen, rendert die <img>
den Inhalt von src
so, wie es seit 1992 der Fall ist.
Du musst hier kein zweites <source>
-Element mit type="image/jpeg"
angeben. Du kannst dann von einer universellen Unterstützung für JPEG ausgehen.
Unabhängig vom Browser-Kontext des Nutzers wird all dies mit einer einzigen Dateiübertragung erreicht und es wird keine Bandbreite verschwendet
Bildquellen, die nicht gerendert werden können. Dies ist eine vorausschauende Vorgehensweise: Da neuere und effizientere Dateiformate hinzukommen werden,
mit eigenen Medientypen, die wir dank picture
nutzen können – ohne JavaScript, ohne Server
und die Geschwindigkeit von <img>
.
Die Zukunft responsiver Bilder
Alle hier besprochenen Markup-Muster waren eine aufwendige Standardisierung: Die Änderung der Funktionalität
etwas, das im Web genauso etabliert und zentral wie <img>
war, und die Probleme, die diese Änderungen lösen sollten,
umfangreich waren, gelinde gesagt. Wenn Sie denken, dass es bei diesen Kampagnen noch viel Raum für Verbesserungen gibt,
auszeichnen, haben Sie absolut recht. Diese Standards sollten von Anfang an eine Grundlage für zukünftige
auf denen Sie aufbauen können.
Alle diese Lösungen waren notwendigerweise vom Markup abhängig, sodass sie in die anfängliche Nutzlast vom Server einbezogen werden können.
und rechtzeitig ankommen, damit der Browser Bildquellen anfordert – eine Einschränkung, die zu dem übermäßig unübersichtlichen sizes
-Attribut geführt hat.
Da diese Funktionen jedoch in die Webplattform eingeführt wurden, wurde eine native Methode zum Zurückstellen von Bildanfragen eingeführt.
<img>
-Elemente mit dem Attribut loading="lazy"
werden erst angefordert, wenn das Layout der Seite bekannt ist, um die Übertragung zu verzögern.
Anfragen nach Bildern außerhalb des anfänglichen Darstellungsbereichs des Nutzers bis später beim Rendern der Seite. Dadurch wird möglicherweise vermieden,
unnötige Anfragen. Da der Browser das Seitenlayout zum Zeitpunkt der Anfrage vollständig versteht, ist ein Fehler
Das Attribut sizes="auto"
wurde als Ergänzung der HTML-Spezifikation vorgeschlagen
um in diesen Fällen manuell geschriebene sizes
-Attribute zu vermeiden.
Außerdem gibt es noch weitere Neuerungen für das <picture>
-Element, die zu einigen außergewöhnlich aufregenden Änderungen passen.
mit der Art und Weise, wie wir
Seitenlayouts gestalten. Auch wenn Informationen zum Darstellungsbereich eine solide Grundlage für
groben Layoutentscheidungen sind,
hindert uns daran, einen Entwicklungsansatz auf Komponentenebene zu verfolgen, d. h. eine Komponente, die in
einem beliebigen Teil eines Seitenlayouts, mit Stilen, die auf den Raum reagieren, den die Komponente selbst einnimmt. Diese Bedenken führten
zur Erstellung von Containerabfragen: eine Methode zum Gestalten von Elementen
basierend auf der Größe des übergeordneten Containers
und nicht nur anhand des Darstellungsbereichs.
Die Containerabfragesyntax hat sich zwar gerade erst stabilisiert und die Browserunterstützung ist sehr begrenzt.
zum Zeitpunkt der Erstellung dieses Dokuments schreibt: Durch das Hinzufügen der Browsertechnologien, die diese Funktion ermöglichen, erhält das <picture>
-Element ein
dasselbe tun: ein potenzielles container
-Attribut, das <source>
-Auswahlkriterien anhand der
Abstand, der von <img>
des <picture>
-Elements belegt wird, und nicht anhand der Größe des Darstellungsbereichs.
Wenn das etwas vage klingt, gibt es dafür einen guten Grund: Die Diskussionen über Webstandards sind fortlaufend, aber noch lange nicht beigelegt. Sie noch nicht nutzen können.
Responsives Markup für Bilder verspricht, im Laufe der Zeit immer einfacher zu arbeiten, wie jede Webtechnologie, es gibt jedoch eine Reihe von von Diensten, Technologien und Frameworks, um das Schreiben der verfügbaren Auszeichnungen zu erleichtern. Im nächsten Modul wie Sie alles, was wir über Bildformate, Komprimierung und responsive Bilder gelernt haben, in einen modernen Entwicklungsworkflow integrieren.