Bildoptimierung für deine WordPress Seite

Update 07.10.2020

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

Du 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 überhaupt?

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: 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 Theme 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: GT Metrix

Bildoptimierung – Pixelmaße, Pixeldicht, Bildformat

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.

Relevant hierfür sind Pixelmaße, Pixeldichte und sogar das Format der Bilddatei. Die Pixelmaße sind die Abmessung des Bildes, also Länge x Breite.

Achte dabei auf die Pixeldichte, auch DPI (dots per Inch) genannt. Fotos haben häufig 300 dpi oder noch mehr. Für Drucke ist das erforderlich. Für ein sauberes Ergebnis im Internet reichen 72 dpi.

Verwende nur bei freigestellten/ transparenten Fotos (z. B. dein Logo) das Format *.png Es beinhaltet viele Bildinformationen, die oft überflüssig sind.

Besser sind *jpeg-Formate. Mittlerweile ist auch das webp-Format auf dem Vormarsch, doch es kann noch nicht von allen Browsern korrekt dargestellt werden, siehe diese Übersicht dazu.

Quelle: GT Metrix

Quelle: GT Metrix

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:

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 ToolI <3 IMGOnline-Tool zur Komprimierung:OptimizillaTinyJPGAnsonsten bietet Irfan View ein Plugin an, mit dem du Bilder für das Web speichern kannst.

Bildoptimierung mit WordPress Plugins

Schau welche Empfehlungen dein Theme zu Bildgrößen gibt. Hier ist eine Empfehlung zum Divi Theme von Elegant Themes (zum Originalartikel auf Englisch). 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.

Update: seit 2019 nutze ich das Plugin Thrive Architect und die WordPress Blöcke (auch Gutenberg Editor genannt).

Bilder SEO optimieren

Auch 2020 braucht Google noch etwas Hilfe, um Bildinhalte zuverlässig zu erkennen. Du hilfst Google dabei, indem du ALT-Attribute und ALT-Texte verwendest, direkt beim Hochladen in die Mediathek.

Bei der Bildoptimierung starte mit dem ALT-Attribut. Dadurch unterstützt du Google dabei den Inhalt des Bildes zu erfassen, quasi das Bild zu lesen. Sollte das Bild nicht angezeigt werden, erscheint der hinterlegte Text.Somit ist Google bestmöglich informiert und auch deine Besucher.

Wenn du deine Website barrierefrei gestaltest, hinterlege auch einen Alternativtext. Dieser wird von einer Vorlesesoftware ausgelesen und ermöglicht blinden bzw. sehbehinderten Usern eine bessere Nutzung deiner Seite.

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)?

Das könnte dir auch gefallen