Fotos optimieren für den Blog - SEO, Ladezeit etc.

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.

Foto optimieren für den Blog

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?

Anne Schwarz | Bloggerin auf Bloghexe

Anne Schwarz

Hey, ich bin Anne - Multipassionate, waschechtes Dorfkind, Pferdemädchen und Bloggerin aus Leidenschaft.

Ich blogge seit beinahe 20 Jahren und liebe es einfach. Hier auf der Bloghexe teile ich mit dir meine Tipps und Erfahrungen - damit auch dein Blog zauberhaft wird!

» mehr über mich & die Bloghexe

Dieser Beitrag wurde bereits 11mal kommentiert - was denkst du?

Lies weiter:

Hast du die Lust am Bloggen verloren?
Bessere Textgestaltung in Blogartikeln

11 Kommentare

  1. Sehr gute Erklärungen!

    Nachdem ich auch in RAW fotografiere sind meine Bilder auch dementsprechend groß. Beim Exportieren aus Lightroom dreh ich dann die Größe auf ca. 1000px runter und gebe als max. Dateigröße 500kb oder so ein. Das reicht dann meistens.

  2. Chrissy

    Ich verkleinere auch immer auf 1000. Früher auf 800…
    Mit den Exif-Daten habe ich mich noch nie befasst.

  3. Maik

    Ich verkleinere immer auf 900px. 🙂

  4. Aki

    Ich scheine Winzbilder zu nehmen – meine sind 500x400px groß. |D

    Um Meta-Infos und alt-Tag habe ich mich bisher nicht gekümmert, wird sich nun ändern. Danke für den Post, ist gerade sehr hilfreich. 🙂

  5. Da waren wirklich noch einige tolle Tipps dabei. 🙂 Wusste gar nicht das der Dateiname überhaupt eine Rolle spielt und das die Bilder so auch gefunden werden können. Dann werd ich sie wohl ab jetzt mal nach dem Bearbeiten schön immer Benennen.
    Weißt du ob man sich bei GIMP auch so einen Pinsel/Brush erstellen kann?

  6. {Pimp your Blog} So lädt euer WordPress-Blog schneller - Anne

    […] Werfen wir nochmal einen Blick auf eure eigenen Inhalte. Entscheidend für die Ladezeit sind hier nämlich die Fotos, die ihr in euren Beiträgen einbindet. Wie ihr diese am besten für euer Blog optimiert, habe ich vor einiger Zeit ausführlich beschrieben: So optimierst du deine Fotos für den Blog […]

  7. Hallo,

    du hast echt einen tollen Blog!

    Deine Tipps beherzige ich fast alle schon. Die Exif-Daten zu erweitern war aber auch für mich neu 😉 Toller Tipp, den ich ab sofort umsetzen werde!

    LG
    Shaoshi

  8. Welche Programme nutzt du zur Bildbearbeitung denn? Und welche Programme würdest du empfehlen? Am meisten würden mich natürlich relativ billige oder gar kostenlose Programme interessieren. Für Collagen benutze ich Picmonkey oder auch mal Picasa. Ich muss mir auch noch eins suchen um einfach und schnell Wasserzeichen einzufügen.

    • Hi,

      ich nutze seit Jahren Lightroom und Photoshop. Nicht ganz billig, aber großartig. 😉
      Daher kenne ich mich bei den kostenlosen Alternativen nicht aus (nur Gimp hatte ich mal getestet und fand es furchtbar umständlich).

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert