Wenn Sie diesen Beitrag gefunden haben, dann interessiert Sie wahrscheinlich das Thema „Bildoptimierung für Websites“, die Erhöhung der Performance und wie Sie eine Website schneller machen können. Die Bildoptimierung für Websites kann einerseits offline über ein Bildbearbeitungsprogramm (zB Adobe Photoshop) erfolgen, oder aber auch online durchgeführt werden. In der Praxis hat sich heraus gestellt, dass eine Kombination aus Offline- und Online-Maßnahmen vielleicht ganz sinnvoll sind. Mehr dazu in diesem Beitrag.
Mit WordPress Bilder optimieren
Das in diesem Beitrag zu sehende Titelbild ist eine Photoshop-Montage. Ein Segelschiff in einem mit Wasser befüllten Waschbecken ist wohl kaum in der Realität zu sehen. Aber auch anderen Bildern und Grafiken in den Formaten .jpg, .png, usw … schadet es nicht, wenn diese vor dem Upload in einem Bildbearbeitungsprogramm „webtauglich“ gemacht werden. Dabei ist beispielsweise bei .jpg-Bildern auf die Auflösung (dpi / dots per inch = Pixel pro Zoll) der Bilddatei zu achten.
Über die Auflösung von Bilddateien: dpi
Eine Auflösung von 300 dpi (Druck-Qualität) ist beispielsweise für das Web viel zu hoch (die Datei ist viel zu groß = hohe Ladezeit). In der Regel empfehle ich eine Auflösung von 72 dpi für die Nutzung auf Websites. Dies sollte bei einem halbwegs guten Foto vollkommen ausreichend sein. Und dennoch ist das in den meisten Fällen immer noch alles, was man tun kann, um die Dateigröße zu minimieren, ohne dabei Qualitätsverlust erdulden zu müssen.
.png Dateien sind ladezeittechnisch meist sehr problematisch
Einer der wesentlichen Vorteile von .png-Dateien ist die mögliche Transparenz des Hintergrundes innerhalb der Bilddatei. Bei einer ladezeit-freundlicheren .jpg-Datei kann diese Transparenz nicht erzeugt werden. Der Nachteil von .png-Dateien ist die oftmals hohe Dateigröße. Speziell wenn es sich um Fotos mit vielen Farben handelt, wächst die Dateigröße schnell um ein Vielfaches an.
Die Lösung: das WebP-Bildformat
Grundsätzlich ist es mit dem Bildformat .webp möglich, dass man mit Bildern für Websites bis zu einem Format von 1.920 x 1.080 px unter 100 Kilobyte (100 kb) pro Datei auskommen kann, ohne einen Qualitätsverlust mit bloßem Auge sehen zu können. Dabei ist es mit dem Bildformat .webp zusätzlich auch möglich, die Bilder mit transparentem Hintergrund auszustatten. Anders formuliert bedeutet das, dass WebP-Bilder und Grafiken die Vorteile von .jpg und .png vereint und zusätzlich noch die Dateigrößen minimiert, sprich die Ladezeit von Websites reduziert.
Kleiner Nachteil des WebP-Bildformates
Ein Nachteil von WebP ist, dass es erst jetzt im Jahr 2024 auf den meisten gängigen Browsern mittlerweile angezeigt werden kann, obwohl dieses Datei-Format bereits im Jahr 2010 von Google dankenswerterweise entwickelt worden ist. Es gibt immer noch einen kleinen Anteil von Browsern (bzw. noch immer verwendeten Browser-Versionen) welche .webp-Dateien nicht anzeigen können. Wenn Sie also Ihre Website mit .webp-Dateien ausstatten, dann kann es sein, dass auf jenen alten Browsern Ihre Website ohne die Bilder angezeigt wird. Die Anzahl jener alten Browser dürfte jedoch von Tag zu Tag sinken, daher kann man sich nun, im Jahr 2024, durchaus trauen, auf WebP zu setzen.
Es gibt für WordPress beispielsweise Plugins und Funktionen, welche es ermöglichen, dass auf alten Browsern die .jpg-Version angezeigt wird. Nur neue Browser kommen in den Genuss von WebP. Natürlich kostet auch diese zusätzliche Funktion wiederum System-Ressourcen, weshalb ich eher Aufgrund des Kosten-Nutzen-Faktors eher davon abraten würde.
Bilder und Grafiken in WebP konvertieren
Es gibt nun grundsätzlich zwei verschiedene Herangehensweisen, wie man für sich am besten damit umgeht: bereits offline im Vorfeld oder online im Nachhinein.
WebP offline erstellen
Wenn Sie über ein Bildbearbeitungsprogramm, wie den Adobe Photoshop mit Zusatz-Plugin WebPShop verfügen, dann können Sie die Bilder und Grafiken für die Website bereits alle offline (vor dem Upload) richtig im .webp-Format erstellen. Dies spart im Grunde genommen die meisten Ressourcen für Ihren Server. Das Arbeiten mit WebP-Dateien in Photoshop ist im Prinzip keine Hexerei, es muss nur extra eingerichtet werden.
WebP online erstellen
Die zweite Möglichkeit ist, dass Sie die Bilder in den (wahrscheinlich gewohnten) Formaten .jpg oder .png am Server hochladen und online (via WordPress beispielsweise durch ein Plugin) in das WebP-Format konvertieren lassen. Wenn Sie den Elementor als Editor benutzen, dann können Sie dies auch nachträglich mit dem Zusatz-Plugin Image Optimizer by Elementor (Achtung: kostenpflichtig !!) durchführen. Achtung: bei bereits bestehenden Bildern (.jpg, .png, etc …), die in Verwendung sind, müssen Sie die jeweilige Inhaltsseite / Beitrag im Elementor neu öffnen und das Bild neu einsetzen, damit es im Frontend aktiv ist. Bei neu hochgeladenen Bildern wird bei entsprechender Einstellung im Plugin jedes Bild automatisch in das .webp-Format innerhalb von ein paar Sekunden konvertiert.
Das Einsparungspotenzial durch Einsatz von WebP
Um zu demonstrieren, wieviel Einsparungspotenzial in der Verwendung von WebP – im Gegensatz zu .jpg – steckt, möchte ich Ihnen das Anhand des Titelbildes meiner persönlichen Homepage zeigen:
Das Originalbild im .jpg-Format hat eine Dateigröße von 92 kb. Das bedeutet, dass sich durch die Konvertierung des Bildes in das WebP-Format eine Einsparung um 43 kb ergeben hat. Stellen Sie sich vor, dass alle Bilder auf Ihrer Website sich um einen ähnlichen Faktor ohne Qualitätsverlust reduzieren.
Fragen zum Einsatz von WebP auf Ihrer Website
Ich hoffe, dass ich Ihnen dabei geholfen habe, Fragen rund um das Thema „WebP“ zu beantworten. Sollten Sie dennoch Fragen dazu haben, können Sie mir gerne eine Anfrage senden.
Sollten Sie Hilfe für Ihre WordPress-Website benötigen, so kann ich Ihnen zu preiswerten Konditionen auch hier meine Dienste anbieten. Senden Sie auch dazu einfach eine unverbindliche Anfrage.
Weitere Informationen zu WebP
WebP ist ein von Google entwickeltes Bildformat, welches sowohl verlustbehaftete als auch verlustfreie Komprimierung unterstützt. Es wurde entwickelt, um die Dateigröße von Bildern zu reduzieren, ohne dabei die Bildqualität signifikant zu beeinträchtigen. Dies macht WebP ideal für den Einsatz im Internet, da es die Ladezeiten von Webseiten verkürzen und den Datenverbrauch senken kann.
Hauptmerkmale von WebP:
- Kleinere Dateigröße: WebP-Bilder sind in der Regel deutlich kleiner als JPEG- oder PNG-Bilder. Dadurch können Webseiten schneller laden und es wird weniger Bandbreite benötigt.
- Verlustbehaftete und verlustfreie Komprimierung:
- Verlustbehaftet: Ähnlich wie bei JPEG, aber WebP bietet oft eine bessere Komprimierung bei gleichbleibender Bildqualität.
- Verlustfrei: Vergleichbar mit PNG, wobei WebP eine kleinere Dateigröße bei gleicher Bildqualität erreichen kann.
- Unterstützung von Transparenz (Alpha-Kanal): Wie PNG unterstützt auch WebP transparente Hintergründe, was es für Logos oder Symbole mit transparentem Hintergrund geeignet macht.
- Animationen: WebP kann auch für animierte Bilder verwendet werden und bietet eine moderne Alternative zu GIFs, allerdings mit besserer Qualität und geringerer Dateigröße.
Wesentlichster Vorteil:
- Schnellere Web-Performance: WebP kann die Ladezeiten von Websites drastisch reduzieren, was sich positiv auf die Performance und Usability der Website auswirkt.
