Du solltest deine Bilder optimieren fürs Web – denn wenn du nicht optimierte Fotos auf deine Website lädst, könnte deine Performance leiden.

Neben dem korrekten Seitenverhältnis und der richtigen Bildgröße sollte auch die Dateigröße optimiert werden. Grundsätzlich gilt, je kleiner, desto besser, aber falls du Fakten brauchst: Jedes Bild sollte etwa zwischen 60kb und 200kb groß sein.

(Zum Thema Bildgröße habe ich übrigens einen Artikel geschrieben, der dir helfen könnte – Die richtige Bildgröße auf deiner Divi Webseite)

So verlangsamen die Bilder die Seiten nicht zu sehr. Dies ist besonders für SEO wichtig, weil die Seitengeschwindigkeit ein wichtiges Kriterium für Suchmaschinen ist, die Seite hoch in den Suchergebnissen anzuzeigen. Und wenn viele große Bilder, die Seite sehr groß machen, wird sie langsam.

Hintergrund ist hier die Nutzerfreundlichkeit der Seite – wenn sie nur langsam lädt, ist ein Besuch frustrierend. Zudem springen viele Nutzer, die den Weg auf die Seite gefunden haben vorzeitig ab, wenn es hakt.

Die üblichsten Dateiformate sind JPEG und PNG.

JPEG sind am besten für Fotos zu nutzen, weil sie viele Farben enthalten. JPEGs können komprimiert werden um die Dateigröße zu reduzieren.

PNGs sind geeignet für Screenshots, Icons, Logos und Buttons . Außerdem werden sie für Bilder verwendet, in denen es transparente Elemente, z.B. Hintergründe gibt, da JPEGs diese nicht transparent darstellen können.

Bevor ein Foto hochgeladen wird, sollte die Bildgröße mit dem Verwendungszweck im Hinterkopf festgelegt werden, d.h. wenn ich ein Bild als Header nutzen möchte, sollte es entsprechend groß sein. Wenn ein hingegen nur in einer Spalte neben einem anderen Bild erscheint, sollte es entsprechend klein sein.

Und falls das gleiche Bild mehrfach verwendet wird, z.B. sowohl im Header als auch in einer Spalte erscheint, sollte es entsprechend auch mehrfach optimiert und hochgeladen werden.

Theoretisch könnten wir das Headerbild auch in einer Spalte einfügen und es wird skaliert. Aber das würde bedeuten, dass die Seite unnötig groß wird – und hier wären wir wieder beim Thema Geschwindigkeit.

Wie werden Bilder fürs Web optimiert?

Zunächst stellen wir eine Auflösung von 72dpi ein – das hält die Datei schlank und ist für Monitore üblich. Zum Vergleich – im Printbereich wird üblicherweise eine Auflösung von 300dpi gewählt, damit das Foto auch ausgedruckt gestochen scharf aussieht.

Auf Monitoren reicht aber eine Auflösung von 72dpi. Es ist sehr wichtig, dass als erstes die Auflösung eingestellt wird, weil die Umstellung der Auflösung die Bildgröße verändert.

Anschließend schneiden wir das Bild auf die gewünschte Größe zu.

In Photoshop und anderen Bildbearbeitungsprogrammen gibt es die Möglichkeit, das Seitenverhältnis vorher einzustellen. Ansonsten kann es auch manuell berechnet und eingestellt werden.

Wenn das Bild die richtige Auflösung und Größe hat, ist es fürs Web optimiert und kann nun exportiert werden. Hier können wir nun die Qualität herunterstufen, um eine noch kleinere Dateigröße zu erreichen. Hier ist es wichtig, die richtige Balance zwischen Bildqualität und Bildgröße zu erreichen, denn das Bild soll weiterhin schön und scharf aussehen. Üblicherweise bekommt man diesen Spagat bei etwa 70-75% hin.

SEO nicht vergessen!

Einen letzten Schritt gilt es beim Hochladen der Bilder noch zu beachten – der Dateiname als auch die Beschriftung des Bildes und der Alt-Text sollte mit relevanten Schlagwörtern erfolgen, die in den Feldern ausgefüllt werden. Dieses ist für SEO wichtig, denn der ALT Text des Bildes kann auch von Suchmaschinen gelesen werden. 

Praktisch heißt das, dass die Datei nicht 12487.jpg heißen sollte, sondern z.B. Hausbau-Bungalow-Lippstadt usw.

Die Beschriftung des Dateinamens, Alt-Text und Beschriftung kann identisch sein.

(Es gibt übrigens ein praktisches WordPress Plugin, Format Media Titles, das die Felder automatisch vom Dateinamen übernimmt. Im praktischen SEO Tool von Rank Math ist dieses Feature auch bereits enthalten.)

Falls du mir beim Bilder optimieren in Adobe Photoshop über die Schulter gucken magst, schau dir doch mal das Youtube Video zum Thema an:

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

YouTube immer entsperren