Bildoptimierung für deine WordPress Seite

Bildoptimierung für deine WordPress Seite

​Wooow - was für ein tolles Angebot! 4 Sterne, Sonne, Meer & Strand, genau DAS brauchst du jetzt.

D​u willst mehr wissen. Du hast zwar keine Zeit, aber schnell mal schauen.

Du gehst auf die Webseite und sie läd eeeewig...

Text, Text und noch mehr Text, ah, das erste Bild. Nichtssagend ... doch du hast keine Zeit mehr, auf die weiteren Bilder zu warten und suchst später über Google nach anderen Anbietern.

Das hast du sicherlich auch schon erlebt und bei deiner Webseite willst du vermeiden, dass Leute abspringen.

Hol dir die Tool Tipps direkt in dein Postfach

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:

Bildoptimierung Bild rendering

​Quelle: GT Metrix

  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

Bildoptimierung - unnötig große Bilder

​Quelle: GT Metrix

Bildoptimierung unkomprimierte Bilder

​Quelle: GT Metrix

Bildoptimierung mit komprimierten Bildern

​Quelle: GT Metrix

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.

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:

Optimierte Bilder werden schnell von Webseitee geladen

Quelle: GT Metrix

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.

Fazit

Auf deiner Webseite sind sowieso Bilder. Höchstwahrscheinlich viel zu groß. Bildoptimierung geht ohne technische Kenntnisse, das ist reine Fleißarbeit und du siehst sofort Ergebnisse. Also - worauf willst du noch warten (lassen)?

Dieser Artikel ist ein Auszug von dem englischsprachigen Artikel von GTMetrix zu Bildoptimierung.


Das könnte dir auch gefallen

>

Pin It on Pinterest

Share This
Scroll to Top

Hey, willst du deine WordPress Seite selbst erstellen? Kostenlos?