Einer der einfachsten Möglichkeiten die Ladezeit für deine Webseite zu verbessern, ist die Bildoptimierung.
Unkomprimierte große Bilder liefern überflüssige Informationen mit, die dein Webseiten-Besucher gezwungenerweise mit herunterladen muss, wenn er deiner Seite besucht.
Bildoptimierung hilft dir, die Ladezeit deiner Webseite zu verbessern.
Du denkst dir: naja, ein Bildchen wird ja nicht so tragisch sein, oder?! Stimmt! Doch deine Webseite besteht sicherlich aus mehr als einem Bild, oder?!

Bildoptimierung – wieso denn?

Bilder haben – im Verhältnis zu den HTML/CSS/JS-Dateien – einen großen Anteil an der Gesamtgröße deiner Webseite. Woher bekommst du die Fotos, die du auf deiner Seite verwendest?

  • Stockfoto-Anbieter wie Shutterstock, Pixabay und ähnliche?
  • Du machst deine Fotos selbst mit einer Digitalkamera?
  • Von deinem Smartphone?

In diesem Fall hast du Bilder in sehr hoch auflösender Qualität ausgewählt, druckfähig, das heisst, du könntest sie auch für deine Flyer verwenden.

Hier ein Beispiel was passiert, wenn jemand deine Webseite aufruft:

Quelle: GTMetrix

1. Der Browser fragt das unkomprimierte Bild an und lädt es herunter in der Bildgröße 2.400 x 1.350 Pixel mit 2,5 mb Dateigröße
2. Je nach deinem Seitentheme wird das Bild automatisch auf eine Größe von 300 x 169 Pixel herunter gerechnet
3. Der Browser liefert das neu errechnete Bild aus

Fazit: Dein Besucher musste unnötig lange warten. Und die Aufmerksamkeitsspanne ist heutzutage bekanntlich gering…

Kurz gesagt gilt:
Kleine Dateigröße= Daten können schneller heruntergeladen werden = geringe Ladezeit deiner Webseite

Quelle: GTMetrix

Bilder mit großen Maßen wie 2.400 x 1.350 Pixel, die du direkt von deinem Smartphone oder Digitalkamera herunterlädst, haben große Dateigrößen. Doch du kannst deine Bilder optimieren, das geht ganz einfach.
Bildoptimierung mit Komprimierung
Die einfachste Variante der Komprimierung ist, den Verlust der Farbvielfalt und der Bilddetails zu akzeptieren (oft auch lossy compression genannt). In diesen beiden Bilder siehst du gut den Unterschied.

Quelle: GTMetrix

Quelle: GTMetrix

Doch schau dir auch die Dateigröße an: nur schlanke 8,4 kb anstatt 63,5 kb.
Eine andere Möglichkeit ist die verlustfreie Kompression (lossless compression). Hierbei bleibt die Bildqualität erhalten, doch die Bilddaten werden effizienter und kompakter organisiert, wodurch du eine kleinere Datei erhältst.

Noch mehr Bildoptimierung

Doch Bilder enthalten noch weitere Informationen wie GPS Koordinaten, Kameradetails, Datum, Uhrzeit, Farbprofile, etc. in den sogenannten EXIF-Daten. Es gibt mittlerweile mehr als 100 standardisierte Daten, die mit im Foto gespeichert werden können. Relevant für die Bilder auf deiner Webseite sind sie nur bedingt.

Ein Webseiten-Aufruf mit Bildoptimierung sieht so aus:

Quelle: GTMetrix

1. Der Browser fragt das Bild an und lädt es herunter in der passenden Bildgröße herunter: nur 300 x 169 Pixel und 68 kb!
2. Der Browser kann das Bild passend ausliefern, ohne es neu errechnen zu müssen.

Fazit: Dein Webseiten-Besucher hat Zeit und Datenvolumen gespart.

Bildoptimierung – Tools

Online-Tool zum verkleinern:
Social Image Resizer Tool
I <3 IMG
Online-Tool zur Komprimierung:
Optimizilla
TinyJPG
Ansonsten bietet Irfan View ein Plugin an, mit dem du Bilder für das Web speichern kannst.

Bildoptimierung mit WordPress Plugins

Ich nutze das Divi Theme und für dieses Theme gibt es eine Bilder-Anleitung, die du hier findest. Dementsprechend verkleinere ich meine Bilder vorab und lade sie dann in die Mediadatenbank hoch. Mit kostenlosen WordPress Plugins werden die Bilder automatisch optimiert, auch verlustfrei.
WP Smush oder EEEW Image Optimizer

WP Smush setze ich selber zur Komprimierung ein, doch auch zum EEEW Image Optimizer habe ich positive Erfahrungen gehört. Wo du kostenlose Bilder findest, die du für dein Business nutzen darfst, habe ich in diesem Beitrag aufgelistet.

Du hast Fragen, die ich hier vergessen habe, dann schreibe mir eine Email (info@letsgetitstraight.de) oder hinterlasse mir eine Nachricht im Chat unten recht. Ich freue mich über Post von dir! Dieser Artikel ist ein Auszug von dem englischsprachigen Artikel von GTMetrix zu Bildoptimierung.

Merken

Merken

Merken

Merken

Merken

Merken

Merken

Merken

Merken

Merken

Merken

Merken

Share This