Bilder werten eine Internetseite enorm auf und geben ihr Emotionen und einen besonderen Ausdruck. Deshalb sind Bilder auf einer Internetseite unverzichtbar.
Allerdings gibt es da auch Fallstricke. Die Ladezeit einer Internetseite ist mittlerweile enorm wichtig geworden und spielt bei der Bewertung deiner Website für die Suchmaschine eine große Rolle. Deshalb solltest du die Bilder, die du auf deiner Seite verwendest, bestmöglich optimieren. Damit weder die Qualität der Bilder noch die Performance deiner Internetseite leiden.
Den Pagespeed deiner Internetseite kannst du entweder mit Google PageSpeed Insights oder auch mit den Tool GTmetrix.
Hier sind 5 Tipps, wie du deine Bilder fürs Web optimieren kannst:
1. Format der Bilder
Wenn möglich nur Bilder in JPEG (auch JPG), PNG oder GIF-Datei hochladen.
JPEG-Format: alle Bildbearbeitungsprogramme können JPG heute hervorragend komprimieren.
WICHTIG: Immer die Originaldatei behalten und nicht mit der komprimierten Datei Überspeichern, da es nicht wiederhergestellt werden kann.
PNG-Format: Der Unterschied zu JPEG liegt darin, dass eine besseren Transparenz in einer verlustfreien Komprimierung erreicht werden kann.
GIF-Format: Animierte GIF-Bilder. Nur bedingt einsetzen.
2. Größe der Bilder
Bilder sollten in folgenden Größen hochgeladen werden, damit die Ladezeit nicht überstrapaziert wird.
Galeriebild (ohne Großansicht): Seitenlänge ca. 500 px
Galeriebild (mit Großansicht): Seitenlänge maximal 1400 px
Headerbilder: maximal 1.920 x 1.280 px
3. Bilder komprimieren
Am besten lässt sich die Größe der Bilder in Photoshop komprimieren. Dort sollte man wie folgt vorgehen: Auf „Datei“, „Exportieren“ und „Für Web speichern“ klicken. Anschließend könnt ihr im Menü das Dateiformat und die Bildgröße in Pixeln auswählen. Um einen guten Wert zwischen Ladezeit und Qualität zu erzielen, wählt bei JPG „Hoch (60)“ aus. Speichert das Bild anschließend unter einem anderen Namen, damit das Originalbild erhalten bleibt.
Die Bilder sollten als „RGB“ ausgegeben werden. Ältere Browser können Bilder in CMYK nicht darstellen.
Wer Photoshop nicht zur Verfügung hat, für denjenigen gibt es einige kostenlose Online-Komprimierung-Tools, z. B. das https://compressjpeg.com/de/ oder auch https://tinypng.com.
4. Bilder benennen
Noch ein kurzer Hinweis zu dem Dateinamen, der für die Suchmaschinenoptimierung (SEO) auch relevant ist. Der Dateiname des Bilder sollte folgende Komponenten enthalten:
- Keine Leerzeichen – stattdessen Bindestriche
- Keine Großbuchstaben
- Keine Umlaute (ä, ü, ö)
- Keine Sonderzeichen (&, ?, !)
Ein Beispiel wie ein Dateiname aussehen kann: bilder-internetseite-bearbeiten.jpg
MACHEN SIE SICH SICHTBAR!
Gerne erstellen wir einen SEO-Audit Ihrer Website, um zu sehen, welche Optimierungspotenziale sich dort verbergen.
