Bilder und Grafiken im WebP-Format exportieren

Von Jonas

Das WebP-Dateiformat erzeugt deutlich kleinere Grafiken als JPG und Co. bei gleicher oder besserer Bildqualität. Wir erklären wie ihr WebP exportieren könnt.

Aktualisiert am 23. Januar 2024 Ein Kommentar

Bilder und Grafiken gehören zu den Schwergewichten, wenn es um die Optimierung der Website-Ladezeiten geht. Im Verhältnis zu anderen Bereichen einer Seite kann mit Bild-Optimierung überdurchschnittlich viel Last eingespart werden. Es lohnt also i.d.R. hier Aufwand zu betreiben. Das Bild-Dateiformat WebP existiert bereits seit geraumer Zeit, und rückt nun dank deutlich verbessertem Browser-Support wieder in den Fokus. Wir zeigen wie und in welchen Programmen WebP-Grafiken exportiert werden können.

WebP-Format aus Figma exportieren

Für Figma existiert das Plugin WebP Exporter mit dem wir hervorragende Ergebnisse erzielen. Sobald das Plugin installiert ist, sind folgende Schritte notwendig:

1. Plugin öffnen
2. Voreinstellungen wählen – z.B. Skalierungsfaktor oder Vorgaben für den Dateinamen
3. Frame auswählen
4. WebP exportieren

WebP-Format aus Sketch exportieren

Mit dem beliebten Grafikprogramm Sketch lassen sich Elemente sehr unkompliziert als WebP exportieren. Sketch unterstützt WebP von Haus aus.

Geht innerhalb von Sketch wie folgt vor:

1. Grafik, Artboard oder Gruppe markieren
2. Rechts in der Seitenleiste »Für den Export markieren«
3. In der Seitenleiste WebP als Format angeben
4. Markierte Objekte über »Export Selected…« exportieren

WebP-Format aus Photoshop exportieren

Der Export aus Photoshop heraus ist möglich, allerdings nicht so komfortabel wie in Sketch. Photoshop unterstützt WebP nur mit einem Plugin.

Folgende Schritte sind notwendig:

1. Ladet das passende Plugin herunter
2. Richtet das Plugin im Systemordner von Photoshop ein
3. Wählt WebP als neuen Eintrag im Speichern-Dialog von Photoshop aus
4. Nehmt die gewünschten Einstellungen zur Qualität vor

Einen ausführlichen Beitrag dazu haben wir bereits 2011 veröffentlicht.

WebP-Format aus Adobe XD exportieren

Adobe XD unterstützt aktuell keinen WebP-Export. Auch ein Plugin ist uns bisher nicht bekannt. Sollte sich hier etwas ändern, freuen wir uns über einen Hinweis in den Kommentaren.

Der WebP-Export für Adobe XD ist allerdings als »Feature Request« im Forum von XD gelistet. Wenn euch die Funktion wichtig ist, loggt euch ein und bewertet die Funktion.

Bestehende Grafiken in WebP umwandeln

Wenn keine der o.g. Lösungen für euch in Frage kommt, könnt ihr auch bestehende Grafiken in WebP umwandeln – z.B. mit Hilfe eines Online WebP-Generators.

Alternativ können Grafiken auch mit Hilfe der Kommandozeile oder mit Build-Tools wie Gulp oder Grunt in WebP umgewandelt werden. Das Smashing Magazine hat dazu einen ausführlichen Artikel verfasst.

WebP-Format mit <picture> in HTML verwenden

Die erzeugten WebP-Grafiken müssen so in die Website eingebaut werden, dass ein Fallback für nicht kompatible Browser geschaffen wird. Zu diesem Zweck eignet sich das <picture>-Elemente von HTML am besten. Wir haben die Verwendung von WebP im Zusammenhang mit responsive Images und <picture> detailliert beschrieben. 

Geschrieben von Jonas

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing