Von Bildern und Ladezeiten

Wie wir inzwischen alle wissen, hat die Relevanz von kurzen Ladezeiten deutlich zugenommen. Nicht nur, weil wir uns bessere Google-Rankings davon versprechen, sondern auch, weil wir aus allen Ecken und Enden des Internets zu hören bekommen, dass die Conversion-Rate stark unter langsamen Seiten leidet. Und je mehr die User mobil zugange sind, desto wichtiger kann dieser Faktor eigentlich nur werden. Hier kümmern wir uns um perfekte Ladezeiten – von Bildern!

Ein ordentliches und sinnvolles Caching, der Einsatz einer Komprimierung, Einsparung von Requests und die Minimierung des Codes bilden dabei inzwischen schon fast den Standard. Aber da gab es ja auch noch dieses Link-Prefetching, Prerendering, Lazy Loading, Content Delivery Networks…. Ja, das Thema ist inzwischen zu einer solchen Breite herangewachsen, dass man sich als Suchmaschinenoptimierer ohne Spezialisierung auf dieses Thema oftmals auf verlorenem Posten fühlt. Klar, man muss die ganze Sache nicht ins Extreme treiben, schließlich handelt es sich bei Pagespeed-Optimierung um ein „Open-End-Thema“, aber zumindest um die Möglichkeit der verschiedenen Optimierungen sollte man wissen.

Responsive Bilder

Was ein wenig verwundert ist, ist dass dem Thema „Bilder“ in jüngerer Vergangenheit und diesem Zusammenhang weniger Beachtung geschenkt wurde als erwartet. Dabei bietet HTML5 doch wunderbare neue Möglichkeiten.

Picture-Tag

Leider hat der Picture-Tag noch verhältnismäßig wenig Wirbel verursacht, obwohl er eine super Lösung darstellt um Bilder responsive einzubinden. Und damit bringt er einige Vorteile mit sich.

  • Er spart Ladezeit
  • Er spart Datenvolumen
  • Bestimmte Bereiche können auf kleinen Displays fokussiert werden
  • Bilder können in unterschiedlichen Auflösungen ausgeliefert werden

Lange Zeit scheint er von vielen SEOs allerdings nicht derart stark wahrgenommen worden zu sein, weil die Unterstützung der Browser auf sich warten ließ.

Allerdings unterstützen ihn die gängigen großen Browser inzwischen.

Der Firefox tut es, Chrome in der Desktop- als auch der Android-Variante bereits ab Version 38 (aktuell haben wir 48) , Opera und… wer hätte es gedacht, sogar Microsoft Edge, dem Nachfolger des Internet Explorers (, welcher natürlich keine Unterstützung liefert).

Die Implementierung ist an sich auch nicht gerade eine Doktorarbeit. Nehmen wir als Beispiel das Header-Bild unserer CONTENTmanufaktur-Seite.

Hier haben wir es zur Veranschaulichung der Funktionsweise  mit dem Picture-Tag implementiert. (Oberes Bild)

Einbau von Responsive-Bildern

Zur Implementierung

Wenn ihr nun den Browser zusammenschiebt, seht ihr, dass das obere Bild in unterschiedlichen Größen bezogen wird. Da man ein solches „Schiebeverhalten“ allerdings beim alltäglichen Surfen nur selten an den Tag legt, wird jeweils lediglich die entsprechend passende Größe des Bildes geladen.

Übrigens können hier noch Angaben über die Auflösung ergänzt werden, sodass auch jedem Retina und 4K-Display gerecht werden kann.

Die Einbindung erfolgt so:

Code-Beispiel-Responsive-1

Implementierung über Picture-Tag

Das normale img-Tag definiert hier nur eine Fallback-Variante, beispielsweise für Browser, welche noch keine technische Unterstützung liefern.

Responsive-Bilder im img-Tag mit sizes & srcset

WordPress-Nutzer dürfen sich jetzt eine Runde freuen, denn mit der Version 4.4 wurden die dafür notwendigen Attribute „sizes“ und „srcset“ ohnehin mit in den WordPress-Core aufgenommen.

Code-Beispiel-Responsive-wordpress

Code-Auszug aus WordPress

Da nun aber nicht jeder WordPress einsetzt oder einsetzen kann, (was die Welt aller Webarbeiter aber wohl definitiv einfacher machen würde :-), zeigen wir hier, wie einfach die Implementierung von Responsive-Bildern doch sein kann.

Bei der unteren Einbindung unseres Header-Bildes nutzen wir einfach die Attribute „sizes“ und „srcset“ innerhalb des altbekannten img-Tags.

Code-Beispiel-Responsive2

Überlässt dem Browser die Qual der Wahl. Implementierung mit „sizes“ und „srcset“.

Wie ihr allerdings seht, variieren die beiden Einbindungen. Die obere Implementierung orientiert sich an der Größe des Displays, während sich die untere nach dem anfragenden Viewport richtet. Sofern die Bilder im zusammengeschobenen Zustand geladen und dann auf die Breite gezogen werden, bedarf es bei der Einbindung mittels der Angabe de Viewports eines Reloads um das Bild in der richtigen Auflösung zu laden. Allerdings ist dieser Fall bei mobiler Nutzung ausgeschlossen.

Interessant zu sehen ist auch, wie die unterschiedlichen Browser auf die beiden Einbindungen reagieren. Bislang scheint der Firefox mit der größten Toleranz ausgestattet zu sein und lädt beide Bilder in der korrekten Größe.

WebP Bildfomat

Zusätzlich lässt sich noch einiges an Ladezeit einsparen indem man auf das richtige Format setzt.

WebP ist ein Image-Format und bringt einige Vorteile mit sich. Unter anderem lässt es sich verlustfrei komprimieren und ist selbst dann noch 26 % kleiner als PNG. In der „lossy“-Version sind es im Vergleich zu JPEGs sogar 25-34% bei gleichem SSIM-Index. Der SSIM-Index dient zur Vergleichbarkeit von zwei Bildern und kann somit herangezogen werden um Qualitätsunterschiede auszudrücken. Weitere Infos finde ihr hier.

Wie auch PNG unterstützt WebP Transparenz, wofür lediglich 22% mehr Bytes benötigt werden. Im Vergleich zu transparenten PNGs sind WebPs damit durchschnittlich um das Dreifache kleiner(siehe Studie)

Auch hier haben wir für euch einen Test erstellt, bei welchem ihr euch selbst das Urteil bilden könnt, ob das Bild an Qualität verloren hat.

WebP vs. PNG - Ladezeit einparen mit kleineren Dateien.

Zum Test

 

Allerdings sprechen die Fakten für sich: Während das PNG 184 KB in Anspruch nimmt, benötigt das WebP-Bild nur 34,4KB… und das ist doch mal was. Obacht allerdigns: Noch nicht alle (gerade mobile Browser) können damit umgehen, weswegen auch hier an eine Default-Variante gedacht werden sollte. Aber hey, dafür gibt es ja weiter oben Lösungen. J

Umgewandelt werden können JPGs und PNGs beispielsweise mit dem Tool „cwebp“. Allerdings sind dies „Command Line Tools“ – ein bisschen Nerd-Faktor gehört eben dazu. J

Na gut… und für alle anderen gibt es natürlich auch einen Online-Converter. image.online-convert.com/convert-to-webp

Habt ihr noch weitere Ladezeiten-Tipps für Bilder?

Solltet ihr Lust zu diskutieren haben, sind euch Fehler aufgefallen oder wollt ihr einfach mal „Hallo“ sagen? Dann nutzt doch bitte unsere Kommentar-Funktion. Wir freuen uns stets über euer Feedback!

Ps. Ihr brauch Hilfe bei eurer eigenen Ladezeit-Optimierung? Wir kennen da so eine Firma… Hier findet ihr sie.

GD Star Rating
loading...
Von Bildern und Ladezeiten, 4.5 out of 5 based on 6 ratings

Max Bloch

Das Thema "Online" begleitet Maximilian Bloch (29) seit inzwischen zehn Jahren. Er studierte Wirtschaftsinformatik an der Hochschule Augsburg und war als SEO-Consultant bzw. Senior SEO-Consultant bei der CONTENTmanufaktur tätig. Momentan ist er als Senior Online Marketing Manager für die technische Suchmaschinenoptimierung der Allianz Deutschland AG verantwortlich und betreut mit seinem SEO-Atelier Kunden und Websites aller Größen hinsichtlich SEO, Online Marketing-Strategie und Workshops. Weiterhin übernimmt er eine Dozentenrolle für Suchmaschinenoptimierung bei der Akademie der Bayerischen Presse (ABP).

More Posts - Facebook

Kommentare (7)

  1. tom

    Solange der IE keine Unterstützung bietet sehe ich da noch zu wenig Relevanz.

  2. Michael Haufler

    WebP tut bei mir nich mal im aktuellen FF und auch nicht in Safari. Damit ist es glaub eher so ein Nieschen Ding für Chrome.

  3. Pingback: Top 10 der Woche 07/16 - SEO-united.de Blog

  4. Pingback: Von Bildern und Ladezeiten - iWORK

  5. Max

    Ja das stimmt, aktuell unterstützt es der FF noch nicht. Allerdings könnte man es ja mit einer Fallback für die nicht unterstützenden Browser einbinden, ähnlich wie im ersten Beispiel. Also quasi eine Kombination aus beiden Beispielimplementierungen. Bei der starken Verbreitung von Chrome, könnte das Sinn machen.

  6. Adrian Jost

    Danke für die vielen guten Tipps auf dieser Seite. Wir verwenden das adaptive images Script in einer auf unserer Bedürfnisse angepassten Version und sind sehr zufrieden, da mit wenig Aufwand (bei einer lokal begrenzen Seite lohnt sich mehr nicht) ein sehr gutes Ergebnis erreichen kann. Link: http://adaptive-images.com

    Verwenden tuen wir es auf der mobilen Version von http://archenhold.de und um viele verschiedene Größen eines Bildes anbieten zu können. Wir haben das Programm dazu so umgeändert, dass wir jedem Bild die gewünschte Ausgabegröße in der URL übergeben können.

  7. Pingback: likri.com

Kommentare sind geschlossen.