diff --git a/src/content/tutorials/art-direction-im-kreditantragsprozess.mdx b/src/content/tutorials/art-direction-im-kreditantragsprozess.mdx index 45e8171..7aca9dd 100644 --- a/src/content/tutorials/art-direction-im-kreditantragsprozess.mdx +++ b/src/content/tutorials/art-direction-im-kreditantragsprozess.mdx @@ -27,7 +27,7 @@ Das Bildmotiv wird bei der Postbank mit dem Titel kombiniert. Auf Smartphones er
-Das Bild selbst ist ein [Picture-Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture), das dem Browser alternative Versionen des Bildes anbietet. Das könnte für das Smartphone ein hochformatiges Bild sein und für den Desktop ein querformatiges mit unterschiedlichem Ausschnitt. Eine solche Optimierung nennt man **Art Direction**. Ziel ist es, dass der Browser stets das Bild lädt, das für das aktuelle Endgerät am besten geeignet ist. +Das Bild selbst ist als [Picture-Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) angelegt, das dem Browser alternative Versionen des Bildes anbietet. Das könnte für das Smartphone ein hochformatiges Bild sein und für den Desktop ein querformatiges mit unterschiedlichem Ausschnitt. Eine solche Optimierung nennt man **Art Direction**. Ziel ist es, dass der Browser stets das Bild lädt, das für das aktuelle Endgerät am besten geeignet ist. Schauen wir uns den Code dafür einmal an. Zum besseren Verständnis habe ich diesen in Abschnitte unterteilt und erkläre diese nacheinander. @@ -71,11 +71,11 @@ In dem folgenden Code wird dem Browser über das ``-Element und dessen ` Die Angabe `790w` hinter dem Dateinamen informiert den Browser, dass dieses Bild tatsächlich 790 Pixel breit ist (`w` = width). Das `sizes=""`-Attribut definiert, wie groß das Bild auf dem Bildschirm dargestellt werden soll. In diesem Fall wird das Bild auf 1060 Pixel skaliert, wenn der Bildschirm mindestens 1060 Pixel breit ist. Ansonsten wird das Bild auf die volle Bildschirmbreite (100 % des Viewports) skaliert. -Dieses ``-Element gibt es gleich dreimal. Entscheidener Unterschied ist das Attribut `type=""`, über das die Dateiformate AVIF, WebP und JPEG definiert werden. AVIF-Bilder sind in der Regel besser komprimiert und damit kleiner als WebP, während WebP in der Regel kleiner als JPG ist – und das wirkt sich auf die Ladezeit aus Unterstützt der Browser also AVIF, lädt er das. Tut er das nicht, wird auf WebP zurückgegriffen. Und ist er auch dazu nicht in der Lage, wird das JPEG geladen. Auf der Seite [Can I use](https://caniuse.com/?search=image%20format) erfährst du mehr darüber, welche Browser welche Bildformate unterstützten. +Dieses ``-Element gibt es gleich dreimal. Entscheidener Unterschied ist die Dateiendung, sowie das das dazu passende Attribut `type=""`. Zuerst wird ein sehr gut kompromiertes Bild im AVIF-Format deklariert, das kleiner ist als ein WebP-Bild ist, das wiederum kleiner ist als ein JPEG-Bild. Das wirkt sich auf die Ladezeit aus. Unterstützt der Browser also AVIF, lädt er das. Tut er das nicht, wird auf WebP zurückgegriffen. Und ist er auch dazu nicht in der Lage, wird das JPEG geladen. Auf der Seite [Can I use](https://caniuse.com/?search=image%20format) erfährst du mehr darüber, welche Browser welche Bildformate unterstützten. ### B: Tablets -Auch für Geräte in der Größenordnung eines Tablets gibt es drei ``-Element. Hier wird das Bild `image-440x200` geladen, wenn der Bildschirm mindestens 440 Pixel und maximal 789 Pixel breit ist. Das Bild hat eine Größe von 440 Pixel (`440w`) und wird auf die volle Bildschirmbreite skaliert (`100vw`). +Auch für Geräte in der Größenordnung eines Tablets gibt es drei ``-Elemente. Hier wird das Bild `image-440x200` geladen, wenn der Bildschirm mindestens 440 Pixel und maximal 789 Pixel breit ist. Das Bild hat eine Größe von 440 Pixel (`440w`) und wird auf die volle Bildschirmbreite skaliert (`100vw`).
```html @@ -92,8 +92,6 @@ Auch für Geräte in der Größenordnung eines Tablets gibt es drei ``-E Bei kleinen Geräten wie Smartphones, wird das Bild `image-400x170` geladen, wenn der Bildschirm maximal 439 Pixel breit ist. Das 400 Pixel breite Bild wird auf die volle Bildschirmbreite skaliert. -Der Browser geht hier also in jedem Abschnitt von oben nach unten alle Varianten durch und zeigt das Bild, das für die aktuelle Bildschirmgröße am besten geeignet ist. -
```html @@ -105,6 +103,8 @@ Der Browser geht hier also in jedem Abschnitt von oben nach unten alle Varianten ```
+Der Browser geht hier also in jedem Abschnitt von oben nach unten alle Varianten durch und zeigt das Bild, das für die aktuelle Bildschirmgröße am besten geeignet ist. + ### D: Fallback Erst wenn alle oben aufgeführten Eventualitäten für den Bildschirm nicht greifen, wird das Bild `image-400x170.jpg` geladen. Es ist damit quasi ein Fallback. Gleichzeitig – und das ist wichtig zu verstehen – ist das `img`-Element dasjenige, welches das Bild tatsächlich auch anzeigt. Auch dann, wenn der Browser eine andere Variante wählt. @@ -120,9 +120,9 @@ Erst wenn alle oben aufgeführten Eventualitäten für den Bildschirm nicht grei ## Testen mit den Developer Tools -Welches Bild tatsächlich geladen wird, kannst du in den Developer Tools deines Browsers überprüfen. In Chrome öffnest du die Developer Tools mit F12 unter Windows und Cmd + Option + I unter macOS. Du wählst den Reiter `Network` aus und lädst die Seite neu. Dann suchst du nach dem Bild und siehst in der Spalte `Size`, welches Bild geladen wurde. In der Spalte `Initiator` siehst du, welches Element das Bild geladen hat. In der Spalte `Type` siehst du, welches Bildformat geladen wurde. +Welches Bild tatsächlich geladen wird, kannst du in den Developer Tools deines Browsers überprüfen. In Chrome öffnest du die Developer Tools mit F12 unter Windows und Cmd + Option + I unter macOS. Du wählst den Reiter `Network` aus und lädst die Seite über den Reload-Button des Browsers neu. Suche in der Spalte `Name` nach dem Bild. Die Dateiendung, sowie die dazugehörigen Spalte `Type` sollten nun dem Bild enstprechen, welches du für die aktuelle Bildschirmgröße (Viewport) definiert hattest. -Wenn du den Browser nun kleiner oder größer ziehst, kannst du beobachten, wie sich das Bild ändert. Das ist ein gutes Zeichen, dass das Bild responsiv ist. Lädst du die Seite neu, wird auch hier nur das Bild geladen, das für die aktuelle Bildschirmgröße vorgesehen ist. +Wenn du den Browser nun kleiner oder größer ziehst, kannst du beobachten, wie die anderen Bilder nachgeladen werden. Lädst du die Seite nun noch einmal neu, wird auch hier nur das Bild geladen, das für den aktuelle Viewport vorgesehen ist. ## Demo zum Ausprobieren @@ -132,7 +132,7 @@ In dem folgenden Codepen[^2] habe ich das Bildmotiv in anderer Konstellation nac Ich wünsche viel Spaß beim Ausprobieren! -