Bildoptimierung für deine WordPress Seite – 11 SEO Tipps

Update 10.05.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. Gerade seit Google im Sommer 2021 die Core Web Vitals (die Vitaldaten deiner Webseite) eingeführt hat, ist die Erfahrung die deine Besuchenden auf deiner Seite machen, relevant für die Position, die Google dir in den Suchergebnissen zuweist.

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 ist das überhaupt wichtig?

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 & Pixeldichte

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.

Quelle: GT Metrix

Quelle: GT Metrix

Bildoptimierung durch 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.

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

Von JPEG bis SVG: Welches Dateiformat wofür?

Mittlerweile empfehle ich nur noch ein Dateiformat für Webseiten, nämlich webp, welches auch transparente Hintergründe darstellen kann. Doch der Vollständigkeit halber möchte ich hier die 5 gängigsten Formate aufzählen.

JPEG: Wenn du hochauflösende Fotos auf deiner Webseite verwenden möchtest, ist das JPEG-Format dein bester Freund. Es ist wie ein Maler, der mit vielen Farben arbeitet, um atemberaubende Bilder zu schaffen. JPEG bietet eine hohe Komprimierung und ermöglicht es, Fotos in einer vergleichsweise kleinen Dateigröße zu speichern, während die Qualität erhalten bleibt. So werden deine Bilder schnell geladen und trotzdem in voller Pracht dargestellt.

PNG: Denke an das PNG-Format wie an einen transparenten Schutzschild für deine Bilder. Es eignet sich besonders gut für Grafiken, Logos und Bilder mit transparentem Hintergrund. PNG bewahrt die Klarheit und die Details der Grafiken und ermöglicht es dir, sie nahtlos in den Hintergrund deiner Webseite einzufügen. Damit kannst du ein einheitliches und professionelles Erscheinungsbild erzielen.

GIF: Wenn du Bewegung in deine Webseite bringen möchtest, ist das GIF-Format wie ein magischer Zauberstab. Es verwandelt statische Bilder in kurze, wiederholende Animationen. Gifs sind wie kleine Geschichten, die sich vor deinen Augen entfalten und Aufmerksamkeit erregen. Verwende sie sparsam, um die Aufmerksamkeit deiner Besucher zu lenken und deine Botschaft auf eine unterhaltsame Art zu vermitteln.

WEBP: Stell dir das WEBP-Format als eine schlanke und effiziente Rennmaschine vor, die für eine optimale Performance sorgt. Es bietet eine hohe Komprimierung, was bedeutet, dass deine Bilder kleinere Dateigrößen haben und schneller geladen werden. WEBP ist ideal, um deine Webseite blitzschnell zu machen und die Nutzererfahrung zu verbessern. Es ist wie ein Turbo-Boost für deine Bilder!

SVG: SVG ist das Format für Vektorgrafiken, das deiner Kreativität Flügel verleiht. Stell dir vor, du hättest einen magischen Zeichenstift, der Bilder in mathematischen Formeln zeichnen kann. SVG erlaubt es dir, skalierbare Vektorgrafiken zu erstellen, die sich ohne Qualitätsverlust in jeder Größe anzeigen lassen. Es ist perfekt für Logos, Symbole und grafische Elemente, die sich an verschiedene Bildschirmgrößen anpassen müssen.

Nutze Lazy Loading: Die Geheimwaffe für eine blitzschnelle Webseite

Hö, was ist denn das? Ganz einfach – stell dir vor, du befindest dich in einer wunderschönen, weitläufigen Galerie voller Kunstwerke. Doch anstatt alle Gemälde gleichzeitig zu sehen, werden sie nach und nach enthüllt, wenn du dich durch den Raum bewegst. Genau das ist Lazy Loading.

Lazy Loading ist wie ein aufmerksamer Galerieführer, der die Bilder nicht alle auf einmal zeigt, sondern sie erst dann lädt, wenn du dich ihnen näherst.

Wenn du durch eine Webseite scrollst, werden die Bilder nicht sofort geladen, sondern erst dann, wenn sie im sichtbaren Bereich deines Bildschirms erscheinen.

Auf diese Weise wird die Ladezeit der Seite erheblich verkürzt und du kannst dich schneller durch die Inhalte bewegen.

Bei WordPress ist die Lazy Loading Technik bereits seit mehreren Versionen automatisch integriert, doch du kannst diese Technik noch mit verschiedenen Plugins oder optimaler Servertechnik unterstützen.

Du bist Trainerin, Coach oder Beraterin & willst online gefunden werden?

Finde heraus, was deine Wunschkundin hören muss, um von dir zu kaufen

jetzt anmelden

für 0 €

Online Tools zur Bildoptimierung

Online-Tool zum verkleinern: Social Image Resizer Tool, I<3 IMG

Online-Tool zur Komprimierung: Optimizilla oder TinyJPG Ansonsten bietet Irfan View ein Plugin an, mit dem du Bilder für das Web speichern kannst.

Mit dem Google Bilder-Tool Squoosh kannst du Bildgrößen sowie Bildformate ändern. Einfach das gewünschte Bild hochladen, Einstellungen vornehmen und wieder herunterladen – easy peasy.

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 gehören zu meinen must have WordPress Plugins.

WP Smush setze ich selber zur Komprimierung ein, doch auch zum EEEW Image Optimizer habe ich positive Erfahrungen gehört.

Update: seit 2020 nutze ich nur noch das Astra Theme in Verbindung mit Spectra und die WordPress Blöcke (auch Gutenberg Editor genannt).

Bilder SEO optimieren

Wenn du die Sichtbarkeit deiner Bilder in der Googlesuche verbessern willst, dann denke in erster Linie an deine Leserinnen und dass sie sich auf deiner Webseite schnell gut zurecht finden.

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.

Bilder SEO, um besser gefunden zu werden – 11 Tipps

Du kannst dazu beitragen, dass deine Bilder und somit deine Webseite besser bei Google gefunden werden, in dem du auch deine Bilder für Google optimierst. Die folgenden 11 Tipps beziehen sich auf die Best Practice Beispiele, die Google selbst gibt. Google sagt selbst:

„Wenn du unsere Richtlinien einhältst, erhöhst du die Wahrscheinlichkeit, dass deine Inhalte in den Google Bilder-Suchergebnissen angezeigt werden.“

1. Biete Kontext: Stelle Text als Kontext für das Bild zur Verfügung. Verwende Keywords (wonach du suchst) auf der Seite, die das Bild enthält. Wie Seitentitel und Überschriften.
2. Platziere Bilder: in der Nähe von relevantem Text und gib eine Bildunterschrift an. Denke darüber nach, die wichtigsten Bilder oben auf der Seite zu platzieren.
3. Schreibe Text auf der Seite und nicht im Bild: Bette wichtigen Text nicht in Bilder ein. Verwende Bilder nicht als Titel oder Header von Seiten.
4. Verwende ALT-Attribute: Gut für Barrierefreiheit und Suchmaschinen. ALT-Text gibt Informationen über das Bild für Benutzer, die das Bild nicht sehen können.
5. Verwende hochwertige Bilder: die scharfe Miniaturansichten erzeugen, ziehen mehr Menschen an.
6. Erstelle hochwertige Webseiten: Die Qualität deines Webseiteninhalts wird berücksichtigt, wenn Bilder gerankt werden und Text wird aus dem Inhalt extrahiert, um einen Text-Snippet zu generieren.
7. Stelle sicher, dass deine Website auf Mobilgeräten und Desktop funktioniert: Da die meisten Bildsuchanfragen auf Mobilgeräten durchgeführt werden, ist es wichtig, dass deine Website auf Mobilgeräten gut funktioniert. Verwende Googles Testtool für Mobilgeräteignung.
8. Verwende gute, beschreibende URLs: Google verwendet den URL-Pfad und den Dateinamen, um Bilder zu verstehen. Die Richtlinien sagen: „Beispielsweise ist meine-schwarze-Katze.jpg besser als IMG00023.JPG“.
9. Biete relevante strukturierte Daten: Abhängig vom Inhalt verwende strukturierte Daten wie Rezepte, Nachrichtenartikel oder Produkte.
10. Berücksichtige die Geschwindigkeit: Da Bilder oft die Elemente sind, die am längsten zum Herunterladen benötigen, optimiere die Dateigröße des Bildes, wende Lazy-Loading-Techniken an, verwende responsive Bilder.
11. Biete Bild-Sitemaps an, um Google bei der Indexierung aller Bilder deiner Webseite zu helfen.

Fazit

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