Schnell und einfach die Größe und Ladezeit Deiner Website reduzieren
Bilder spielen für das Design und die Botschaft auf Deiner Seite eine entscheidende Rolle. Schenkst Du dem Thema Nachhaltigkeit auch hier die nötige Beachtung, dann wird Deine Website nicht nur ästhetisch aussehen, sondern auch klimafreundlicher und ressourcenschonend sein. Das erreichst Du zum Beispiel, indem Du Bilder mit möglichst geringer Dateigrößen verwendest. Dabei hilft Dir auch das WebP Format.
In diesem Artikel möchte ich Dir erklären
- warum das Format WebP wichtig ist
- welche Plugins Dir dabei helfen können, es einzusetzen und
- wie Du gleichzeitig einen Beitrag zur Nachhaltigkeit leisten kannst.
Wenn Du noch gar nicht weißt, ob Du überhaupt noch an Dateigrößen sparen kannst, teste das ganz einfach unter: https://shortpixel.com/image-compression-test.
Hier gibst Du Deine Webadresse ein und Deine Seite wird auf Einsparpotential bei den Bildgrößen getestet.
WebP für nachhaltige Bildoptimierung und passende WordPress-Plugins
Warum WebP?
Weil WebP alle Vorteile unterschiedlicher Bildformate kombiniert. Somit bekommst Du eine richtig gute Bildqualität, hast aber durch die extreme Bildkomprimierung kurze Ladezeiten. Durch die Reduzierung der Dateigröße wird der Datenverkehr minimiert, was wiederum weniger Energie für den Transfer und die Speicherung benötigt. Das bedeutet eben nicht nur, dass Deine Website schneller lädt, sondern dadurch auch Ressourcen und CO₂ einspart.
Bei WordPress bieten sich ein paar Plugins bieten an, um bereits vorhandene Bilder auf Deiner Website zu komprimieren und dem User als WebP auszuspielen.
Ich zeige Dir die kostenfreien Plugins
- WebP Express (nutze ich persönlich selber) *UPDATE: Nicht mehr. Was ich jetzt mache, liest Du auch unten*
- ShortPixel (Free Version)
- EWWW Image Optimizer (Free Version)
ACHTUNG:
Bevor Du ein Plugin installierst und ausprobierst, solltest Du unbedingt zur Sicherheit ein Backup Deiner Seite machen.
Grundsätzlich installierst Du Plugins, indem Du im Menü auf Plugins und da auf „neues Plugin installieren“ klickst. Oben kannst Du dann in der Suchleiste nach dem Namen des Plugins suchen.
Egal bei welchem Plugin: Um vorher schon qualitativ Hochwertige zu erkennen, stelle sicher, dass das Plugin gut bewertet ist, mit Deiner WordPress Version kompatibel ist und viele Downloads hat. Mehrere Hundetausend oder Millionen Downloads weisen auf eine stabile Laufleistung hin.
3 Datenspartipps zwischendurch:
- Sei Dir vorher bewusst, wo und in welcher Größe Du das Bild einbauen willst.
Beispielsweise braucht ein Bild, das im normalen Inhaltsbereich einer Seite steht, maximal 1080 px in der Breite. Dann ist es so breit, wie der ganze Inhalt. - Lade niemals Originaldateien von Deinem Handy hoch. Sie sind einfach zu groß.
Das Plugin WebP Express
Hier siehst Du meine Einstellungen, die ich nach der Installation für meine Website vorgenommen hatte:
Damit liefert das Plugin automatisch erstellte WebP Bilder anstelle von jpeg/png an Browser aus, die WebP unterstützen.
*UPDATE* mittlerweile lade ich meine Bilder schon als WebP auf die Website hoch und spare mir dadruch ein weiteres Plugin. So kannst Du WebP direkt in WordPress einbinden.
Das Plugin ShortPixel
ShortPixel arbeitet mit Credits. Für jedes komprimierte Bild werden Dir Credits berechnet.
Für mich hat die kostenlose Anzahl an Credits nicht ausgereicht. Vielleicht ist das bei Dir anders. Du bekommst auf jeden Fall einen Hinweis, wenn ShortPixel nicht alle Bilder komprimieren kann und Du Credits dazukaufen müsstest.
So gehst Du vor, um das Plugin zu verwenden:
Du setzt einfach ein Häkchen im Reiter „Advanced“ beim Punkt „WebP versions“. Auch hier werden dann ganz easy Deine Bilder als WebP ausgeliefert.
Wenn Du nicht mit einem Plugin arbeiten willst, bietet ShortPixel auch einen Online Converter für Bilder an. Hier kannst Du bis zu 50 Bilder gleichzeitig hochladen und komprimieren, also mit einer geringeren Dateigröße ausgeben. Du kannst dort bei Settings auch einstellen, dass die Bilder direkt in WebP umgewandelt werden.
Das Plugin EWWW Image Optimizer
Im Reiter „Webp“ setzt Du einen Haken
bei „JPG/PNG nach WebP“ und bei „Webp erzwingen“.
Speichere die Änderungen.
Scrolle jetzt nach unten und Du siehst ein Snippet.
Klicke auf „Setze Rewrite-Regeln ein“ und freu Dich über die Nachricht: Einfügen erfolgreich! Sollte das nicht klappen, sprichst Du am besten mit Deinem Entwickler.
Jetzt kannst Du mit dem Plugin Deine Bilder auf zwei Arten optimieren:
- Massenoptimierung durchführen:
Gehe zu „Medien“ und klicke dort den neuen Bereich „Massenoptimierung“.
Suche nach nicht optimierten Bildern und starte die Optimierung. Dies kann eine Weile dauern.
WICHTIG ZU WISSEN:
Es kann sein, dass mehr Bilder angezeigt werden, als Du hochgeladen hast. Denn jedes Bild wird von WordPress automatisch in zehn bis elf unterschiedlichen Versionen erstellt. - Bildgrößen in der Medienansicht einzeln verkleinern:
Gehe in die Medienübersicht.
Klicke in die Liste und sieh Dir die Bildgrößen an.
Verkleinere sie webfreundlich – in einer idealen Welt unter 100 Kilobyte.
Klicke bei dem von Dir gewünschten Bild auf „Jetzt optimieren“.
Natürlich kannst Du noch cleverer noch mehr Ressourcen sparen. Wie? Wandele Deine Bilder in WebP um, BEVOR Du sie auf Deine Website hochlädst.
JPG in WebP umwandeln
Dafür kannst Du in Photoshop auf „Kopie speichern“ gehen und dort das Datenformat WebP auswählen. Hier kannst Du dann auch individuell noch die Kompression einstellen. Wie Du es von den JPGs gewohnt bist. Ich entscheide meistens für „verlustbehaftet“ und Qualität 80, 90 oder 100, je nach Motiv und Branche.
Solltest Du diese Möglichkeit nicht haben, bieten sich auch Online-Plattformen an, die Deine Bilder einzeln oder auch mehrere auf ein mal konvertieren können. Diesen Service bietet z.B. Convertio kostenlos an.
Fazit:
Wenn Du dich also gefragt hast „Wie verkürze ich die Ladezeit meiner Website?“ So einfach 🙂 Du verbesserst mit der Bildoptimierung aber nicht nur Deine Ladezeiten, sondern beeinflusst dadurch auch Dein Google-Ranking. Denn kleine Bilder bedeuten auch ein schnelleres Pagespeed – eine Win-Win-Win-Win-Situation für Deine Website, Deine Websitebesucher, Dein SEO und die Umwelt. 🙂
Warum für die Umwelt?
Weil je weniger Daten geladen werden müssen, weniger Rechenleistung benötigt wird und so weniger Energie gebraucht wird.
Wenn Du zum Thema Webdesign noch mehr wissen willst, oder Hilfe in der Umsetzung benötigst, dann stehe ich Dir gern zur Verfügung. Schreib mir einfach eine Nachricht an hello@christinstelten.de oder hinterlasse mir eine DM bei LinkedIn🙂
