Präskriptive Syntaxen

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:

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.