Responsive Bilder

Bilder sind zu einem sehr wichtigen Teil von Internetseiten geworden.

Es gibt kaum eine Seite, die darauf verzichten kann. Doch wie sollte ich Bilder in meiner Seite verwenden und wieso?

Die Überlegungen

Zuerst sollte ich mir Gedanken darüber machen, was ich mit dem Bereich, in dem das Bild später eingebunden wird, machen möchte.

Ist das Bild wichtig um den Text zu verstehen? Wird im Text auf etwas konkretes Bezug genommen, das sich erst zusammen mit dem Bild offenbart?

Ein Beispiel hierfür wäre dieser Absatz im Artikel zu Problemen beim Post Erstellen wo direkt auf das Bild Bezug genommen wird. (https://wp-entwickler.at/problem-beim-post-erstellen-bei-300-000-posteintraegen-eltern-dropdown-page-parent-entfernen/)

In diesem Bild wird verdeutlicht, welchen Stellenwert Bilder für das Verständnis von Text haben können.
Ein Bild mit direktem Bezug zum Text

Oder ist es einfach nur ein Bild, das zur Dekoration bestimmter Bereiche dient, damit diese nicht so „nackt“ aussehen?

Unsere Homepage verwendet für den Hintergrund des Headers ein Bild rein zur optischen Verschönerung.

Aber warum ist das überhaupt Thema und warum sollte mich das interessieren?

Die Zauberwörter heißen „performance“ und „accessibility“

Zum Einen sind inline-Bilder so zusagend „sprechend„. D.h. auch Screen-Reader können damit umgehen! Wir würden also einer bestimmte Gruppe weniger gute Informationen liefern, wenn wir alles mit Hintergrundbildern lösen würden.

Daher sollten wir unsere inline-Bilder auch mit den nötigen HTML-Attributen wie „title“ und „alt“ versehen. Wobei wir hierfür nicht die selben Werte verwenden sollten! Wohingegen der „title“ als Tooltip wie bei Hyperlinks angezeigt wird, so wird „alt“ eben als Alternative zum Bild angesehen und nur dann angezeigt, wenn das Bild nicht geladen wird. Wie eben bei Screen-Readern.

Zum Anderen können wir inline-Bilder mit den Attributen „srcset“ und „sizes“ ausliefern. D.h. wir können auf kleineren Geräten auch kleinere Bilder anzeigen, was das Surferlebnis der Nutzer verbessert und zusätzlich weniger Daten verbraucht.

Der letzte Punkt könnte aber hoffentlich bald Vergangenheit sein. Es gibt bereits erste Implementierungen dieser Technik in Chrome und Safari als „image-set„.

Die Mechaniken

Um Bilder in Websites anzuzeigen, gibt es 2 Möglichkeiten. Wir notieren sie ganz einfach im HTML-Code als inline-Bild. Entweder mit „img“ oder mit „picture“.

<img src="images/super_tolles_bild_1.png"      srcset="images/super_tolles_bild_1-300x300.png 300w,      images/super_tolles_bild_1-150x150.png 150w,      images/super_tolles_bild_1.png 512w"      sizes="(max-width: 300px) 100vw, 300px"      alt="Bild eines supper tollen Bildes im Bild des Beitrags"      title="Beispielbild für ein inline-Bild" />
<picture>      <source srcset="images/super_tolles_bild_1-150x150.png"          media="(max-width: 150px)">      <source srcset="images/super_tolles_bild_1-300x300.png"          media="(max-width: 300px)">      <img src="images/super_tolles_bild_1.png"          alt="Bild eines supper tollen Bildes im Bild des Beitrags"          title="Beispielbild für ein inline-Bild" />  </picture>

Oder wir notieren das Bild in einem Stylesheet und geben es als „Hintergrundbild“ (background-image) aus.

.super_tolles_bild_1 {      background-image: url( 'images/super_tolles_bild_1.png' );      background-repeat: no-repeat;      background-size: 100% auto;  }

Was bedeutet das jetzt für uns Entwickler und was können wir im WordPress Kontext daraus machen?

Wir alle wissen, dass es viel einfacher ist, ein `background-image` so in Szene zu setzen, dass es immer gut aussieht.

Egal ob am Desktop oder am Smartphone.

Background-images sind schön responsiv und passen sich gut der darüber liegenden Box an.

Doch wie wir gerade gesehen haben, sollten wir darauf achten, dass wir gerade für Beiträge oder Seiten Bilder besser als inline-Bilder realisieren. Immerhin werden diese Bereiche nicht von uns selbst genutzt, sondern auch von nicht so technisch versierten Menschen, denen wir damit Arbeit und Ärger ersparen können.

Im WordPress Kontext ist das ganze einfach geregelt. Wir haben Funktionen, die uns das fix fertige inline-Bild als HTML ausgeben. Bereits mit „srcset“ und „sizes“.

get_the_post_thumbnail();  wp_get_attachment_image();

Für „alt“ und „title“ gibt es zwar auch Mittel und Wege das programmatisch zu lösen, aber das kann auch schnell nach hinten los gehen und als Bevormundung des Nutzers wahrgenommen werden.

Aber das Bild passt einfach nicht rein :-(

Wenn wir es nicht schaffen, das Bild mit CSS so zu positionieren, dass es immer den nötigen Platz einnimmt, sollten wir einfach mal kontrollieren, ob wir das Bild nicht besser in einer anderen Größe laden können.

Besonders bei eher strikten Designs kann es immer mal vorkommen, dass die Bilder nebeneinander immer auf selber Höhe eingebunden werden müssen.

Zwei Beitragsbilder vermeintlich unterschiedlicher Artikel auf gleicher Höhe

Wenn der Nutzer nun ein 600px und ein 1485px breites Bild für diese 2 Bilder verwendet, kann es zu Problemen im Design kommen.

Dieses Problem lässt sich leicht lösen, indem man nach der passenden „image_size“ sucht.

Image_was?

Beim Aufruf der bereits genannten Funktionen können wir sowhol die ID des Bildes mitgeben als auch nach einer bestimmten image_size abfragen, die die „Rahmenbedingungen“ für das Bild festlegen.

WordPress bearbeitet jedes Bild, das wir über den Media-Uplaoder hochladen und fertigt davon kleinere Versionen an. Diese Versionen werden dann für die „srcset“s verwendet.

Eine Liste mit allen von WP definierten image_sizes:

thumbnail    => Thumbnail (150 x 150 hard cropped)  medium       => Medium resolution (300 x 300 max height 300px)  medium_large => Medium Large resolution (768 x 0 infinite height)  large        => Large resolution (1024 x 1024 max height 1024px)  full         => Full resolution (original size uploaded)

Wenn wir für unseren Zweck nicht die passende Größe finden, können wir entweder eine dieser bestehenden Größen ändern, oder wir erstellen uns eine eigene.

update_option( 'large_size_h', 850 );  update_option( 'large_size_w', 480 );  update_option( 'large_size_crop', 1 );

Zum Erstellen der eigenen image_size verwenden wir:

add_image_size( $name, $width, $height, $crop );

Aber was verwende ich denn nun?

Auch hier sollten wir abwägen, ob eine zusätzliche image_size notwendig ist.

Immerhin werden dadurch alle hochgeladenen Bilder in einer weiteren Version bereitgestellt. Das verbraucht natürlich zusätzlichen Speicherplatz!

Aber auch das Anpassen der bestehenden image_sizes ist nicht ohne Risiken. Immerhin wollen wir nicht kontrollieren ob nicht ein anderes Plugin auf eine dieser Größen vertraut und wir uns dadurch unnötigen Ärger einfangen.

Im Zweifel lässt sich aber sagen, dass es für Beitragsbilder eigentlich immer gerechtfertigt ist, eine weitere image_size zu erstellen.

Quellen und weiterführende Links: