- nicht immer ist das Netz schnell. Wenn du mit dem Smartphone unterwegs bist, kann’s schon mal sehr zäh werden. Und du solltest daran denken: Je nach Zielgruppe wird so eine Webseite zu einem erheblichen Anteil mobil aufgerufen und das bedeutet, das das meistens unter schlechten Netzbedingungen geschieht
- Seitenbesucher sind höchst ungeduldig. Seiten, die zu langsam laden, werden gleich wieder weggeklickt
- Ladegeschwindikeit ist ein Rankingfaktor bei der Suchmaschinenoptimierung. Seiten, die zu langsam laden, werden auch wenn sie noch so interessanten Inhalt bieten nach hinten abfallen
Die Datenmengen, die beim Laden einer Webseite übertragen werden, sind mal so und dann wieder mal so - je nachdem, wie der Webdesigner die Seite strukturell aufgebaut hat und was der so alles in die Seite gepackt hat:
- überflüssiger Code
- Scripte, die nicht geladen werden
- irgendwelche Animationen
- Videos
- Bilder
Text ist eigentlich nicht so das Problem, aber über Bilddateien sollte man sich schon Gedanken machen. Die Dateigröße von Bilddateien ist dabei sogar relativ einfach und ohne besonderen Qualitätsverlust klein zu bekommen: Fast jedes ernst zu nehmende Bildbearbeitungsprogramm bietet eine Option „Für Web sichern“. Oder man nimmt das kleine, aber feine Programm ImageOptim und verkleinert damit auch mehrere Bilder in einem Rutsch.
Es geht nicht nur um Dateimengen
Wenn eine Webseite aufgerufen werden soll, wird eine Anfrage an den Server, auf dem sie abgelegt, gestellt. Man spricht von sogenannten „HTTP-Requests“. Die Zahl der HTTP-Requests wirkt sich auf die Ladegeschwindigkeit einer Webseite aus und folglich wird die Ladegeschwindigkeit umso länger sein, je mehr HTTP-Requests erfolgen müssen. Konsequenz: Die Zahl der HTTP-Requests muss man irgendwie klein halten.
Ein probates Mittel dafür ist das Einfügen von Bildern in Form von Data-Images.
Bilder als Data-Image einfügen
Bilder kannst du nicht nur als visuelles Bild einfügen, sondern auch in codierter Form als Datenmenge. Fast alle zeitgemässen Browser unterstützen das, selbst der Internet Explorer 8 macht hier keine Zicken.
Bilder konvertieren
Damit ein Bild als Data-Image vorliegt, musst du es in das Base64-Format konvertieren. Dafür gibt es verschiedene Webdienste, dazu googelst du einfach mal nach „Base64 konverter“ - es sollte mit Sicherheit etwas passendes für dich dabei sein. Ein Dienst ist z.B. dopiaza.org.
Du lädst dein Bild hoch und kurze Zeit später wird dein Bild als Data Image ausgegeben. Diesen Code setzt du in deine Webseite ein. Ein Data Image kannst du genauso behandeln wie ein „normales“ Bild.
Eine andere Möglichkeit besteht darin, sich ein Bild selbst als Email-Anhang zu schicken. Im Quelltext der Mail findest du dann das Bild im Base64-Format.
Nachteile gibt es aber auch
Data Images können nicht gecacht werden,sondern müssen bei jedem Ladevorgang erneut herunter geladen werden.
Ein anderer Nachteil ist, dass sich die übertragende Dateimenge erhöht. Das mag überraschend sein, hat aber zur Folge, das man sich überlegen sollte, wann man Bilder als Data-Image einfügt und wann nicht.
Und noch ein Nachteil: Eine Seite ist bei eingefügten Data-Images schwieriger zu bearbeiten, weil man schnell den Überblick übers Layout verliert.
Bildquelle: Pexels