Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Seminar: Sketch oder Seminar: Visual Prototyping

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

Ansicht der Export-Funktion von Sketch mit ausgewähltem WebP-Dateiformat

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

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: