SEO: Bilder für die Website optimieren leicht gemacht

Deine Fotos und Grafiken sollten optimiert sein, bevor Du sie auf Deine Website hochlädst, damit das Ergebnis für Deine Besucher und die Suchmaschinen (SEO) optimal ist. Ich erkläre Schritt für Schritt, wie und wo Du Deine Bilder komprimierst, die richtige Auflösung wählst und was sonst noch wichtig ist.

Inhaltsverzeichnis Show

Warum Bilder optimieren?

Es gibt mehrere Gründe, warum es absolut sinnvoll ist, Bilder zu bearbeiten, bevor sie auf Deiner Webseite eigebunden werden, und zwar:

• Ladegeschwindigkeit der Website
  Viele große Bilder machen Deinen Internetauftritt langsam

• Suchmaschinenoptimierung
  Lange Ladezeiten werden von Google durch schlechteres Ranking bestraft

• Erster Eindruck
  Ein pixeliges Bild macht keine Freude, aber eine zu langsam aufbauende Seite auch nicht

• Barrierefreiheit
  Können Screenreader etwas mit Deinem Bild anfangen?

 Was gilt es zu optimieren?

• Bildgröße

• Bildqualität

• Bildname

Ziel: Ein guter Kompromiss zwischen Bildgröße (möglichst wenig kb) und Bildqualität (möglichst scharf).

Schauen wir uns das mal genauer an: 

Welche Auflösung (Pixelmaße) und welche Dateigröße sollten meine Bilder haben?

Ich empfehle, sich grob an folgende Übersicht zu halten:

Im Vollbildmodus anzeigen

*Achtung bei Hochformat: die maximale px-Breite ist in dem Fall die Höhe (längste Kante des Fotos)

Exkurs:

BILDDATEIEN ÜBERPRÜFEN

Es ist ganz leicht festzustellen, wie groß Dein unbearbeitetes Bild derzeit ist:

Mac

1. Wähle die Bilddatei auf deinem Computer aus

2. Drücke “command” + “I” 

Windows

1. Wähle die Bilddatei auf deinem Computer aus

2. Drücke Alt + Enter oder per Rechtsklick auf „Eigenschaften“

3. Klicke in dem sich öffnenden Fenster auf Details

Bereits auf Website eingebunden

1. Rechtsklick auf das Bild

2. Bild in einem neuen Tab öffnen

3. In dem Tab-Titel steht dann die Auflösung des Bildes (ist dies nicht sichtbar, muss man mit der Maus ganz oben über den Tab hovern)

Welcher Dateityp ist fürs Web sinnvoll?

Diese Dateiformate sind prinzipiell möglich für Bilder auf Deiner Homepage:

• JPG
  Das Lieblingsformat für Fotos. Es kann Farben gut wiedergeben und die Komprimierung funktioniert sehr gut.

• PNG 
  Das beste Format, wenn Du einen transparenten Hintergrund brauchst, z.B. bei einem Logo, einem Icon oder einer Grafik. Lässt sich leider nur begrenzt komprimieren.

• SVG 
  Gute, qualitativ hochwertige Alternative png. Aber: Auf vielen Plattformen (inkl. Squarespace und Wordpress) können SVG nicht ohne ein extra Plugin hochgeladen werden.

• GIF 
  eignet sich für Animationen, wie animierte Grafiken.

Fazit: Im Zweifel immer das Dateiform jpeg nutzen. Png nur, wenn Bild transparente Bereiche hat und Du diese auch brauchst. 

Die Bilddatei optimal benennen

Manchmal bekomme ich das Gefühl, Suchmaschinen wollen mich erziehen. Denn Du wirst mit besserer Sichtbarkeit belohnt, wenn Du diese zwei Punkte berücksichtigst:

Aussagekräftiger Dateiname

Benenne Bilder mit einem aussagekräftigen Dateinamen, der den Suchbegriff der Seite enthält, in die Du das Bild einbauen möchtest. Außerdem solltest Du immer Deinen Firmennamen oder Deinen eigenen Namen mit einbauen.

Vermeide Doppelpunkte oder “normale” Punkte innerhalb des Dateinamens. Das führt zu Fehleransichten.

Damit Du bei Google ein besseres Ranking erlangst, spielt der Dateiname eine große Rolle. Sucht ein Nutzer z.B. in der Google Bildersuche nach dem Wort „Hundeschule Bonn“, werden Bilder, die im Dateinamen diese Worte haben, grundsätzlich an einer besseren Position ausgespielt, als Bilder mit Dateinamen wie IMG_2354.

Beispiel für einen Dateinamen:
Ulrike Wendrich lächelnd am Computer sitzend während sie über Logodesign spricht - Wendrich Design.jpg

Informativer Alternativtext

Nach dem Hochladen der Bilder, solltest du noch einen Bild-Alternativtext (Alt-Tag) hinzufügen. Dieser Text wird z.B. blinden Menschen mit einem Screenreader vorgelesen. Er ist in der Regel deutlich länger/informativer als der eigentliche Dateiname. Der Alternativtext sollte nach Möglichkeit

• beschreiben, was auf dem Bild zu sehen ist

• kurz, aber präzise sein

• das Keyword einschließen

• nicht die Worte „Foto“ oder „Bild“ enthalten

Beispiel für einen Alt-Text:
Frau mittleren Alters mit langen blonden Haaren in schwarzem Rolli lächelnd beim Logodesign - vor ihr ein aufgeklappter Computer

---

So funktioniert die Umbenennung innerhalb von Squarespace:

1. Eingebettete Bilddatei anklicken.

2. Auf das Stiftsymbol (bearbeiten) klicken.

3. Bild-Alternalternativtext eingeben. An dieser Stelle könnte man auch noch mal den eigentlichen Dateinamen ändern.

---

Übrigens: Google erkennt mittlerweile den Zusammenhang zwischen Inhalt eines Textes und den verwendeten Bildern. Daher sollten Text und Bild auch zusammenpassen bzw. die Fotos an der richtigen Stelle platziert werden. 

Workflow für das Einbinden von Bildern auf Deiner Website: 

1. Ordner anlegen mit Originaldateien!

In einem anderen Ordner jeweils eine Kopie erstellen und dann mit der Kopie weiterarbeiten.

⚡️ Achtung: einmal verkleinert, lassen sich Bilder im jpg-Format nicht wieder zu guter Qualität vergrößern!

2. Bild zurechtschneiden

Vor allem wichtig, wenn Du aus einem Hochformat ein Querformat machen möchtest oder nur ein Detail des Gesamtbildes abbilden möchtest.

⚡️Achtung bei Bannerbildern (volle Breite): hier den Ausschnitt etwas großzügiger wählen, damit das Bild bei großen Bildschirmen und in der Mobilansicht auch noch gut aussieht

3. Skalieren / Bildgröße einstellen

Du kannst Dich bei den Maßen an meiner Übersicht von oben orientieren. Das Bild muss nur so viele Pixel breit sein, wie Du es tatsächlich brauchst.

4. Datei komprimieren

Die Dateigröße des Bildes auf so wenige kb reduzieren, dass das Bild gerade noch scharf ist. Das ist wichtig, für eine schnelle Ladezeit.

5. Datei benennen

6. Datei hochladen und Alt-Text einfügen

Tools zur Bildoptimierung:

Egal ob Freeware oder Profiprodukt. Das Procedere ist bei jedem vorgestelltem Tool ähnlich und leicht umzusetzen. Vier getestete und für gut befundene Tools:

1. I love IMG

2. tinyPNG

3. Mac Vorschau

4. Adobe Photoshop 

1. IloveIMG.com - Onlinetool

Kostenlos und mit allen Funktionen, die das Herz begehrt. Innerhalb dieses Online-Tools kannst Du in einem Rutsch Deine Datei beschneiden, anschließend skalieren und dann komprimieren. Meine Empfehlung!

IloveIMG.com

2. tinyPNG.com – Onlinetool

Kostenlos und eine sehr gute Kompressionsrate. Einziger Nachteil: Bilder über 5MB werden nicht akzeptiert.

TinyPNG.com

3. Mac Vorschau

Kostenlos für alle Mac-User und auch schon vorinstalliert. Alle Schritte des Workflows (wie bei IloveIMG.com) in einem Rutsch möglich. Nachteil: komprimiert keine PNGs.

Arbeitsschritte innerhalb der Anwendung:

1. Dateiname ändern:

   • Doppelklicken auf den Namen

   • aussagefähigen Dateinamen eingeben

2. evtl. Zurechtschneiden (bei Bannerfotos nicht zuviel wegnehmen):

   • Bildbereich auswählen (mit Maus Viereck aufziehen)

   • Reiter Werkzeuge

   • Zuschneiden auswählen

3. Skalieren:

   • Reiter Werkzeuge

   • Größenkorrektur

   • Bildgröße anpassen

   • Werte laut Übersicht eingeben

4. Exportieren und Komprimieren: Ablage, Exportieren, Qualität per Regler einstellen (komprimiert die Datei)

4. Adobe Photoshop

Der Klassiker, der gut funktioniert, aber für Laien wenig intuitiv und relativ teuer ist.

Arbeitsschritte innerhalb der Anwendung:

1. Evtl. zurechtschneiden – bei Hintergrundbildern großzügig Anschnitt lassen

2. Datei, exportieren, für Web speichern:

   • Qualität einstellen

   • Bildgröße eingeben

   • Speichern und benennen

Fazit

Eine Optimierung Deiner Bilder fürs Web ist einfach, kostenlos und hocheffektiv im Hinblick auf Suchmaschinenoptimierung und Nutzererlebnis. Daher solltest du nicht darauf verzichten und diesen kleinen Zwischenschritt vorm Upload immer mit einbauen.

---

Du bist Dir mit den Inhalten für Deine Homepage noch nicht sicher? Und Du hast Lust bekommen, das Thema direkt anzupacken?

Sicher Dir meine kostenlose 9-seitige Homepage Checkliste als editierbares Google-Doc mit vielen Beispielen und vorgefertigten Texten. Damit ist endgültig

Schluss mit Schreibblockaden und Aufschieberitis.