webp

webp ist ein von Google Entwickeltes Grafikformat. Google hat hier viel investiert Bilder verlustfrei zu komprimieren. Das Format ist bisher nicht gerade beliebt da es von Google kommt und für Entwickler zusätzlichen Aufwand bedeutet die Bilder entsprechend zu komprimieren. Außerdem gibt es Herausforderungen für Entwickler, da die Grafiken so auf der Website eingebaut werden müssen, dass es ein Fallback für nicht kompatible Browser gibt.

Vorteil von webp gegenüber bisherigen Bildformaten

Die Bild Formate jpg gif und png sind schon sehr lange bekannt und die Nutzung bzw. Routine ist gut bekannt. Wie du z.B. mit tinypng auch herausgefunden hast gibt es gute Komprimierungslogaritmen die es ermöglichen die Bildformate auch entsprechend zu verkleinern.
Durch das erwartete Google Update im Mai 2021 das mit dem umfangreichen Page Experience-Update einhergeht wird aber auch die Ladezeit von Webseiten ein offizieller Rankingfaktor werden. Somit fällt natürlich auch Blick wieder auf das webp-Format (https://trends.google.de/trends/explore?date=today%205-y&geo=DE&q=webp), denn dieses kann noch weiter verlustfrei runter komprimieren als das jpg oder png-Dateien können.
Google zufolge sind WebP-Bilder:
  • 25-34% kleiner als vergleichbare JPEG-Bilder.
  • 26% kleiner als vergleichbare PNG-Bilder.
Website Benutzer werden durch die Search Console oder die Page Performance Analyse (https://developers.google.com/speed/pagespeed/insights/?hl=de) auf das webp-Format aufmerksam gemacht. Google weißt bei den Auswertungen u.a. immer deutlich auf das Format hin.

Wie kommt man zu webp Bilder und wie kann man sie auf der Website verwenden?

Unter https://squoosh.app/ hat Google ein eigenes Bildkomprimierung-Tool zur Verfügung gestellt über das sich hochgeladene Bilder individuell anpassen lassen. Dort lässt sich gut testen was die Komprimierung bei einem webp gegenüber einer jpg-Komrimierung bewirkt. Neben squoosh.app gibt es zahlreiche weitere Converter im Netz, z.B. https://webp-converter.com/ oder mit einem Massenupload: https://bild.online-convert.com/de/umwandeln-in-webp
Um Bilder zu erzeugen gibt es auch eine Photoshop-Erweiterung mit der sich webp-Bilder erstellen lassen: http://telegraphics.com.au/sw/product/WebPFormat – wahrscheinlich wird das aber Adobe auch zeitnah integrieren.
Die neuesten Browser kommen alle gut klar mit dem webp Format (ca. 77% aller Internetnutzer). Allerdings hat Safari aktuell noch Probleme mit der Darstellung. Auch ältere Browser wie z.B. der Internet Explorer oder Firefox bis Version 64 können das webp Format nicht darstellen (https://kinsta.com/de/wp-content/uploads/sites/5/2020/05/webp-support.jpg). Aus diesem Grund gibt es keine Standardlösung in WordPress webp Bilder in die Mediathek zu importieren.
Für WordPress gibt es aber einige Plugins die webp ermöglichen. Die meisten arbeiten mit einer externen Cloud über die die Bilder hochgeladen werden und dann in der webp Format konvertiert werden. Hier ein paar Beispiele: ShortPixel Image Optimizer, Imagify,  EWWW oder WebP Express. Ich bin nicht so ein großer Freund davon das in WordPress zu machen da es den Flow sehr stört (man muss beim Upload in der Regel lange warten).
Für mich kommt ehr ein Plugin wie Allow Webp image welches nur die Möglichkeit bietet webp in der WordPress Mediathek zu verwalten. Ähnlich wie es da SVG Plugin tut. Langfristig hoffe ich auf eine bessere Einbindung über Enfold. Die webP Generierung läuft in dem Fall über andere Tools. Oder wir basteln doch an einem Tool welches die Einbindung von beiden Formaten ermöglicht. Fehlt aktuell nur an Zeit und Entwicklern :-)