Hallo zusammen,

habe heute festgestellt, dass ein Großteil der Grafiken auf einer Webseite durch das WebP-Format wesentlich besser komprimiert werden könnte, d.h. bei gleicher Qualität viel kleinere Dateien entstehen.

Die Grafiken im WebP- statt JPG- oder PNG-Format werden auch problemlos in Chrome, Firefox und Opera angezeigt (und den Geschwindigkeitsunterschied beim Laden der Seite merkt man tatsächlich), nur Safari unterstützt das leider nach wie vor nicht.

Frage: Wahrscheinlich wird sich daran auch nichts ändern mit Safari 13 unter 10.15 Catalina?

Da selbst Edge ab der Version 1809 von Windows 10 das WebP-Format unterstützt, ist es aus meiner Sicht wirklich ärgerlich, dass sich Apple bzw. das WebKit-Entwicklerteam diesbezüglich so querstellt, oder?

Apple möchte wahrscheinlich das eigene High Efficiency Image File Format (HEIF) pushen und boykottiert deshalb WebP bewusst?

Irgendwie glaubte ich, der Browser-Krieg hätte (endlich) ein Ende gefunden, in Form solcher Uneinigkeiten über Grafik- und Video-Formate scheint er jedoch weiter existent zu sein …

Naja.. ist halt von Google. HEIF ist nicht Apple sondern MPEG. Das ist schon ein gewaltiger Unterschied. Wäre ich ein Browser würde ich lieber MPEG als Google

Ist nicht drin aber selbst wenn, in der Entwicklerversion von iOS 10 war es auch schon mal drin.

WebKit/Safari konnte es zwischenzeitlich mal kurz in einer Entwickler-Beta-Version von Safari 10, Apple hat's aber wieder rausgenommen, in die Final-Version von Safari hat's WebP bisher leider nicht geschafft:

cnet (19.06.2016): Apple tests Google graphics format to speed up websites
Beta versions of the Safari browser support Google's WebP. It's an alternative to more standard image files like JPEG and GIF that could make web pages easier to download.

Google Groups webmproject.org (10.07.2016): WebP is now supported on Safari 10 both on macOS sierra and iOS 10

Niels Leenherr via Twitter (11.07.2016): Safari on iOS 10 supports WebP images

In den Sourcen von WebKit ist es jedenfalls noch drin:

GitHub: WebKit: webkit/Source/WebCore/platform/image-decoders/webp/

Wird sicher irgendwann wieder aufgenommen (alle anderen Konkurrenten haben es, haben keinerlei Bauchschmerzen damit, im Gegenteil, noch nicht mal Microsoft mehr, und Apple wird sich dem auf Dauer nicht entziehen können), außerdem hat Apple seine lange Zeit ablehnende Haltung gegenüber des VP8/VP9-Video-Codecs (WebP ist eine Ableitung davon, so wie das HEIF-Bildformat eine Ableitung des MPEG-Video-Codecs ist) geändert und seine Unterstützung von WebRTC und AV1 zugesagt (wo die VPx-Codecs u.a. eine tragende Rolle spielen bzw. dort eingeflossen sind).

Wäre es denn kompliziert, meine style.css so zu ändern, dass bei Chrome, Firefox, Opera und Edge automatisch WebP benutzt wird und Safari weiterhin, als 'fallback' sozusagen, auf die PNG- bzw. JPG-Variante zurückgreift?

Momentan ist es z.B. so, dass da für die footer- und header-Grafik nur folgendes steht:


Weiß zufällig jemand, wie ich das ergänzen/modifizieren müsste?

Mir geht es nämlich vornehmlich um diese beiden Grafiken, die ich dann in Chrome, Firefox, Opera und Edge gern als footer.webp und header.webp statt footer.jpg und header.jpg laden lassen würde.

Danke für Hilfe.

Hilft so was? (Browser-Selector)

Modernizr hat auch eine WebP-Abfrage:

Mal ImageOptim versucht ?
Bringt auch schon eine Menge...

Danke Euch allen schon einmal für die schnelle Hilfe.

Wen es interessiert: Mit Hilfe des "Cloudinary Webspeedtest" kann man recht schnell und einfach analysieren, welche Grafiken auf einer Webseite noch Optimierungspotential haben, inklusive der Möglichkeit, gleich im passenden Format zu sichern:



So konnte ich schnell einige unnötig große JPGs und PNGs noch gut eindampfen. Sie wären zwar im WebP-Format noch einmal um einiges kleiner, aber mit optimierten JPGs und PNGs kommt man auch schon recht weit – und muss keine CSS-Hacks bemühen …

Bleibt zu hoffen, dass WebP zukünftig auch mal "ganz offiziell" von Safari/WebKit unterstützt wird.

Eine einfache Fallback-Lösung wäre:
Musst du mal testen, ob das mit deinem restlichen CSS zusammen funktioniert.

So einfach klappt es leider nicht, Safari versucht dann scheinbar trotzdem die WebP-Variante zu laden und zeigt einfach nichts an … aber Danke trotzdem für die Idee.

PS: Warum man hier für eine einfache Feststellung / Frage ein "Daumen runter" bekommt (siehe Thread-Start ganz oben), muss man auch nicht verstehen … aber ist ja leider keine Seltenheit mehr hier in diesem Forum.

Ich vermute mal, das liegt daran, dass Du eine sinnlose Frage gestellt hast (niemand hier kann in die Zukunft blicken und wissen, ob die Release-Version von Catalina das unterstützen wird).

Aber erstens hast Du ja währenddessen ein +1 und zweitens würde ich alles unter ±5 sowieso als statistisches Rauschen ignorieren. Die Bewertungen sind ein Anhaltspunkt und kein Grund, im <0-Falle ins Kloster zu gehen!

@Marcel_75:
Ich vermute stark dass du das mit CSS nicht hinbekommen wirst.
Ich würde das via PHP (nur meine Meinung!!!!) über einen UA-Switch lösen.
Vermutlich geht das auch mit JS - aber du weisst ja DOM und so...deswegen würde ich eher auf PHP setzen.

und wie immer möchte ich hier niemand den Spass nehmen, aber die Antwort bekommst du bei stackoverflow wahrscheinlich innerhalb von ein paar Minuten - mit Beispielen etc...

@mekanikong:
Das wird für keinen Browser die gewünschte Lösung bringen,... Wäre vielleicht irgendwie OK gewesen, wenn du es auf zwei Zeilen verteilt hättest, aber so nicht
Auf zwei Zeilen verteilt, wäre die letzte Anweisung von allen Browsern genommen worden, also auch nicht 100%....

WebP ist im prinzip schon tot, seit es HEIF oder Ableitungen davon gibt. Die Effizienz dieser Codecs is so dermaßen größer, dass es sich eigentlich gar nicht rentiert, sich mit WebP zu beschäftigen.
Vor einiger Zeit wurde beispeilsweise das BPG Projekt gestartet. Das ist ein Dateiformat, welches wie HEIF auf .h265 basiert und darüber hinaus auch transparenzen unterstützt. Ein Golem-Bericht zum Format um einene kurzen Überblick zu bekommen: Golem - Better Portable Graphics: Neues Bildformat soll JPEG ablösen
Die Projetseite:
Eine Seite auf der man JPEG, WebP, JPEG 2000, JPEG XR und BPG via A/B Slider vergleichen kann:

Und das beste. Auf der Projektseite gibt es bei den Downloads auch einen JavaScript Decoder, der sich in die Website einbauen lässt (56 kB). Das bedeutet, du kannst auf jeder Seite BPG verwenden, da die Darstellung von diesem JavaScript übernommen wird. Es läuft also in jedem Browser (so wie die Vergleiche und verlinkten Beispiele oben auch).

Also auf zum Daten-Sparen

Wer auch immer dem super-interessanten Beitrag von Krypton eine -1 verpasst hat, rafft allerdings überhaupt gar nichts …

Und genau so etwas meinte ich doch auch – wenn Du ehrlich bist, ist meine Frage im Ausgangs-Posting ja auch nicht völlig "sinnlos", wie Du es behauptest … Denn es könnte sich eine solche Option (zum "verarbeiten" von WebP) in den Untiefen des Developer-Menüs verstecken (als neue, bisher vllt. unbekannte Option), es könnte wieder (wie schon mal bei Safari 10) in der Preview von Safari 13 implementiert sein usw. – ich weiß auch nicht alles, auch wenn ich mich mit Mac OS bereits seit 1994/1995 intensiv (sprich: nahezu täglich) beschäftige.

Ich sehe dieses Forum hier immer noch als Austauschplattform für technikinteressierte Mac-User und bin hier auch schon wirklich lange dabei, wenn ich Zeit habe, versuche ich auch ab und an mit Tipps zu helfen, freue mich aber natürlich auch, wenn ich interessante Neuigkeiten entdecken kann oder eben hier im Forum davon erfahre.

Der Umgangston hier war vllt. nie das, was man sich (ich zumindest) im täglichen, menschlichen Umgang miteinander wünschen würde – aber das hier immer mehr solche unsinnigen Abwertungen passieren (siehe die -1 beim Beitrag von Krypton), finde ich persönlich einfach nervig, wem nützt das etwas?

streamingmedia.com (31.01.2018): The Future of HEVC Licensing Is Bleak, Declares MPEG Chairman

Leonardo Chiariglione (Chairman MPEG), 28.01.2019: A crisis, the causes and a solution

Caniuse: WebP image format
Caniuse: AV1 video format
Caniuse: HEIF/ISO Base Media File Format
Caniuse: HEVC/H.265 video format

Wikipedia (en): AV1: AV1 Image File Format (AVIF)
AV1 Image Format (AVIF):

FreeCodeCamp (13.12.2018): Picture this: the best image format for the web in 2019

cnet news (19.01.2018): Photo format from Google and Mozilla could leave JPEG in the dust
Apple's got one idea for next-gen photo technology, but a rival approach based on the new AV1 video compression tech could go a step further.

Wie zum Beweis: siehe die Verbreitung von HEIC/HEIF. Nahezu Null. Deswegen. Lizenzproblematik, ein absolut undurchdringlicher Super-GAU. Noch nicht mal Apple durchgängig. Siehe auch Caniuse. WebP ist im Vergleich verbreiteter.
Und statt bei HEIC/HEIF Gas zu geben, macht Apple was? Ordnet sich seit letztem Jahr ein bei AV1. Warum wohl hat Leonardo Chiariglione Anfang letzten Jahres quasi den Totengesang auf die MPEG angestimmt, deren Chairman er ist? Nicht zufällig zur selben Zeit, als Apple auf einmal auch bei AV1 mitmacht?
Von was ist WebP eine Ableitung? Vom VP9-Video-Codec. Welcher Codec ist in AV1 eingearbeitet? Die Weiterentwicklung von VP9 = VP10.
Was ist AVIF, was lebt darin fort? Nicht zufällig AV1, VPx-Technik, weiterentwickelte WebP-Technik?
Und welchen Container erlaubt AVIF zu nehmen? Nicht zufällig HEIF?

WebP und tot? Nope, fern davon (siehe Browser-Support). HEIC und Totgeburt? Schon eher (siehe Browser-Support).
MPEG am Ende? Wohl kurz davor. Ebenso H.265 (HEVC). Komplettes Lizenz-Chaos bei maximaler Patentunsicherheit (und teuer). Selbst Apple ist abgesprungen bzw. hat letztes Jahr die Seiten gewechselt. Warum? Sicher nicht, weil sie noch so grenzenlos überzeugt sind von MPEG und dem, was dort hervorgebracht worden ist, und sicher auch nicht, weil das nur das Beste ist, was man von dort kriegen kann, andere Codecs sind inzwischen besser. Und haben weniger Lizenz-Problematik. Nicht ohne Grund macht Apple nun bei AV1 bzw. AV2 mit (wie andere auch) – und damit bei den VPx-Codecs bzw. deren Nachfolge-Codecs.

Ich finde sie doch nicht völlig sinnlos, höchstens unglücklich formuliert (denn Du hast nach der Release-Version gefragt und hättest ganz genau genommen nach den Betas fragen sollen).

Aber Du hast die Frage gestellt, wieso jemand auf die Idee kommt, das mit -1 zu bewerten, und ich habe versucht, Dir eine denkbare Erklärung zu geben. Das ist alles.

Aber Deine eigenen Links sagen genau das: AVIF ist WebP deutlich überlegen.

Nein (nicht tot, noch nicht jedenfalls). Und Ja (AVIF ist WebP überlegen – weil eine natürliche Weiterentwicklung davon). Das Bessere ist des Guten Feind.

Einerseits: WebP lebt darin weiter, seine Entwicklung eingefroren (). WebP ist das Image-Format, abgeleitet vom Video-Codecs VP8. Davon die Weiterentwicklung ist VP9, davon die Weiterentwicklung hätte VP10 gehießen, heißt aber neu: AV1, weil das, was VP10 geworden wäre, nur ein Teil davon, eine Säule ist (die anderen beiden Säulen: Daala-Codec von Xiph/Mozilla und Thor-Codec von Cisco).

Da AVIF (und damit die VPx-Komponente darin) neuer ist als VP8 (auf dem WebP fußt), kann AVIF natürlich nur besser sein als das auf dem Vorgänger-Codec basierende WebP. Es ist damit aber nicht tot und stattdessen breiter implementiert und auch breiter genutzt als es für Manchen den Anschein hat:

Andererseits:

Wikipedia (en): WebP: Support

Im Gegensatz zu AVIF, das bzw. dessen Verbreitung derzeit noch im Werden ist:

Wikipedia (en): AV1: AVIF support

Und bzgl. HEVC/HEIC/HEIF schlägt die Lizenzkeule zu, das kostet (bei Streaming erst recht und in nicht unerheblichen Maße) – und das schränkt die Verbreitung und Implementierung sehr ein bzw. auferlegt zum Teil nicht kleine Hürden und auch lizenz- und patentrechtliche Unwägbarkeiten und Stolpersteine, welche so manchen davon abhalten, es zu implementieren geschweigedenn zu nutzen (und stattdessen ggf. lieber zu was Anderem zu greifen).
Q:
Deswegen ist dann vermutlich AVIF, also ein AV1-Codec in einem HEIF-Container wohl auch lizenzrechtlich unbedenklich(er).

Ah, okay. Ich gebe zu, dass ich es nur mit Safari 11 (Mac) getestet habe. Möglicherweise geht das nicht mehr mit neueren Versionen. Mit iOS Safari funktioniert es bei mir. Ebenso mit Internet Explorer bis Version 11.
Chrome z.B. nimmt die erste URL in der Zeile und ignoriert die zweite URL, die älteren Browser überspringen die erste URL. So war zumindest bisher.