Gedanken-Tüdelüt (43): Gestochen scharfe Bilder für Retina-Displays einbauen

Da haben wir den Salat und genau das, was ich befürchtet hab: ich hab für die heutige Kolumne überhaupt kein Thema. Liegt zum einen daran, dass ich mich ausschließlich mit privatem Kram beschäftigt hab, außerdem ist auch nicht wirklich viel passiert – zumindest nichts, über das ich aktuell schreiben kann, will oder muss.

Ich hatte dann erst überlegt, einfach mal die aktuellen Schlagzeilen vom heutigen Morgen zu kommentieren – aber bei all der Fake-News-Schwemme und den unqualifizierten Meinungsäußerungen, nach denen keiner gefragt hat, braucht es nicht auch noch eine zusätzliche von mir.

Ein Rant über Schleichwerbung wäre auch noch eine Möglichkeit gewesen, aber letztendlich wird sich auch da nichts dran ändern, wenn nicht mal jemand endlich mit der Anwaltskeule Amok läuft. Wer allerdings Abmahnungen ohne vorherigen, vernünftigen Kontakt nun als Mittel der Wahl in Betracht zieht … das fühlt sich auch einfach nicht richtig an.

Was aber immer geht: hilfreiche Tipps, auch wenn es nur einen kleinen Kreis anspricht. Eine gute Tat am Tag und so, ihr wisst schon.

Denn bei der letzten Bloggerbutze kam auch die Frage auf, wie man mit Retina-Displays bei seinem Blog umgehen kann oder soll. Denn im Grunde ist die Lösung recht einfach: lad ein Bild in doppelter Größe hoch, der Browser wird das schon runterrechnen.

Kann man machen und hab ich so als Lösung auch von einem Theme-Entwickler schon lesen müssen. Diese Lösung taugt allerdings nur bedingt, denn warum sollte ich ein Retina-Bild auf einem Bildschirm laden, der gar kein Retina unterstützt und für den das Bild schlichtweg zu groß ist? Das ist unnötiger Datenmüll und wird auch von Google nicht unbedingt als geil angesehen – zu Recht. Denn letztendlich gilt auch hier genauso: wir haben in Deutschland nun mal keine unbegrenzten Datenvolumina (außer für den Preis eines Einfamilienhauses) und entsprechend als Webseitenbetreiber auch sowas wie eine Verantwortung unseren Nutzern gegenüber. Wer mehrere MB bei jedem Seitenaufruf durch die Leitung schubst, gehört geteert und gefedert. So viel wie nötig, so wenig wie möglich ist die Devise.

Die viel bessere Lösung

Außerdem gibt es eine viel bessere Lösung, die sich sogar ziemlich leicht implementieren lässt. Ich hab das hier in den letzten Tagen lediglich für statische Bilder gemacht (was Mumpitz ist, schließlich sind die meisten Bilder statisch), da die Beitragsbilder je nach Quelle schon von Haus aus kaum zu retten sind.

Der heilige Grahl in diesem Falle lautet: srcset.

Wer sich den Quelltext diverser Seiten anschaut, wird genau dieses Attribut schon häufiger gesehen haben, WordPress hat das mit Version 4.4 ebenfalls eingeführt. Das Attribut dient letztendlich dazu, den Browser entscheiden zu lassen, wann er welche Bildvariante nehmen kann – je nachdem, wie es aktuell am besten passt. In erster Linie ist das für responsive Designs interessant, aber der Grund ist stets der Gleiche: warum soll ich ein größeres Bild laden, wenn es auch kleiner geht?

Und genau dieses Attribut kann man auch für die Retina-Geschichte nehmen. Nehmen wir das Beispiel mit dem kleinen Spotify-Bild, dass wir hier im Footer einsetzen. Wer mit einem Retina-Display schaut, sieht das Bild gestochen scharf (hoffentlich), alle anderen in der üblichen Qualität – hier noch mal direkt als Beispiel:

non-Retina:

Retina (wer kein Retina-Display hat, sieht keinen Unterschied):

Gut oder? Der Unterschied ist: beide Male sind es unterschiedliche Bilder, nämlich ein Mal in nativ 300px Breite für das non-Retina-Bild und einmal in 600px Breite für das Retina-Bild. Also wieder doppelte Größe, wie eingangs schon erwähnt, nur das der Browser durch das srcset-Attribut selbst entscheidet, welche Variante am Ende darstellt.

Der eingebundene Code dafür sieht wie folgt aus:

<img src=”https://www.wihel.de/wp-content/uploads/2017/01/spotify_logo_rgb_green_wihel-4.png” srcset=”https://www.wihel.de/wp-content/uploads/2017/01/spotify_logo_rgb_green_wihel-3.png 1x, https://www.wihel.de/wp-content/uploads/2017/01/spotify_logo_rgb_green_wihel-4.png 2x” width=”300″ height=”300″ />

Wer sich das srcset-Attribut genauer anschaut, sieht auch gleich die unterschiedlichen Bildvarianten, jeweils mit dem Hinweis “1x” oder “2x”. Die 1x-Variante ist die für non-Retina-Displays, die 2x-Variante für Retina-Displays. Wichtig ist natürlich, dass ihr dem Browser noch mitgebt, wie breit das Bild maximal sein darf – ansonsten wird das Bild in voller Größe dargestellt.

Finde ich ziemlich selbsterklärend, extrem einfach zu nutzen und deutlich besser als jedem direkt die teils zu große Variante um die Ohren zu klatschen.

Wer das ganze auch noch für alle anderen Bilder nutzen möchte, kann das gern manuell tun oder schaut sich einfach mal WP Reti­na 2x an. Nutze ich selbst nicht, wurde mir aber bei meiner Recherche immer wieder empfohlen.

Wer darüber hinaus mag, kann sich auch mal im News-Bereich auf unserer Hostingseite umschauen, da gibt es immer wieder mal ein paar nette Tipps in Sachen WordPress.