Ranked #1 Best Cloud Service Provider in the Netherlands 2024!
E-commerce
10 Minuten Lesezeit

WebP-Bilder in Wordpress

Verfasst von
Veröffentlicht am
November 23, 2023
Updated on
May 17, 2024

In der heutigen digitalen Welt ist eine schnell ladende und optisch ansprechende Website entscheidend für ein positives Nutzererlebnis. Eine Möglichkeit, dies zu erreichen, besteht darin, WebP-Bilder auf Ihrer WordPress-Website zu verwenden. WebP ist ein modernes Bildformat, das im Vergleich zu herkömmlichen Formaten wie JPEG und PNG eine überlegene Komprimierung und Qualität bietet. In diesem Artikel führen wir Sie durch die Verwendung von WebP-Bildern in WordPress und helfen Ihnen dabei, die Größe der Bilddatei um bis zu 35% zu reduzieren und die Leistung Ihrer Website zu verbessern.

WebP-Bilder und ihre Vorteile verstehen

WebP ist ein von Google entwickeltes Bildformat, das sowohl eine verlustbehaftete als auch eine verlustfreie Komprimierung bietet. Es wurde entwickelt, um kleinere Dateigrößen bereitzustellen, ohne Kompromisse bei der Bildqualität einzugehen, was es zu einer idealen Wahl für die Nutzung im Internet macht.

Hauptvorteile von WebP-Bildern:

  • Kleinere Dateigrößen: WebP-Bilder können bis zu 35% kleiner sein als ihre JPEG- und PNG-Gegenstücke, was zu schnelleren Ladezeiten und einer geringeren Bandbreitennutzung führt.
  • Hochwertige Grafiken: Trotz ihrer kleineren Dateigröße behalten WebP-Bilder eine hervorragende Bildqualität bei.
  • Breite Browserunterstützung: Die meisten modernen Webbrowser, einschließlich Chrome, Firefox und Edge, unterstützen WebP-Bilder.

So konvertieren Sie Ihre Bilder in das WebP-Format

Bevor Sie WebP-Bilder auf Ihrer WordPress-Website verwenden können, müssen Sie Ihre vorhandenen Bilder in das WebP-Format konvertieren. Zu diesem Zweck stehen verschiedene Tools und Plugins zur Verfügung, darunter:

  1. Online-Konvertierungstools: Websites wie Squoosh und WebP-Konverter ermöglicht es Ihnen, Bilder direkt in Ihrem Browser hochzuladen und in das WebP-Format zu konvertieren.
  2. Desktop-Anwendungen: Programme wie XN konvertieren und Bild Magick kann verwendet werden, um Bilder auf Ihrem Computer stapelweise zu konvertieren.
  3. WordPress-Plugins: Plugins wie WebP Express und Stellen Sie sich vor kann den Konvertierungsprozess automatisieren und WebP-Bilder direkt von Ihrer WordPress-Website aus bereitstellen.

WebP-Bilder in WordPress bereitstellen

Nachdem Sie Ihre Bilder in das WebP-Format konvertiert haben, müssen Sie Ihre WordPress-Website einrichten, um diese Bilder Ihren Besuchern zur Verfügung zu stellen. Um dies zu erreichen, gibt es verschiedene Methoden, darunter:

Verwenden eines WordPress-Plugins

Verschiedene WordPress-Plugins können Ihnen dabei helfen, WebP-Bilder auf Ihrer Website bereitzustellen. Diese Plugins bieten normalerweise eine einfache Oberfläche zum Konfigurieren der WebP-Einstellungen und zur Automatisierung der Bereitstellung von WebP-Bildern für kompatible Browser. Zu den beliebten Optionen gehören:

Umgang mit WebP-Bildern in Ihrem WordPress-Theme

Um das Beste aus WebP-Bildern herauszuholen, sollten Sie sicherstellen, dass Ihr WordPress-Theme sie unterstützt. Viele moderne Themes enthalten bereits eine integrierte Unterstützung für WebP-Bilder. Wenn dein Theme dies nicht tut, kannst du Unterstützung hinzufügen, indem du die folgenden Schritte befolgst:

  1. Suchen Sie die `functions.php`-Datei Ihres Themes, die sich im Verzeichnis `/wp-content/themes/your-theme/` befindet.
  2. Suchen Sie in Ihrer `functions.php`-Datei nach dem folgenden Codeausschnitt:

Funktion webp_upload_mimes ($existing_mimes) {

$existing_mimes ['webp'] = 'bild/webp';

gib $existing_mimes zurück;

}

add_filter ('upload_mimes', 'webp_upload_mimes');

  1. Speichern Sie die Änderungen und aktualisieren Sie Ihre Website. Sie sollten jetzt in der Lage sein, WebP-Bilder über die WordPress-Medienbibliothek hochzuladen.

Testen Sie Ihre WebP-Implementierung

Nachdem Sie WebP-Bilder auf Ihrer WordPress-Website eingerichtet haben, müssen Sie Ihre Implementierung unbedingt testen, um sicherzustellen, dass alles ordnungsgemäß funktioniert. Hier sind ein paar Möglichkeiten, dies zu tun:

  • Verwenden Sie Browser-Entwicklertools: Öffnen Sie Ihre Website in einem Browser wie Chrome oder Firefox und verwenden Sie die Entwicklertools, um die Bilder auf Ihrer Website zu überprüfen. Wenn WebP-Bilder korrekt bereitgestellt werden, siehst du die Dateierweiterung.webp auf der Registerkarte „Bild“.
  • Testen Sie die Geschwindigkeit Ihrer Website: Verwenden Sie Tools wie Google PageSpeed Einblicke oder GT-Metrix um die Leistung Ihrer Website zu analysieren. Wenn WebP-Bilder korrekt funktionieren, sollte sich die Ladegeschwindigkeit Ihrer Website verbessern.
  • Prüfen Sie die Browserkompatibilität: Testen Sie Ihre Website in mehreren Browsern, um sicherzustellen, dass WebP-Bilder für kompatible Browser bereitgestellt werden und dass Fallback-Bilder für nicht unterstützte Browser bereitgestellt werden.

Wenn Sie dieser Anleitung folgen, sind Sie auf dem besten Weg, die Leistungsfähigkeit von WebP-Bildern auf Ihrer WordPress-Website zu nutzen. Ihre Website profitiert nicht nur von schnelleren Ladezeiten und einer geringeren Bandbreitennutzung, sondern Ihre Besucher werden auch von einem reibungsloseren Surferlebnis profitieren.

Bei Alumio, wir wissen, wie wichtig es ist, die neueste Technologie zu nutzen, um die Leistung Ihrer Website zu verbessern. Unser Expertenteam kann Ihnen flexibel helfen WordPress-Integrationslösungen, umfassende Projektunterstützung und Softwareimplementierung, um sicherzustellen, dass Ihre Online-Präsenz für den Erfolg optimiert ist.

Portrait of Leonie Becher Merli, 
Business Development Representative, Alumio, point to the right with both hands -  within a white circular background.

Get a free demo of the Alumio platform

to experience the business automation benefits!
Nehmen Sie Kontakt auf

Wir helfen Ihnen gerne weiter und beantworten Ihre Fragen

About our partner

Start integrating with popular apps!

No items found.

Connect with any custom endpoint

Start integrating with popular apps!

No items found.

Connect with

No items found.
Portrait of Leonie Becher Merli, 
Business Development Representative, Alumio, point to the right with both hands -  within a white circular background.

Get a free demo of the Alumio platform

to experience the business automation benefits!