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 Bildbeschriftung

Sobald du ein Bild hochgeladen hast, bietet Dir WordPress die Möglichkeit an, dein Bild zu beschriften. Der allerwichtigste Punkt dabei ist der sog. Alternativtext. Denn neben dem Dateinamen wird er direkt von den Suchmaschinen ausgelesen. Titel und Beschriftung werden je nach Theme von Galerien verwendet und die Beschreibung findest du auf der Anhang-Seite des Bildes; normalerweise wird es nicht benötigt.

Das richtige Bildformat

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. 

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.

Ich verwende zum Komprimieren der Bilddateien dieses Onlinetool:

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/