So optimierst du die Bilder für deine Webseite

Die Bilder für eine Website zu optimieren ist aus zweierlei Gründen wichtig:

1. Die Ladezeit der Webseite verbessern
2. Dein SEO

Wenn ich die Betreuung von bestehenden Websites übernehme, ist es das, was am häufigsten nicht beachtet wurde. Die Bilder wurden vor dem Upload nicht für die Webseite optimiert. Sprich, die Maße der Bilder wurden nicht angepasst und die Dateigröße auch nicht reduziert. Das hat zur Folge, dass ich oft auf Websites Bilder sehe, die 4000 x 3000 px groß sind und gerne mal eine Dateigröße von mehreren MB haben.

Auch die Dateinamen werden oft so übernommen, wie die Kamera sie vorgibt: img12345…. das ist wertlos für Suchmaschinen.

Wie du Deine Bilder vor dem Upload optimieren solltest:

Dateinamen optimieren und Keywords verwenden

Deine Optimierung beginnt bei einem aussagekräftigen Dateinamen, verwende hier möglichst schon Dein(e) Keyword(s); wenn das nicht passt, verwende trotzdem einen aussagekräftigen Dateinamen, zum Beispiel, was auf dem Bild zu sehen ist. Das hat in der Regel mit deinem Thema zu tun.

Verwende für den Dateinamen KEINE Umlaute, Sonderzeichen oder Leerzeichen. Besonders Umlaute in Dateinamen haben schon oft dazu geführt, dass Bilder schlichtweg im Safari Browser nicht angezeigt wurden.

Die Metadaten deiner Bilder

Sobald du ein Bild hochgeladen hast, bietet Dir WordPress die Möglichkeit an, dein Bild zu beschriften. Diese Felder hast du zur Verfügung:

• Titel. So wird der Name deines Bildes in der Mediathek angezeigt. Hier wird automatisch der Dateiname übernommen; das kannst du entsprechend anpassen. Der Titel wird auch manchmal bei Mouseover angezeigt oder in Galerien.
• Beschriftung: Ergänzt das Bild mit einer kurzen Erklärung. Wird auch in Galerien angezeigt.
• Alternativtext: der wichtigste Punkt. Dieser wird von Suchmaschinen ausgelesen und ist somit wichtig für dein SEO. Ebenso wichtig für sehbhinderte Menschen (Stichwort barrierefreies Webdesign). In diesem Feld beschreibst du, was auf deinem Bild zu sehen ist. So können auch Menschen, die sich deine Website vorlesen lassen, sich vorstellen, was auf dem Bild zu sehen ist.
• Beschreibung: ist eher intern als zusätzliche Info für dich zu sehen.

Das richtige Dateiformat – png, jpg oder webp?

Für Fotos verwendest du am besten das *.jpg-Format, das ist von der Dateigröße her kleiner als zum Beispiel *.png. PNG verwendest du nur, wenn Dein Bild transparente Bereiche hat oder beschriftet ist. Bei Text auf Bildern hast du bei dem jpg-Format oft das Problem, dass er verschwommen dargestellt wird.

Noch nicht so verbreitet ist das neue webp-Format – dabei ist es ein absoluter Gamechanger. Webp kannst du auch für Bilder mit Transparenz verwenden und es verringert die Dateigröße deines Bildes erheblich.

Probleme mit der Darstellung von webp? Hier könnte sich ein Blick beim Hoster lohnen. Bei meinem Hoster Raidboxes* muss ich die Unterstüzung für webp aktivieren.

Die richtigen Bildmaße für Deine Webseite

Die Bildmaße müssen in der Regel immer angepasst werden. Die Standardeinstellung der Kameras sind ja mindestens 4000 x 3000 px… oder noch größer. Wie groß deine Bilder sein sollten, hängt natürlich vom Einsatzzweck ab. So benötigst du für Blogbeiträge kleinere Bilder als zum Beispiel für ein Headerbild. Hier ein paar Anhaltspunkte für dich:

Blog: 640 x 480 px bis 800 x 600 px

Header: 1280 x 720 bis max 1920 x 1280 px – wenn du eine wirklich gute Auflösung benötigst

Bildmaße kannst du mit jedem Grafikprogramm anpassen (Gimp oder Paint) oder auch online mit:

https://www.iloveimg.com/de/bild-skalieren

Dateigröße der Bilder reduzieren

Bitte auch hier sehr achtsam sein, ich sehe sehr oft, dass Bilder mit mehreren MB hochgeladen werden – das ist einmal für die Ladezeit ganz schlecht – denke hier auch an Webseitenbesucher, die mobil surfen – und dann bläht es natürlich auch deine WordPress-Installation auf, was sich dann auch beim Backup bemerkbar macht. WordPress legt standardmäßig für jedes hochgeladene Bild weitere Formate an, dass heißt, der benötigte Speicherplatz vervielfacht sich.

Hier siehst du ein Beispiel, wie stark die Verkleinerung durch Webp gegenüber png ist. Ausgangsbild hatte 1 MB, PNG noch 262 KB und WEBP nur noch 38 KB. Es lohnt sich also auf jeden Fall.

Ich verwende zum Komprimieren der Bilddateien dieses Onlinetool (unterstützt mittlerweile auch webp:

https://tinypng.com/

… oder, wenn du Deine Bilder beim Hochladen auf Deine Webseite automatisch optimieren lassen möchtest, kannst Du auch ein Plugin verwenden:

https://de.wordpress.org/plugins/wp-smushit/

Damit kannst du dir das Leben schon erleichtern, allerdings werden In der kostenlosen Version Bilder bis 1 MB optimiert und es bedeutet ein zusätzliches Plugin. Ich mag lieber den Weg über tinypng, so habe ich die volle Kontrolle darüber.

Nachtrag:

Eine aufmerksame Leserin meines Blogs hat mir ein weiteres Tool für die Verkleinerung der Dateien empfohlen, das scheinbar noch eine bessere Optimierungsqualität hat als tinypng. Bei meinem eigenen Test konnte ein Bild tatsächlich um satte 10 % mehr in der Dateigröße reduziert werden. Hier ist der Link: https://www.websiteplanet.com/de/webtools/imagecompressor/