Was ist WebP? Das Bildformat der nächsten Generation verstehen

WebP ist ein modernes Bildformat, das in der Bildoptimierung große Wellen schlägt. Dank eines ausgefeilten Komprimierungsalgorithmus sind WebP-Bilder klein und behalten gleichzeitig eine hohe Bildqualität.

WebP erfreut sich seit geraumer Zeit wachsender Beliebtheit und wird bereits von vielen Anwendungen übernommen. Deshalb sollten Sie dieses bahnbrechende Bildformat unbedingt kennenlernen, wenn Ihre Website mit dem Trend Schritt halten soll.

Lesen Sie diesen Artikel, um zu erfahren, was WebP ist, wie es funktioniert und wie Sie es auf Ihrer Website implementieren.

Was ist WebP?

WebP ist ein Bildformat der nächsten Generation, das verlustfreie und verlustbehaftete Komprimierung unterstützt und so Bilder klein hält und gleichzeitig eine hervorragende Bildqualität beibehält.

Die Bildoptimierung war schon immer ein entscheidender Bestandteil der Suchmaschinenoptimierung (SEO) der gesamten Website. Doch seit Google Core Web Vitals eingeführt hat, ist es für das SEO-Ranking von Websites noch wichtiger geworden.

Laut Semrush machen Bildsuchen 22,6 % aller Online-Suchen aus. Somit ziehen visuell ansprechende Websites mehr Verkehr an. Andererseits gehören Bilder zu den größten Vermögenswerten, die eine Website verlangsamen können.

Die Balance zwischen qualitativ hochwertigen Bildern und guter Optimierung zu wahren, ist für die meisten Websites eine Herausforderung. Die beliebtesten Bildformate JPEG und PNG haben Vor- und Nachteile, aber im Allgemeinen müssen Sie Qualität zugunsten der Größe opfern oder umgekehrt.

Google stellte 2010 eine Antwort auf die Herausforderung der Bildoptimierung vor. 2010 stellten sie ihr eigenes neues Format namens WebP vor. Es ist eine Ableitung des VP8-Videoformats und nutzt dessen Komprimierungsalgorithmus, um relativ kleine Bilder bei gleichbleibender Qualität zu erstellen.

Wie funktioniert WebP?

Die Technologie, die WebP-Bildern zugrunde liegt, basiert auf dem Komprimierungsalgorithmus des Videoformats VP8. Mithilfe fortschrittlicher Vorhersagemodelle verarbeitet die WebP-Komprimierung nur die wesentlichen Teile eines Bildes und ignoriert die weniger wesentlichen Teile.

Dadurch sind die WebP-Dateien bei gleichem SSIM (Structural Similarity Index Measure) deutlich kleiner als JPEG- und PNG-Dateien.

Hier können Sie eine WebP-Galerie von Google sehen, die die Qualität und Größe der gleichen Beispielbilder in JPEG vergleicht und WebP-Format.

PNG-Bilder unterstützen nur verlustfreie Komprimierung, während JPEG-Bilder nur verlustbehaftete Komprimierung haben. Mit dem WebP-Format können Sie wählen, welche der beiden Komprimierungen Sie anwenden möchten.

Verlustbehaftete Komprimierung

Die verlustbehaftete Komprimierung in WebP-Bildern nutzt eine prädiktive Codierungsmethode. Der Komprimierungsalgorithmus zerlegt das gesamte Bild in benachbarte Pixelblöcke. Anschließend wird auf der Grundlage der bereits verarbeiteten Daten der Wert der benachbarten Blöcke vorhergesagt und nur die Differenz codiert.

Dadurch ist eine WebP-Datei nach Anwendung der Komprimierung deutlich kleiner. Je nach Komprimierungsstufe nimmt die Qualität teilweise ab. Verlustbehaftete Komprimierung wird auch in JPEG-Dateien verwendet. Allerdings sind WebP-Dateien basierend auf demselben SSIM-Index 25–34 % kleiner als JPEG.

Verlustfreie Komprimierung

Bei der verlustfreien Komprimierung gibt es auch nach der Komprimierung der Daten keinen sichtbaren Qualitätsverlust. Diese Art der Komprimierung erzeugt jedoch größere Bilddateien. PNG ist eines der am häufigsten verwendeten Formate.

Die verlustfreie WebP-Komprimierung nutzt Daten aus bereits verarbeiteten Teilen eines Bildes, um neue Pixel zu rekonstruieren. Diese Methode generiert kleinere Dateien im Vergleich zu PNG-Dateien bei gleicher Qualität. Im Durchschnitt sind WebP-Dateien mit verlustfreier Komprimierung 26 % kleiner als PNG-Dateien.

Vorteile von WebP

Es gibt einen Grund, warum immer mehr Websites das WebP-Format annehmen. Es überwindet viele Unzulänglichkeiten der JPEG- und PNG-Formate und bringt neue Funktionen. Im Folgenden werden wir die bemerkenswertesten Vorteile der Verwendung von WebP untersuchen.

Überlegene Komprimierung für kleinere Dateigrößen

Einer der wichtigsten Vorteile der Verwendung von WebP-Bildern ist die überlegene Komprimierung, die eine hervorragende Bildqualität beibehält und gleichzeitig die Dateigröße erheblich reduziert. Infolgedessen bleibt Ihr Web-Speicherplatz in Schach, so dass Sie den zusätzlichen Platz für andere Website-Funktionen nutzen können.

Dies ist besonders wichtig für große E-Commerce-Websites mit einer großen Anzahl von Bildern. Die Reduzierung der Dateigröße wird viel Speicherplatz auf dem Webserver freigeben.

Reduzierte Bandbreitennutzung

Viele Hosting-Provider erlegen monatliche Bandbreitenlimits für die Website. Es ist die Datenmenge, die Sie an Besucher übertragen können. Mit WebP kann Ihre Website mehr Verkehr generieren, da sie den Inhalt mit weniger Bandbreitenkontingent bedienen wird.

Verbesserte Website-Geschwindigkeit

Je kleiner die Dateien, desto schneller lädt Ihre Website die Seiten für Besucher. Da WebP die Dateigröße der Bilder stark reduziert, wird es die Leistung Ihrer Website dramatisch verbessern.

Verbesserte Suchmaschinenoptimierung (SEO)

Die Bildoptimierung ist ein integraler Bestandteil der Suchmaschinenoptimierung (SEO) der gesamten Website. Eine Website mit reichhaltigen visuellen Inhalten, die schnell geladen wird, wird in den SEO-Rankings höher steigen. Kleine, aber qualitativ hochwertige Bilder zu haben, steigert die SEO Ihrer Website.

Optionen für verlustbehaftete und verlustfreie Komprimierung

PNG-Dateien unterstützen nur die verlustfreie Bildkomprimierung, während JPEG-Dateien verlustbehaftete Komprimierung verwenden. WebP-Bilddateien kombinieren beide Optionen – Sie können den Komprimierungstyp auswählen, der dem Zweck des Bildes entspricht.

Sie können beispielsweise Logobilder verlustfrei komprimieren, um deren Qualität so gut wie möglich zu erhalten. Und Sie können verlustbehaftete Komprimierung für größere und reichhaltigere Bilder verwenden, bei denen der Qualitätsverlust nicht wahrnehmbar ist.

Alpha-Transparenz

Alpha-Transparenz mischt ein Bild mit seinem Hintergrund, um den Effekt von transparenten Bildern zu erzeugen. Der Alphakanal repräsentiert den Grad der Transparenz des Bildes.

Das PNG-Format unterstützt Transparenz, während JPEG diese Funktion nicht bietet. Das WebP-Format unterstützt Transparenz, unabhängig davon, ob verlustbehaftete oder verlustfreie Komprimierung angewendet wird.

Animationsunterstützung

Nur einige Bildformate unterstützen Animation. Die beliebtesten sind PNG und GIF, aber animierte Bilder in diesen Formaten können ziemlich groß sein. Auf der anderen Seite sind animierte WebP-Bilder aufgrund der überlegenen Komprimierung klein.

Nachteile und Einschränkungen von WebP

Das WebP-Bildformat überwindet viele Einschränkungen der älteren alternativen Bildformate, dennoch müssen Sie einige Mängel berücksichtigen.

Browserkompatibilität und Akzeptanz in anderen Anwendungen

Da es sich um ein relativ neues Bildformat handelt, wird WebP nicht in allen Browsern und Anwendungen unterstützt. Obwohl es einen langen Weg zurückgelegt hat und die meisten Webbrowser, wie Google Chrome und Microsoft Edge, es bereits übernommen haben, können einige WebP-Bilder nicht bereitstellen.

Daher sollten Sie die Tatsache berücksichtigen, dass ältere Browser WebP-Bilder auf Ihrer Website nicht visualisieren. In einem solchen Fall müssen Sie einen Fallback-Mechanismus verwenden, um PNG- oder JPEG-Versionen von Bildern bereitzustellen, wenn WebP nicht verfügbar ist.

Sie können die WebP-Integration in dieser Online-Kompatibilitätsprüfung verfolgen. Es zeigt, welche Webbrowser, Anwendungen und Betriebssysteme WebP unterstützen.

Abgesehen von Browsern unterstützen einige Bildbetrachter und andere Grafikprogramme noch keine WebP-Bilder. Zum Beispiel hat Adobe Photoshop erst vor kurzem begonnen, das WebP-Format zu unterstützen. Zuvor mussten Sie das Plugin WebShop installieren, um WebP-Dateien zu bearbeiten. Allerdings hat Photoshop seit Version 23.2 native WebP-Unterstützung eingeführt, und es sind keine Add-ons oder Plugins erforderlich.

WebP-Konvertierung vorhandener Bilder

Eine weitere Komplikation, mit der Sie konfrontiert werden können, ist, wenn Sie sich entscheiden, alle vorhandenen Bilder auf Ihrer Website in WebP-Dateien zu konvertieren. Sie müssen geeignete Software finden, um Bilder in WebP-Dateien zu konvertieren und die älteren Bilder durch die neu erstellten WebP-Versionen zu ersetzen. Selbst wenn Ihre Website-Anwendung über integrierte Funktionen zum Ersetzen oder Konvertieren von Bildern in WebP verfügt, kann dies viel Zeit in Anspruch nehmen und viele Serverressourcen verbrauchen.

Praktische Anwendungen von WebP

Das WebP-Dateiformat bietet viele praktische Anwendungen zur Optimierung der Website-Leistung. Durch die Konvertierung von Bildern können Webentwickler die Dateigröße erheblich reduzieren und die Ladezeiten von Seiten verlängern. Dies wirkt sich positiv auf das Benutzererlebnis aus und verbessert das Suchmaschinenranking.

Content-Management-Systeme wie WordPress bieten auch Werkzeuge für eine einfachere WebP-Integration. Es gibt jetzt viele Plugins für die automatische Bildkonvertierung in WebP, was die Implementierung für Website-Besitzer erleichtert.

Wie verwendet man WebP auf einer WordPress-Website?

WordPress unterstützt seit Version 5.8 native WebP-Bilder. Sie können eine WebP-Datei in Ihre Medienbibliothek wie jedes andere Bildformat hochladen. Um eine WebP-Datei hochzuladen, melden Sie sich in Ihrem Dashboard an und gehen Sie zu Medien > Medienübersicht > Neu hinzufügen.

Solange der Hosting-Server WebP unterstützt, sollte Ihre WordPress-Website das Bild in allen Browsern anzeigen, die mit dem Bildformat kompatibel sind.

SiteGround-Benutzer müssen nichts Besonderes tun, um ihre Websites WebP-Bilder visualisieren zu lassen. Alle SiteGround Server sind so konfiguriert, dass sie WebP unterstützen.

Wie konvertiert man vorhandene Bilder auf einer WordPress-Website

Obwohl WordPress WebP unterstützt, hat es keine eingebaute Funktionalität, um vorhandene Bilder aus anderen Formaten in WebP zu konvertieren. Ein Bildoptimierungs-Plugin kann dies jedoch automatisch tun.

Wir empfehlen den Speed Optimizer, der kostenlos und für alle WordPress-Benutzer verfügbar ist. Damit können Sie Ihre vorhandenen Bilder mit wenigen Klicks in WebP konvertieren. Darüber hinaus bietet es einen Fallback-Mechanismus, um die Originalbilder im JPEG- oder PNG-Format anzuzeigen, falls die Browser Ihrer Besucher nicht mit WebP kompatibel sind.

Um die Bilder zu konvertieren, öffnen Sie Ihr WordPress-Dashboard, gehen Sie zu Speed Optimizer > Medien, und schalten Sie den Schalter für WebP-Bilder verwenden. Drücken Sie im folgenden Pop-up-Fenster auf Bestätigen.

Weitere Informationen über die Funktionalität des Plugins finden Sie in diesem Speed Optimizer Plugin Tutorial.

Wie konvertiert man eine WebP-Datei in eine JPEG- oder PNG-Datei

WebP ist JPEG und PNG in vielen Facetten überlegen, muss aber noch von allen Anwendungen universell unterstützt werden. Daher kann es schwierig sein, ein als WebP gespeichertes Bild zu bearbeiten, wenn Sie nicht die richtige Software haben.

Sie können WebP-Dateien jedoch auf vielfältige Weise in JPEG oder PNG konvertieren. Auf diese Weise können Sie das Bild in Ihrer bevorzugten Grafiksoftware bearbeiten, bis es WebP unterstützt.

Konvertieren Sie ein WebP-Bild mit einem Online-Bildkonverter

Eine Möglichkeit ist die Verwendung eines Online-Bildkonverters wie CloudConvert. Sobald Sie auf ihrer Seite sind, klicken Sie auf die Schaltfläche Select File und wählen Sie die WebP-Datei von Ihrem Computer.

Nachdem das Bild hochgeladen wurde, wählen Sie das gewünschte Format aus dem Menü Convert to, und bestätigen Sie mit der Taste Convert.

Das Tool wird in Kürze die konvertierte Datei generieren, die Sie auf Ihr lokales Gerät herunterladen können.

Konvertieren Sie ein WebP-Bild mit der Image Viewer Software

Eine andere Möglichkeit, WebP-Bilder in PNG- oder JPEG-Dateien zu konvertieren, ist die Verwendung einer Bildbetrachter-App auf Ihrem lokalen Computer. Zum Beispiel können Sie Vorschau auf dem Mac verwenden. Sie können damit keine WebP-Dateien bearbeiten, aber Sie können sie öffnen und in PNG oder JPEG exportieren.

Um das zu tun, öffnen Sie die WebP-Datei und wählen Sie Exportieren aus dem Ablage Menü.

Wählen Sie das Format, in das Sie das Bild exportieren möchten und bestätigen Sie mit Sichern.

Schlussfolgerung

WebP ist ein relativ neues Bildformat und muss noch in allen Browsern und Anwendungen universell unterstützt werden. Jedoch beginnen immer mehr Web-Entwickler die zahlreichen Vorteile in den letzten Jahren zu erkennen. Viele Browser und Anwendungen haben es bereits übernommen, und das Format wird voraussichtlich bald ein Industriestandard werden.

Deshalb sollten Sie WebP und seine vielen Funktionen nutzen, um Ihre Website zu verbessern. Der Zweck dieses Leitfadens war es, die wichtigsten Vorteile dieses großartigen neuen Bildformats zu skizzieren und wie man es in Ihrer Website implementieren kann. Nachdem Sie es gelesen haben, hoffen wir, dass Sie WebP besser verstehen und es optimal nutzen werden!