Bilder und Grafiken im WebP-Format exportieren

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.
Workshops & Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug.
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:
- Grafik, Artboard oder Gruppe markieren
- Rechts in der Seitenleiste »Für den Export markieren«
- In der Seitenleiste WebP als Format angeben
- 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:
- Ladet das passende Plugin herunter
- Richtet das Plugin im Systemordner von Photoshop ein
- Wählt WebP als neuen Eintrag im Speichern-Dialog von Photoshop aus
- 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.
Jetzt bist du gefragt!
Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.
Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!