Eine Website, drei Internetauftritte. Verursacher sind hierfür Smartphones, Tablets und Großbildschirme. Je nachdem, auf welchem Gerät man eine Website aufruft, richten sich vor allem Bilder nach ihren Umständen. Infolgedessen besteht die Möglichkeit, dass eigentlich angepasste Bilder, völlig verzerren. Die Lösung: Wir brauchen effiziente Bilder, die sich individuell an jede Situation anpassen.

Was ist die Herausforderung?

Nachdem wir schon einiges über Bilder in dem Beitrag „Worauf Sie beim Einfügen von Bildern unbedingt achten sollten“ gelernt haben, folgt nun ein weiterer Teil. Dieser zweite Beitrag zum Thema „Bilder einfügen“ beschäftigt sich intensiver mit dem Verhältnis von Bild und Theme sowie den verschiedenen Größen eines Thumbnails. Worauf muss ich zum Beispiel achten, wenn ich einen Themenwechsel durchführen will? Wie kann ich die Ladezeit einer bilderreichen Website verkürzen?
Wie wir schon anhand des anderen Beitrages erfahren haben, gibt es für Bilder verschiedene Größen. Es gibt die Größen „Thumbnail“ (dt. Daumennagel),“Medium“, „Large“ und „Full Size“.

Wo finde ich diese Einstellung?

Zuerst muss man „Einstellungen“ in der linken Menüleiste aufrufen. Anschließend die Unterkategorie „Medien“ auswählen. Nun sollte sich einem folgendes Bild offenbaren:

Bildgröße unter Einstellungen > Medien bestimmen

Die beliebteste Bildeinstellung ist „Maximale Bildgröße“ (=Large).
Allerdings entwickelt sich hier schon das erste Problem: Je größer das Bild, desto länger die Ladezeit. Eine lange Ladezeit hat häufig zur Folge, dass viele potentielle Besucher vorzeitig von Ihrer Website abspringen. Schließlich will niemand lange warten. Unser Ziel: Schnell und einfach die gewünschten Informationen erlangen.

Faule Bilder: Der Weg zur kürzeren Ladezeit?

Wie oben angesprochen, ist eine intensive Ladezeit oftmals der Grund, wieso mögliche Interessenten die Website vorher verlassen wollen. Dabei hat man es ja eigentlich nur gut gemeint: Viele und vor allem große Bilder, um einen tollen ersten visuellen Eindruck zu hinterlassen. Hinzu kommen am Ende die verlinkten Icons bekannter Netzwerke, um die Erreichbarkeit und Kundenbindung zu stärken. Alle Hausaufgaben richtig gemacht, oder?
Zwar sind die ganzen Features schön und gut, sie fressen allerdings beim Aufrufen einer Website unheimlich viel Ladezeit. Gerade dann, wenn noch eine Kommentarfunktion am Ende der Seite hinzukommt, bei der viele kleine Profilbildchen geladen werden müssen. Das bedeutet jetzt keineswegs, dass sowohl die Kommentarfunktion, als auch die verlinkten Icons entfernt werden müssen. Nein, es gibt eine andere Lösung, sie heißt: Lazy Load.
Lazy Load ist ein Plug-in, welches verursacht, dass Bilder nur dann angezeigt werden, wenn man diese auch wirklich verlangt. Führt man seine Internetpräsenz beispielsweise ohne Lazy Load, werden beim Aufrufen alle Bilder, die sich auf der Website befinden, von Anfang an mit geladen. Dieser Vorgang nimmt logischerweise viel Zeit in Anspruch. Installiert man stattdessen Lazy Load und ruft diese Website erneut auf, wird einem auffallen, dass Bilddateien, die sich weiter unten befinden, nur durch das Scrollen geladen werden.
Wie profitiere ich davon? Für gewöhnlich liest man Internetseiten von oben nach unten. Nach dem schnellen Aufrufen aufgrund Ihrer Lazy-Load-Website, kann ein Interessent schon erste Eindrücke sammelt, da sich alle unteren Bilder noch in der Ruhephase befinden. Leser, die sich noch weiter informieren wollen, beginnen herunter zu scrollen. Es folgt der oben erläuterte Auftritt von Lazy Load. Ein weiter Vorteil: Wenn sich jemand nur über den Inhalt Ihrer Website informieren möchte, müssen die für ihn irrelevanten Features (Kommentarfunktion, Icons) nicht mit geladen werden.

Alte Bilddatei, neues Theme. Was jetzt?

Das Problem: Manchmal fühlt man sich einfach nach einem Tapetenwechsel. Also schnell ein neues Theme ausgesucht und installiert, die neue Maske über die alten Beiträge gestülpt: Fertig! Oftmals kann es dann aber passieren, dass sich die Bilder nicht mit verwandelt haben und nun alle samt in falschen Größen angezeigt werden.
Der Grund: Jedes Theme hat eine eigene Thumbnail-Größe, die sich leider nicht automatisch anpasst. Ein Beispiel:

Wie auf dem Bild zu erkennen, verstehen die ausgewählten Themes unter ein und der selben Bezeichnung eine andere Größe. Infolgedessen werden alle Thumbnails beim Aktualisieren automatisch verzerrt. Was nun?
Die Lösung: Es gibt Plug-ins, die das Problem beheben. Der unten aufgelistete Regenerator verändert die Thumbnails automatisch, bedeutet, es muss nicht jedes einzelne Bild von Ihnen manuell formatiert werden. Hier unsere Empfehlung, mit der wir sehr gute Erfahrungen gemacht haben: AJAX Thumbnail Rebuild

AJAX Thumbnail Rebuild in Aktion

Hochauflösende Bildschirme

Und wenn wir hier schon am Rendern sind, können wir Ihnen gleich noch etwas ans Herz legen. Stichwort: Hochauflösende Bildschirme wie Apples Retina-Display. Während die Standard-Bildschirme alle Medien in guter Qualität anzeigen, sehen Benutzer, die Ihre Website mit einem Retina-Display aufrufen, tendenziell verschwommene Bilder. Doch damit jede Internetpräsenz in voller Pracht strahlen kann, hat sich jemand aus der WordPress-Community diesem Problem angenommen. Dabei herausgekommen ist ein Plug-in, welches je nach Bildschirmauflösung die passende Bildgröße ausliefert. Fotos und Bilder, die bisher eine zu geringe Auflösung haben, können Sie einfach durch größere Versionen per Drag and Drop austauschen: WP Retina 2x

WordPress Bilder für Restina Displays austauschen

Groß ist gut, denn kleiner geht immer!

Wollen Sie langfristig Ihre Internetpräsenz planen, dann haben wir einen Tipp an dieser Stelle: Versuchen Sie Ihre Bildgrößen schon mit einem vorausschauenden Blick zu organisieren. Das bedeutet: Alle Medien sollten bereits jetzt so groß gewählt sein, dass man jederzeit ein neues Theme anwenden könnte. Unser Motto: Groß ist gut, denn kleiner geht immer.
Ein Beispiel: Angenommen man hat seine gesamte Website nur mit kleinen Fotos bestückt. Deren Pixelgröße beträgt die höchst mögliche Anzahl (690 px), die das Theme zulässt. Nun aber möchte man zu einem neuen, bildintensiven Theme wechseln. Die kleinst möglichste Pixelgröße beträgt 1200 px. Man steht jetzt vor dem Problem, dass die Pixelanzahl des alten Themes nicht mit dem Neuen übereinstimmen. Die Bilder der Website wirken verloren und unpassend. Diese Komplikation hätte allerdings vermieden werden können, wenn man schon vorausschauend höhere Pixelgrößen in sein altes, kleineres Theme eingetragen hätte. Außenstehende werden auch bei zu großer Größe keinen Unterschied an den Bildern Ihrer Website erkennen können. Wie gesagt: Kleiner geht immer, größer leider nicht.

Die Zukunft: Responsive Images

Die Zukunft lautet RICG Responsive Images. Responsive Images sind Bilder, welche sich für jede Situation (Tablet, Smartphone, PC) neu ausrichten können. Und das funktioniert folgend: Der Browser legt für jedes Bild drei Vorlagen an. Ein kleines für Smartphones, ein mittleres für Tablets und ein großes für Computer Bildschirme. Ruft nun ein Interessent Ihre Website auf, erkennt der Brower mit welchem Gerät dieser unterwegs ist und passt dann alle Bilder dementsprechend an. Ein weiterer Beitrag, der dieses brandneue Plug-in intensiver behandelt, wird folgen.