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.

Bildbeschriftung in WordPress

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.

Screenshot tinypng Beispiel webp

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/

Das könnte dich auch interessieren

WordPress Menü Button für Divi

WordPress Menü Button für Divi

Im Divi Theme ganz einfach einen Call2Act im Menü einfügen Folge hier der Schritt für Schritt Anleitung oder schau dir das Video an: https://youtu.be/4HbpTV8ZQPs So sieht unser Endergebnis aus: 1. Gehe zum Theme Customizer und rufe dort "Zusätzliches CSS" auf....

WordPress Menü erstellen

WordPress Menü erstellen

Folge dieser einfachen Schritt für Schritt Anleitung: Standard Menüpunkte 1. Logge dich in dein Wordpress Dashboard ein und wähle im linken Menü unter dem Punkt "Design" -> Menü aus. 2. Klicke auf "erstelle ein neues Menü" und vergib einen Namen, z.B. Hauptmenü 3....

2 Kommentare

  1. 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.

    Antworten
    • Freut mich Petra 🙂

      Antworten

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert