Die Bilder für eine Website zu optimieren ist aus zweierlei Gründen wichtig:
- Die Ladezeit der Webseite verbessern
- 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 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:
… 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/
Danke für die Infos, Sophie! Schön klar übersichtlich und für mich als ganzer Leitfaden, statt Häppchen hier und da, gut umzusetzen.
Freut mich Petra 🙂