Bilder optimieren – barrierearm und für SEO

Bilder optimieren in 7 Schritten – so geht’s

Das passende Bild perfekt aufbereiten, so dass die Ladezeiten im grünen Bereich sind und es einerseits als Hingucker dient, andererseits zum Verständnis beiträgt – gar nicht so einfach! Dieser Vorgang beginnt immer damit, dass du das passende Motiv wählst.

Die 7 Schritte zum optimierten Bild

1. Motivwahl
2. Bildformat
3. Dateinamen
4. ALT-Tags
5. Dateigrößen
6. Komprimierung
7. Bildunterschrift

1. Das passende Motiv

Bilder lockern einen Text auf, ergänzen Informationen und machen Social Media Postings zum Hingucker. Je sorgfältiger du dein Motiv auswählst, desto einfacher hast du es mit dem Verfassen der ALT-Beschreibung und der Bildunterschrift. Auch das Verfassen von Postings für die Sozialen Medien ist wesentlich schneller erledigt, wenn dein Bild aussagekräftig ist und du dich darauf beziehen kannst.

Was du nicht tun solltest: Das kostenlose Foto der Woche deiner Bilddtenbank verwenden, ein Standarde-Stockfoto nehmen wie es alle anderen tun, auf Nummer Sicher gehen und lieber ein ganz langweiliges Motiv wählen als ein mutiges.

2. Bildformate

Bisher galt durchgehend: JPEG ist das gängigste Format für Fotos, PNG für Grafiken und Logos und Icons und Bilder. Beide lassen sich problemlos komprimieren und Kameras erzeugen meist schon standardmäßig JPG. Doch das WebP-Dateiformat ist auf dem Vormarsch. Das lizenzfreie Dateiformat von Google selbst ist explizit darauf ausgelegt, Bilder auf eine möglichst geringe Dateigröße zu reduzieren. Es verbindet viele Vorteile anderer Formate.

Was du nicht tun solltest: Riesengroße Bilder ohne weitere Bearbeitung einbauen, GIF für Fotos oder JPEG für Schriften verwenden und WebP ignorieren – es wird gerade zum Standard.

3. Dateinamen

Der Name deiner Datei wird mitgelesen und von Suchmaschinen ausgewertet. Statt Dateinamen wie 12345678.jpg solltest du dich also immer darum bemühen, sprechende Dateinamen zu vergeben: foto-bilder-optimieren-tipps.webp zum Beispiel. Jeder Dateiname darf nur einmal vorkommen, sollte kurz und prägnant, gleichzeitig jedoch möglichst aussagekräftig sein. Die Länge variiert in der Regel zwischen 8 und 16 Zeichen. Am besten verwendest du dein wichtigstes Keyword in diesem Namen.

Was du nicht tun solltest: Umlaute, Leerstellen oder Sonderzeichen im Dateinamen verwenden oder viele Bilder einfach durchnummerieren. Statt Leerstellen verwende Bindestriche.

4. ALT-Tags

ALT-Tags oder Alternative Texte werden dann im Browser oder im Lesegerät von Anwender:innen mit Einschränkungen angezeigt, wenn das Bild nicht geladen wird. Wenn dieser Text vorgelesen wird, sollte man also lernen können, was genau auf dem Bild zu sehen ist und wie es in Bezug auf den Inhalt eingesetzt wird. Suchmaschinen werten ALT und Title-Tags aus.

Was du nicht tun solltest: In den ALT-Tag irgendwas pauschal schreiben, um das Feld ausgefüllt zu bekommen. Beschreibe mit dem Tag, was auf dem Bild zu sehen ist und grob warum. Im Fall unseres Titelbilds zum Beispiel „Bilder optimieren: Eine junge Frau zeigt ihren Monitor mit Grafiken“.

Das Eintragen von ALT-Texten funktioniert übrigens auch bei den meisten Social Media Postings:

5. Dateigrößen

Wie klein kann ein Bild sein, damit es noch zu einem guten Nutzererlebnis beiträgt? Wie groß darf es sein, damit es – vielleicht sogar als prächtige Slideshow – deine Besucher:innen begrüßt? Wichtig ist es, hier den optimalen Mittelweg zu finden. Denn wenn du an den Dateigrößen sparst und kleine Fotos einbaust, verschenkst du den Rankingfaktor „Google Bildersuche“, diese nimmt nur Fotos und Grafiken ausreichender Größe erfolgreich an.

Was du nicht tun solltest: Bilder möglichst klein einbauen. Wähle lieber einen Bildausschnitt und kompromiere dann das Ergebnis sorgfältig.

6. Komprimierung

Untersuchungen zufolge verlierst du sofort die Hälfte deiner Website-Besucher:innen, wenn die Ladezeiten sie zum Abwarten zwingen würden. Wenn ein Bild stark komprimiert ist, wirkt sich dies auf die Dateigröße, aber auch auf die Qualität aus. Je komprimierter, desto schlechter die Bildqualität. Nutze daher unbedingt die Optionen für das „Speichern fürs Web“, das die meisten Bildbearbeitungsprogramme bieten. Mit denen wird die Dateigröße automatisch minimiert und gleichzeitig die Bildqualität optimiert.

Was du nicht tun solltest: In der Eile unkomprimierte Bilder hochladen, zum Beispiel in eine Galerie. Prüfe deine Ergebnisse immer mit Tools wie Google PageSpeed. Auch für die Analyse aller Bilder gibt es Tools.

7. Bildunterschrift

Wichtig ist, auch in der mobilen Ansicht, wie sich dein Bild in die restliche Seite einfügt. Klebt es wie eine Briefmarke mittendrin, verdeckt es andere Infos oder hat man Schwierigkeiten, die Bildunterschrift vom restlichen Fließtext zu unterscheiden? Die Unterschrift zu deinem Bild ist deine Chance, eine weitere Info oder etwas Humor ins Spiel zu bringen.

Was du nicht machen solltest: Bilder ohne Quelle oder Namen des Fotografen angeben.

Nicht vergessen: Mobile first

Der Google-Algorithmus setzt grundsätzlich auf die „mobile-first“-Indexierung, die Crawler betrachten sich in erster Linie die mobile Version deiner Website betrachten. Deshalb ist es so wichtig, dass deine Bilder gute Ladezeiten und die passende Größe haben.