Fotos optimieren für den Blog: so verbesserst du Ladezeit & SEO

Ein paar Bilder machen deinen Blogartikel erst so richtig rund. Allerdings gilt es ein paar Dinge zu beachten, damit deine Seite dadurch nicht unendlich langsam wird. Und wusstest du, dass dich deine Fotos wunderbar in Sachen Suchmaschinenoptimierung (SEO) unterstützen können?

Wie du deine Fotos optimieren und über die reine Bildbearbeitung hinaus optimal für den Blog vorbereiten kannst, schauen wir uns in diesem Beitrag an. 🙂

Size matters: die Dateigröße

Je größer dein Foto ist, desto länger benötigt es zum Laden.

Zu Hause fällt das in der Regel nicht weiter auf, aber unterwegs auf dem Smartphone kann das schon zur Geduldsprobe werden. Du kennst das: wenn eine Seite zu lange zum Laden braucht, brichst du den Aufruf entnervt ab. 🤯
Und selbst deinen geduldigsten Lesern steht oft kein unbegrenztes Datenvolumen zur Verfügung.

Auch für die Suchmaschinenoptimierung (SEO) spielt die Ladezeit einer Webseite eine große Rolle. Schließlich wollen Google & Co. möglichst zufriedenstellende Suchergebnisse ausspielen – und langsame Seiten sorgen für frustrierte Nutzer.
Daher bevorzugt Google Seiten mit einer flotten Ladezeit.

Die Ladezeit deines Blogs hängt ganz stark von Fotos ab!

Der reine Text deiner Artikel fällt nicht weiter ins Gewicht, und auch Scripte von Plugins haben meist keine so gravierenden Auswirkungen wie nicht optimierte Fotos.

Ein konkretes Beispiel für die Bildgröße

Als Beispiel habe ich hier ein Foto von unserer Katze mit der Spiegelreflexkamera aufgenommen: im Original misst die JPEG-Datei stolze 5760 x 3840px bei 8,44MB. Uff! Daher feilen wir jetzt erstmal an der Dateigröße, ohne dass die Qualität darunter leidet.

Los geht es mit den Maßen: selbst Smartphones produzieren mittlerweile riesengroße Fotos mit Kantenlängen um die 3000px. Das ist super, wenn du die Fotos drucken lassen willst, aber im Blog brauchst du selten mehr als 1000px Kantenlänge.
Vor dem Einbinden in einen Beitrag solltest du dein Foto also unbedingt verkleinern – bei meinem Beispielfoto sind wir nach dem Verkleinern auf 1000 x 667px ruckzuck runter auf 319KB! Das ist schon ziemlich gut.

Verkleinern kannst du deine Bilder entweder vorher, etwa in Photoshop, oder beim Hochladen in den Blog. Unter Einstellungen » Medien stellst du die gewünschte maximale Kantenlänge ein.

Als nächstes drehen wir an der Kompressionsstufe: beim Speichern als JPEG fragt dich Photoshop nach einer Qualitätsstufe zwischen 0 (starke Kompression = niedrige Qualität) und 12 (keine Kompression = hohe Qualität). Bei feinen Linien, wenn du etwa Schrift abfotografiert hast, solltest du auf eine recht hohe Qualität achten (und statt JEPG lieber PNG als Format wählen – aber das ist ein anderes Thema). Bei den meisten Fotomotiven macht sich eine etwas stärkere Komprimierung in der Regel aber kaum bemerkbar.

Wenn du über Datei » Exportieren » Für Web speichern gehst, findet sich ein ähnliche Einstellung. Hier reicht der Regler von 0 bis 100 und in einem Vorschau-Fensterchen siehst du gleich, wie sehr die Bildqualität in Mitleidenschaft gezogen wird.

Ich wähle hier eine 60%ige Qualität, und schon haben wir aus den ursprünglichen 8,44MB (~ 8.643 KB) schlanke 232KB gemacht – rund 29mal weniger!

Nutz das WebP-Format

Jetzt gehen wir noch einen Schritt weiter: Google hat mit WebP ein Format entwickelt, das Bilder stark komprimiert und somit kleinere Dateigrößen erzeugt, ohne dass die Bildqualität darunter leidet.

Für WordPress gibt es Plugins, die deine Bilder für dich konvertieren. Du lädst also eine ganz normale JPEG-Datei hoch, bindest sie wie gewohnt in deinen Beitrag ein und das Plugin ersetzt das Foto im Hintergrund durch die WebP-Version. Die Datei heißt dann nicht mehr foto.jpeg, sondern foto.webp.

In meinem Beispiel schrumpft das Katzenfoto dadurch nochmal enorm auf 176KB!

Ich nutze dafür das Plugin Smush Pro*.

Wie du siehst, ist also gar nicht viel Aufwand erforderlich, um deine Fotos zu optimieren. Die Ladezeiten deines Blogs werden es dir danken. 🙂

Meta-Infos

Beim Aufnehmen speichert deine Kamera eine ganze Reihe an Meta-Informationen mit: Uhrzeit und Datum, Kameramodell, Belichtungszeit, Blendenöffnung und und und.

Es ist sinnvoll, sie um einige Angaben zu ergänzen: etwa deinen Namen und deine Blog-URL.
In Photoshop gehst du dazu auf Datei → Dateiinformationen.

Wasserzeichen

Ob über Pinterest, die Google-Bildersuche oder sonstige Webseiten: mit großer Wahrscheinlichkeit wird dein Foto auch außerhalb deines Blogs landen, und nicht immer wird ein Link daneben stehen. Aus diesem Grund habe ich es mir angewöhnt, auf meinen Fotos ein Wasserzeichen mit dem Logo oder der Adresse des Blogs anzubringen.

Natürlich ist das kein 100%iger Diebstahlschutz, aber es schreckt zumindest einen Großteil der Bilderklauer ab. Außerdem kann so jeder interessierte Betrachter zu deinem Blog finden, egal wo das Foto eingebunden ist.

Dazu habe ich mir aus meinem Logo einen Photoshop-Pinsel erstellt, um mit einer niedrigen Deckkraft in schwarz oder weiß auf das Foto zu stempeln.

Der Dateiname

… ist superwichtig für die Suchmaschinenoptimierung (SEO) deines Blogs!

Ziemlich viele Aufrufe kommen bei mir nämlich über die Google-Bildersuche. Neben den Meta-Informationen und der Einbettung des Fotos in aussagekräftigen Content spielt hierbei der Dateiname eine große Rolle: er sollte möglichst sprechend sein, also aus einigen Schlagwörten bestehen statt aus dem kryptischen Mix aus Buchstaben und Zahlen, den die Kameras sonst so vergeben. Es sei denn natürlich, du willst bei der Suche nach K03A8910 gefunden werden. 😉

Ich verwende meistens ein bis zwei Schlagwörter, den Blognamen und bei Fotoserien eine fortlaufende Nummerierung, alles getrennt durch Bindestriche: notizbuch-leuchtturm1917-notizbuchmagie-1.jpg (ein Beispiel von meinem anderen Blog notizbuchmagie.de 🙂 ).

Alter Schwede – das alt-Attribut und der Titel

Jetzt ist das Foto also soweit fertig und wartet darauf, in deinen Beitrag eingebunden zu werden.

Hierbei solltest du an das alt-Attribut (alt für alternative) und das title-Attribut denken – beide beinhalten eine kurze Beschreibung des Motivs:

<img src="notizbuch-leuchtturm1917-notizbuchmagie-1.jpg" alt="Notizbuch von Leuchtturm 1917" title="Notizbuch von Leuchtturm 1917">

Das ist nicht nur wichtig für Suchmaschinen, sondern auch für Screenreader – so verbesserst du die Barrierefreiheit deines Blogs.

Bei WordPress kannst du den Alternativtext und den Titel ganz einfach beim Hochladen eintragen.

Leider befüllt WordPress das Alt-Feld nicht automatisch mit dem Dateinamen aus den Metadaten – der landet nur im Titel-Feld. Ich kopiere das dann immer rüber.

So weit, so gut – ich hoffe, ich habe dir mit diesem Artikel weiterhelfen können. 🙂

Wie optimierst du deine Bilder für den Blog?