Gutenberg und variable Bildgrößen

Über Gutenberg eingebundene Bilder sind nicht immer automatisch für verschiedene Auflösungen optimiert – achten Sie auf die Fallstricke!

Mit neuer Technologie kommen auch neue Probleme, die in der Vergangenheit bereits gelöst waren – hier geht es um variable Bildgrößen.

Es gibt verschiedene Webtechniken, die in aktuellen Browsern dafür sorgen, dass Bilder in den richtigen Auflösungen geladen werden – Gutenberg unterstützt sie teilweise – eine Bestandsaufnahme.

One Size Fits All? Leider nicht.

Früher musste eine Bildauflösung für verschiedene Endgeräte reichen – eine immerwährende Suche nach dem Kompromiss zwischen hohen Bilddetails und matschiger Performance. Beispiel:

<img src="image.png">

Es ist offensichtlich, dass eine Bilddatei nicht alle Auflösungsformate abbilden kann, sondern stets nur eins. Ob Retina-Smartphone, quer- oder hochformat, Tablet, Ultrabook, Desktop-Monitor oder 4k Fernseher: Es gibt unzählige unterschiedliche Geräte und damit Auflösungen. Im Responsive-Design wird das Layout der Website fließend an die verschiedenen Formate angepasst – und trotzdem immer ein gleich großes Bild geladen – das muss besser gehen.

Nehmen Sie unsere Website als Beispiel: Das nötige Format für Desktop oder Mobilauflösung ist für das Beitragsbild völlig unterschiedlich: Auf Desktop wird eine andere Auflösung benötigt, als auf Mobil.

Bildgrößen abhängig von der Bildschirmauflösung

Um Bilder für verschiedene Bildschirmgrößen zu laden, gibt es inzwischen die Möglichkeit, abhängig von der Bildschirmgröße dem Browser verschiedene Bildauflösungen zu übermitteln – er lädt dann möglichst das Bild passend zur Auflösung:

<img src="image.png" srcset="image.png 1500w, image-1000x500.png 1000w, image-500x250.png 500w, image-250x125.png 250w">

Das srcset-Attribut listet weitere Alternativgrößen des Bildes auf. In diesem Beispiel gibt es an, dass die Original image.png 1500 Pixel breit ist, die image-1000×500.png 1000 Pixel und so weiter. Die wichtige Information für den Browser ist daher, dass er schon vor dem Laden der Bilder weiß, in welchen verschiedenen Auflösungen sie vorliegen. Stoppen wir hier, wird die Breite des Bildes mit der Breite der Bildschirmauflösung abgeglichen – so wird zumindest möglichst ein Bild geladen, das nicht größer als die Bildschirmbreite ist. Das würde z.B. möglichst verhindern, dass ein 4k großes bild auf einem FULL-HD-Bildschirm geladen wird, wenn eine FULL-HD-Variante in srcset angegeben wurde.

Bildgrößen abhängig von Slotbreite

Leider hilft uns die Bildschirmauflösung als Schwellenwert nicht immer weiter. Dieser Weg funktioniert im Grunde nur, wenn es keine unterschiedlichen Layouts gibt, also z.B. alle Bilder immer eine gleiche Breite haben und diese sich nur an die Bildschirmauflösung anpassen müssen.

Auf vielen Websites sind Bilder aber unterschiedlich gelayouted. Eine Sidebar könnte auf manchen Unterseiten aktiv sein, auf manchen nicht. Bilder könnten die gesamte Bildschirmbreite einnehmen (Full Width) oder aus der breite des Inhalts ausbrechen (Wide Width). Aber auch wenn Bilder nicht größer sind, als die Breite des Fließtextes, können sie in Spalten strukturiert sein:

Spaltenbreite

Gerade die Verwendung von Spalten im Layout des Inhalts verkompliziert alles: In Desktop-Auflösung werden die Spalten nebeneinander angezeigt, haben also jeweils eine geringere Breite, als auf Mobil, wo sie umbrechen untereinander angezeigt werden.

Fließtextbreite

Die Bilder sind auf Mobil daher größer und so müsste hier auf Mobil ein höher aufgelöstes Bild geladen werden, auf Desktop reicht eine kleinere Variante.

Mit Desktop-Auflösung hat ein Bild durch die Spaltenansicht eine Breite von 172 Pixeln.
Mit Mobil-Auflösung werden die Spalten untereinander dargestellt und erhalten so eine Breite von 335 Pixeln.

Slotbreite festlegen

Wenn wir also wissen, wie breit die einzelnen Slots sein werden, in denen Bilder dargestellt werden sollen, können wir diese über das sizes-Attribut festlegen:

Mithilfe des sizes-Attributs können Media-Queries genutzt werden und abhängig davon Schwellen festgelegt werden, wie groß denn der Slot ist, den das Bild einnimmt. Für die Slot-Größe können Einheiten, wie Viewport (vw), Pixel (px) oder em (relative Größe), nicht aber Prozent gewählt werden.

<img src="image.png" srcset="image.png 1500w, image-1000x500.png 1000w, image-500x250.png 500w, image-250x125.png 250w" sizes="(max-width: 250px) 250px,(max-width: 500px) 500px,(max-width: 1000px) 1000px,  1500px">

Nehmen wir den o.g. Code einmal auseinander.

4 Bilder liegen als Ressourcen (srcset) vor:

  • 1500 Pixel Breite
  • 1000 Pixel Breite
  • 500 Pixel Breite
  • 250 Pixel Breite

Außerdem wird für drei verschiedene Auflösungsschwellen (sizes) festgelegt, welches Bild geladen werden soll:

  • Bildschirmbreite maximal 250 Pixel: Lade 250 Pixel Bild
  • Bildschirmbreite maximal 500 Pixel: Lade 500 Pixel Bild
  • Bildschirmbreite maximal 1000 Pixel: Lade 1000 Pixel Bild
  • Ansonsten wird wieder das Originalbild geladen, also das 1500 Pixel breite Bild

Slotbreiten berechnen

Jetzt wird es schwierig und bisher hat auch das WordPress-Gutenberg-Team hierfür noch keine finale Lösung gefunden: Wie wir dann jeweils für jedes Bild die Slotbreiten berechnet? Im Grunde am Besten hierzu geeignet wären die Browser selbst: Sobald eine Website gerendert ist, weiß der Browser, wie breit der Slot ist und könnte aus den unter src

WordPress nutzt Responsive Images – aber nicht richtig.

Werden zusätzlich Spalten verwendet, wird die Diskrepanz noch größer – Briefmarkengroße Bilder werden in voller Auflösung geladen. In diesem Beispiel das ca. 1500 Pixel große Original. Zur Verfügung stünde zwar auch eine Version mit 250 Pixeln Breite – doch die wird nur geladen, wenn das Browserfenster maximal 250 Pixel breit ist.

Zwar erlaubt der Bilder-Block die Auswahl der Bildgröße in den Blockeinstellungen – hier fehlen uns aber wichtige Informationen – dazu später mehr.

Cover-Block

Der Cover-Block zeigt Bilder immer in der Originalgröße an – Bilder in Kameraauflösung können dann gern mal 6000 Pixel breit sein. Obwohl WordPress beim Upload in die Mediathek automatisch mehrere Auflösungen für ein Bild erstellt, wird bei Cover-Blöcken immer die Originalauflösung verwendet. Grund ist, dass das Bild als Hintergrundbild eingebettet wird. Auch hierfür gibt es technische Alternativen, die allerdings nicht genutzt werden.

Lösungsansätze

Bild manuell verkleinern

Bearbeiten Sie das Bild in WordPress, so dass es eine geringere Auflösung erhält.

Derweil können Sie sich an der Diskussion auf GitHub beteiligen.