Webdesign und SEO: Bilder für Suchmaschinen optimieren

Nicht nur Überschriften, Texte oder eure URL sind für Google “gefundenes Fressen”. Auch Bilder tragen entscheidend dazu bei, wie eure Website von Suchmaschinen bewertet wird. Und nicht zuletzt suchen Nutzer zu manchen Themen fast genauso häufig nach Bilder, wie in der regulären Suche.

Darum ist es ganz gleich, ob ihr einen Blog, einen Online-Shop oder eine „ganz normale“ Website habt: Es lohnt sich, eure Bilder direkt beim Hochladen für Google zu optimieren.

In diesem Artikel verraten wir euch einfache Wege für die SEO eurer Bilder. Ihr werdet sehen, dass es ganz einfach geht. Dabei wollen wir euch gern einen umfassenden Eindruck der Möglichkeiten geben. Daher ist dieser Artikel ein Stück länger, als ihr es vielleicht gewohnt seid – eben die perfekte Wochenendlektüre :-) Viel Spaß!


Für die Suchmaschinenoptimierung eurer Bilder gibt es verschiedene Aspekte, die Suchmaschinen positiv beurteilen:

  1. Die optische Attraktivität
  2. Sie können schnell geladen werden
  3. Sie sind besonders leicht zu finden

Im Netz findet man zwar viele Artikel, die sich meistens auf einen dieser Aspekte beschränken. Wir wagen diesmal eine andere Herangehensweise und behandeln alle drei. Klingt utopisch? Wartet es ab ;) Ich wette, ihr werdet erstaunt sein…

Was uns allen bei der Bilder-SEO hilft: Für alle Schritte gibt es einfache Tools, für die man keinen Cent zu zahlen braucht – komplexe Programme wie Photoshop sind also nicht nötig.

Ich selbst nutze meistens (auch hier im Artikel) die kostenlose Version von Pixlr – ein super Lösung für alle grundlegenden Schritte bei der Bildbearbeitung. Falls ihr lieber andere Tools nutzen möchtet, findet ihr im Artikel „Bildbearbeitung ohne Photoshop“ ein paar gute Alternativen.

 

1. Qualität: Nutzt eure Möglichkeiten

Die gute Nachricht vorweg: Ihr braucht kein Profi-Fotograf zu sein, um erstklassige Bilder auf eurer Website zu nutzen. Es gibt jede Menge Stockfoto-Anbieter, bei denen man kostenlos Fotos zur kommerziellen Nutzung herunterladen kann. Unsere Favoriten sind:

Bitte beachtet hier auf jeden Fall die jeweiligen Lizenz- und Nutzungsbedingungen.

Wenn ihr ein Bild von einer dieser Plattformen herunterladet, wird es wahrscheinlich eine recht große JPG-Datei sein. Um das Bild für eure Website zu optimieren, reduziert ihr einfach die Größe und ladet eine kleinere Version hoch (mehr dazu weiter unten). Grundsätzlich kann man sich merken, dass es immer besser ist, mit einem großen Bild loszulegen und es zu verkleinern, als andersherum.

Natürlich sind Stockfotos nicht für alle Zwecke geeignet – man denke nur an Team- oder Produktbilder. Falls ihr eure Produkte selbst fotografieren möchtet, gibt es ein paar einfache Tricks, mit denen ihr sicherstellen könnt, dass sie gut ausgeleuchtet sind und professionell wirken – zum Beispiel mit einer DIY-Lightbox.

Ihr möchtet für eure Website Grafiken verwenden? Auch dann findet ihr etliche kostenlose Tools im Netz, mit denen ihr zum Beispiel Infografiken erstellen und Text zu Fotos hinzufügen könnt. Uns gefallen die Anbieter Canva und PiktoChart. Falls ihr ein Logo braucht, können wir euch zum Beispiels 99designs oder designenlassen empfehlen.

 

2. Das richtige Format nutzen: JPG oder PNG

Die gängigsten Bildformate, die euch bei der Bildersuche begegnen werden, sind JPG (oder JPEG) und PNG. Beide sind im Grunde gleichwertig. Bei der Entscheidung für eines der Formate können euch folgende Tipps helfen:

  • Fotos sollten als JPGs gespeichert und hochgeladen werden. Sie können bis zu 16 Millionen Farben darstellen – und das bei relativ kleiner Dateigröße. Falls ihr Text in ein Foto einfügen wollt, könnt ihr ebenfalls ein JPG nutzen, sofern das Foto den Hauptteil des Bildes ausmacht.
  • Grafiken speichert ihr besser als PNGs. Das gilt für die meisten Zeichnungen, Infografiken, Bilder mit viel Text darin und Logos. PNGs haben eine höhere Qualität als JPGs, sind aber meistens auch größer. PNGs kommen gut mit einfarbigen Flächen klar und sind extrem scharf, sodass man auch beim Heranzoomen klare Linien ohne Qualitätsverluste hat. Außerdem ist es möglich, transparente Hintergründe darzustellen, was man zum Beispiel oft für Logos benötigt. Wenn möglich, ladet die Dateien im PNG-24-Format und nicht im PNG-8-Format herunter – sie haben eine deutlich bessere Qualität und können mehr Farben darstellen.

Fotografie im JPEG-Format

Fotos sollten in der Regel als JPG gespeichert werden.

Grafik im PNG-Format

Grafiken und Logos speichert ihr besser als PNGs.

Die meisten Programme bieten euch beim Herunterladen die Auswahl zwischen JPG oder PNG, wenn ihr auf Speichern unter, Exportieren oder Für Web speichern geht.

Es gibt im Netz aber auch kostenlose Tools wie Zamzar, mit denen ihr die Dateien ruckzuck konvertieren könnt. Doch denkt daran: Ihr könnt problemlos aus einem PNG ein JPG machen, aber ihr erhöht andersherum nicht die Qualität, wenn ihr ein JPG zum PNG konvertiert. Falls ihr also zum Beispiel ein Logo nur als JPG habt, dann bittet lieber den Designer um eine PNG-Version aus dem Original-Designprogramm und versucht nicht, es selbst in ein PNG umzuwandeln.

 

3. Größe und Auflösung: Findet die richtige Balance

Wie so oft im Leben ist auch bei der Bildoptimierung das Gleichgewicht entscheidend. In diesem Fall geht es um die richtige Balance von Dateivolumen (Byte) und Auflösung.

Grundsätzlich gilt: Je höher die Auflösung, desto größer die Datei. Bei Print-Produkten ist eine höhere Auflösung immer besser als eine niedrige. Im Internet gilt das nicht 1:1, denn hier erhöhen große Dateien die Ladezeit der Website.

Das ist frustrierend für die Besucher und kann außerdem euer Ranking bei Google & Co. verschlechtern. Vor allem für mobile Nutzer sind große Bilder und lange Ladezeiten ziemlich nervig.

In einigen Fällen sind große Bilder auch auf Websiten von Vorteil, zum Beispiel beim Hintergrund und dem sogenannten „Hero image“, also einem großen Banner-Bild, das auffällig auf der Website platziert ist. Wenn ihr hier ein kleines Bild nehmt und es vergrößert, sieht es höchstwahrscheinlich total unscharf aus.

Wie also findet ihr das optimale Gleichgewicht von Größe und Qualität? Genau genommen geht es hier um drei Aspekte:

  • Dateigröße: Sie beschreibt die Datenmenge, die in einer Datei gespeichert ist – es geht also darum, wie viele Bytes die Datei auf eurem Rechner beansprucht. Die Dateigröße ist der Faktor, der eure Website langsamer machen kann. Ein Bild mit 15 MB (Megabyte) ist riesig, eines mit 125 KB (Kilobyte) schon deutlich besser. Falls die Dateigröße sehr groß ist, kann das entweder an der Bildgröße oder der Auflösung liegen.
  • Bildgröße: Vielleicht denkt ihr bei diesem Begriff spontan an die klassischen Abmessungen von Fotoabzügen wie 9×13 cm oder 10×15 cm. Bei digitalen Bildern beschreibt die Bildgröße jedoch die Anzahl der Pixel. Je mehr Pixel, desto größer das Bild. Ein typisches Bild auf einer Website misst beispielsweise 795×300 Pixel.
  • Auflösung: Dieser Begriff stammt noch aus der Welt der Drucks. Im Grunde geht es hier um die Bildqualität, gemessen in dpi (dots per inch, also Bildpunkte pro Inch). Für professionelle Drucke braucht man meistens Fotos mit 300 dpi, doch die meisten Computerbildschirme stellen nur 72 oder 92 dpi dar. Deshalb macht alles, was darüber hinausgeht, das Bild unnötig groß. Wählt ihr in einem Programm die Option Für Web speichern aus, sichert ihr das Bild in einer niedrigen, web-freundlichen Auflösung.

Mehr zum Thema Bilder und Bildgröße findet ihr auch in unserem Support Center.

Wie bekommt ihr die Maße eurer Bilder heraus?

Die Dateigröße und Bildgröße findet ihr direkt auf eurem Computer. Wenn ihr einen PC nutzt, klickt ihr mit der rechten Maustaste auf die Bilddatei, wählt Eigenschaften und dann Zusammenfassung. Auf einem Mac klickt ihr mit Rechtsklick oder gehaltener Ctrl-Taste auf die Bilddatei und wählt Informationen.

Um die Auflösung herauszufinden, benötigt ihr ein professionelles Bildbearbeitungsprogramm wie Photoshop. Aber auch die meisten anderen Programme werden eure Bilder automatisch mit einer niedrigen, web-freundlichen dpi-Zahl abspeichern. Die kostenlose Version von Pixlr speichert eure Bilder zum Beispiel automatisch mit 72 dpi, und bei Canva könnt ihr fürs Web speichern, sodass ihr eine PNG-Datei mit 92 dpi erhaltet.

Spickzettel: Dateigröße, Bildgröße und Auflösung

Die wichtigsten Grundbegriffe habt ihr jetzt drauf, oder? Super, dann kommen hier ein paar Faustregeln für die richtige Anwendung:

  •    Große Bilder oder Hintergründe sollte nie mehr als 1 MB haben.
  •    Für die meisten anderen Bilder reichen sogar 300 KB oder weniger.
  •    Wenn ihr ein ganzflächiges Hintergrundbild nutzt, empfehlen wir euch eine Bildbreite von 2000 Pixel.
  •    Sofern vorhanden, nutzt immer die Option „Für Web speichern“.
  •    Ihr könnt ein großes Bild spielend verkleinern, doch es ist problematisch, ein kleines Bild zu vergrößern. Die Kollegen im Pixlr-Support-Center bringen es sehr schön auf den Punkt: „Wenn ihr ein Bild mit 100×100 Pixel habt und es in ein atemberaubendes YouTube-Banner mit 2560×1440 Pixel verwandeln möchtet, erhaltet ihr ein verpixeltes und unscharfes Bild … Es ist etwa so, als würdet ihr versuchen, mit zehn Litern Wasser einen Swimmingpool zu füllen.“

Was ist, wenn euer Bild zu groß für eure Website ist?

Wenn ihr eine gute Digitalkamera habt, könnt ihr damit Fotos aufnehmen, die mehrere MB groß sind – also deutlich mehr als das, was ihr für eure Website benötigt. Auch Stockfotos sind oft ziemlich groß. Falls euer Bild also mehr als 1 MB hat, gibt es mehrere Möglichkeiten:

  •    Die Größe des Bildes ändern. Wenn euer Foto 5000 Pixel breit ist, könnt ihr es problemlos auf 2000 oder 1200 Pixel Breite skalieren – oder noch kleiner, je nachdem, wie ihr es auf eurer Website einsetzen möchtet. So könnt ihr die Dateigröße erheblich reduzieren. Achtet bei der Größenanpassung aber darauf, dass die Proportionen gleich bleiben, damit ihr euer Bild nicht verzerrt.
  •    Die Auflösung reduzieren. Wie schon erwähnt reduzieren Programme wie Pixlr und Canva die Bildauflösung automatisch auf ein web-freundliches Maß (72 dpi bzw. 92 dpi). In Photoshop könnt ihr das mit der Option Für Web speichern tun. Viele andere Bildbearbeitungsprogramme bieten auch die Möglichkeit, „Speichern unter“ zu wählen und die Qualitätsstufe dort anzupassen.
  •    Kostenlose Software nutzen. Mit den Tools TinyPNG und TinyJPG könnt ihr euer Bild ohne sichtbaren Qualitätsverlust schnell und kinderleicht komprimieren.
Beispiel-Foto im Bearbeitungsmodus bei Pixlr

Mit Pixlr ist es ganz einfach, die Bildgröße zu verändern. Das Original-Stockfoto hatte 6302×4789 Pixel und 16,2 MB, war also viel zu groß für meine Website. Mit Pixlr habe ich es auf 1000×760 Pixel verkleinert und so auch die Dateigröße auf eine web-freundlichere Größe von nur 132 KB reduziert.

4. Größe und Stil: Schafft eine klare Linie

Kommen wir zum nächsten Punkt: dem Stil und der Größe bzw. Proportion der Bilder. Ganz sicher ist es euch auch schon aufgefallen, dass eine Website viel professioneller und ansprechender wirkt, wenn die Bilder zusammenpassen. Eine einheitliche Linie hilft euch auch dabei, Texte, Rubriken und alles andere auf eurer Seite auszurichten. Um zu sehen, was wir meinen, werft einfach einen Blick auf die folgenden Beispiele.

Auf der ersten Website meines fiktiven Cafés haben wir ein Bild im Hochformat und zwei im Querformat. Dass die Fotos unterschiedlich ausgerichtet sind, lässt die Website ein ziemlich konfus wirken.

Beispiel-Screenshot mit uneinheitlichen Bildformaten

In diesem Beispiel sind die Bilder unterschiedlich groß und passen nicht zusammen – dadurch sieht die Website unstrukturiert aus.

Im nächsten Beispiel habe ich Pixlr verwendet, um jedes Foto auf einheitlichere 1000×760 Pixel zu beschneiden (ihr könnt auch den bei Jimdo integrierten Adobe Image Editor verwenden). Das obere Foto der hellen weißen Kaffeetasse erschien mir irgendwie fehl am Platz, also habe ich es durch eines ersetzt, das hinsichtlich Stil und Farbe meinen beiden anderen Fotos ähnelt.

Ich habe auch mit Pixlrs Effekten experimentiert und ein subtiles Overlay (so ähnlich wie ein Instagram-Filter) über jedes Foto gelegt, um allen ein einheitlicheres Aussehen zu geben. Anschließend habe ich alle Bilder in ein Spalten-Element auf meiner Website hochgeladen.

Beispiel-Foto mit stimmigen Bildformaten

In diesem Beispiel habe ich Bilder ausgesucht, die einen ähnlichen Stil haben und sie auf die gleiche Größe zugeschnitten. Die Website sieht sofort viel stimmiger aus.

Da die Fotos alle dieselbe Größe haben und gleich ausgerichtet sind, passen sie perfekt in eine Spalte, meine Absätze in eine andere. Es sind keine Anpassungen und kein Herumschieben erforderlich!

Zuschneiden eines Fotos mit Pixlr

So sieht es aus, wenn man mit Pixlr ein Bild zuschneidet.

5. Alt-Text: Der SEO-Kick

Tadaa … und schon sind wir bei der letzten Empfehlung. Eure Bilder haben jetzt die richtige Größe und sehen großartig aus – wir haben es also fast geschafft. Werfen wir nun noch einen Blick auf das Thema Suchmaschinenoptimierung. Genau genommen geht es um ein Detail, über das viele nicht großartig nachdenken: den Alt-Text.

Das Alt-Attribut ist eine Information, die Google & Co. zu verstehen gibt, was auf dem Bild zu sehen ist. Dementsprechend solltet ihr im Alt-Text mit einem kurzen, aussagekräftigen Satz (ggf. inklusive Keywords) beschreiben, was das Bild anzeigt.

Ist kein Alt-Text eingetragen, übernimmt Google automatisch den Dateinamen und wertet ihn als Beschreibung für das Bild. Jedoch heißen Bilder häufiger mal Foto1.jpg oder Screenshot_2017_06_02.

Wenn euch das bekannt vorkommt, widmet zukünftig lieber jedem Bild einen kleinen Moment Zeit und setzt einen zutreffenden Alt-Text. So braucht ihr nicht alle Dateien auf eurer Website umzubenennen – was alternativ jedoch auch eine Möglichkeit ist, eure Bilder für SEO zu optimieren.

Und denkt daran: Sobald ihr ein Bild auf eurer Website hochgeladen habt, ist sein Dateiname bzw. der Alt-Text öffentlich. Wählt also lieber keinen peinlichen Namen ;) Hier findet ihr einige weitere Tipps, wie ihr einen guten Alternativ-Text schreibt.

Hinweis: Das Ausfüllen von Alternativ-Texten und Untertiteln ist gut für die SEO, aber betreibt bitte kein „Keyword Stuffing“. Beschreibt einfach nur euer Bild in treffenden Worten. Wenn ihr irrelevante Keywords benutzt oder sie viel zu häufig verwendet, werdet ihr mit ziemlich hoher Wahrscheinlichkeit von den „Suchmaschinengöttern“ bestraft ;)

Untertitel und Alt-Text bei Jimdo

Vergesst nicht, beim Hochladen Untertitel und Alternativ-Text auszufüllen.

Zusammengefasst: Bildoptimierung für Design und SEO

Okay, sehen wir uns die fünf Punkte doch noch mal anhand des Beispiels meiner fiktiven Café-Website an. Ich habe ein Foto von einer Kaffeetasse auf Unsplash gefunden. Als ich es heruntergeladen habe, lautete der Name fN6hZMWqRHuFET5YoApH_StBalmainCoffee.jpg. Es hatte 2509×1673 Pixel und war 586 KB groß – nicht völlig übertrieben, aber immer noch viel größer als nötig, um es als kleines Foto auf meiner Website anzuzeigen. Um dieses Bild zu optimieren, würde ich Folgendes tun:

  1. Ich nutze ein Programm wie Pixlr, um das Bild zu beschneiden und seine Größe zu reduzieren. In meinem Beispiel entscheide ich mich für 1000×760 Pixel. Wenn es quadratisch sein soll, funktioniert 1000×1000 Pixel ebenso gut.
  2.  Ich checke die Dateigröße. Nachdem ich es beschnitten habe und von Pixlr heruntergeladen habe, beträgt die Dateigröße nur noch 117 KB – perfekt!
  3.  Ich lade es als Foto-Element hoch
  4. Ich fülle den Alternativ-Text aus. Zur Sicherheit füge ich auch noch einen Untertitel hinzu.

Denkt immer daran: Übung macht den Meister! Auch wenn euch diese Checkliste gerade ziemlich lang vorkommt, insbesondere wenn ihr viele Bilder hochladet – seid euch gewiss, dass ihr mit der Zeit schneller und schneller werdet. Vielleicht setzt ihr euch diesen Artikel einfach als Lesezeichen, dann könnt ihr immer wieder einen Blick hineinwerfen.

Anschließend werden eure Bilder besser aussehen, eure Website wird schneller geladen, und letztendlich profitiert auch euer Ranking bei Google & Co. Macht es euch zur Gewohnheit, eure Bilder zu optimieren, und eure gesamte Website wird einen Riesenschritt nach vorn machen.


Ihr seid auf den Geschmack gekommen? Dann checkt doch auch mal unsere Schritt-für-Schritt-Anleitung „Wie erstelle ich eine Website“ – darin haben wir euch noch mehr hilfreiche Design-Tipps zusammengestellt.