Apple kündigte auf der gestrigen WWDC20 Keynote-Adresse eine Menge neuer Updates an, von neuer Hardware bis hin zu aktualisierten Anwendungen. Es gibt viel zu bestaunen und genug Neid auf die Geräte, um alle zufrieden zu stellen.
Aber es gibt eine kleine Zeile in den Safari 14 Beta Release Notes, die mein Auge erhascht hat
WebP-Bildunterstützung hinzugefügt.
🎉🎉🎉
Das begeistert mich, denn WebP ist ein super progressives Format, das Bilder in verlustfreien und verlustbehafteten Formaten kodiert, die wir von anderen Bildformaten kennen, die wir bereits verwenden, wie JPEG, aber zu einem Bruchteil der Dateigröße. Wir verwenden WebP genau hier bei CSS-Tricks, dank Jetpack und seiner Site Accelerator-Funktion, die WebP-Versionen der Bilder, die wir hochladen, an Browser liefert, die sie unterstützen. Jeremy Wagner hat einen großartigen Beitrag über WebP und die Arbeit damit, speziell für WordPress.
Ja, das bedeutet, dass WebP weitgehend flächendeckend unterstützt wird (:IE-sad-trombone:), sobald Safari 14 veröffentlicht wird.
Diese Browser-Support-Daten stammen von Caniuse, wo es weitere Details gibt. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 32 | 65 | Nein | 18 | 16.0 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 4.2-4.3 | 14.0-14.4 |
Auch bei dieser großartigen Unterstützung ist es immer noch eine gute Idee, Fallbacks mit dem <picture>-Element zu definieren.
<picture>
<source srcset="img/cat.webp" type="image/webp">
<source srcset="img/cat.jpg" type="image/jpeg">
<img src="img/cat.jpg" alt="Alt Text!">
</picture>Ach ja, und um nicht völlig in den Hintergrund gedrängt zu werden, packt Safari 14 auch einige CSS-Schmankerl hinein, wie die Pseudo-Klassenfunktionen :is() und :where(), auf die wir vor ein paar Wochen verlinkt haben. Jen Simmons hat weitere wichtige Funktionen herausgepickt, auf die wir uns freuen sollten.
Safari 14 Beta Release Notes
— Jen Simmons (@jensimmons) 22. Juni 2020
• WebP hinzugefügt
• Geändert, um das Seitenverhältnis von <img> aus den Größenattributen abzuleiten
• :is() hinzugefügt
• :where() hinzugefügt
• Safari unterstützt kein Flash mehr
• Safari Web Extensions hinzugefügt
• Webseiten-Übersetzung hinzugefügt (Beta)
& vieles mehr: https://#/qO2Cy7rK4A
Ja!!!! Willkommen in ein paar Jahren zurück, Apple
Ich hatte vor fast 10 Jahren einen Beitrag auf meiner Website geschrieben, kurz nachdem WebP angekündigt wurde (damals wurde es "weppy" genannt). Ich erwähnte, dass es Potenzial mit einem Safari-Plugin gab. Es wurde bis ca. 2015 unterstützt https://github.com/nickzman/weppy/releases/tag/v1.0.3
Wir haben alle lange auf die Safari-Unterstützung gewartet, aber jetzt, wo wir sie bekommen, frage ich mich mehr über die Politik von Browsern vs. tatsächlicher Technik... https://siipo.la/blog/is-webp-really-better-than-jpeg
Muss man lesen: https://siipo.la/blog/is-webp-really-better-than-jpeg
Das hat meinen Tag gerettet! Es ist höchste Zeit!!!!!
Ich habe kürzlich bemerkt, dass WebP in Firefox unterstützt wird, also habe ich ein Skript eingerichtet, um eine Menge PNG-Bilder in WebP umzuwandeln. Das Lustige ist, dass in einigen Fällen ein maximal komprimiertes verlustfreies WebP-Bild größer ist als ein Zopfli-komprimiertes PNG. Das passiert nicht oft und Zopfli braucht viel länger, um ein PNG zu komprimieren, aber es lohnt sich, darauf zu achten.
Nachverfolgung – eines der Dinge, die WEBP ermöglicht, ist die Möglichkeit von animierten Bildern, die auch Transparenz enthalten (denken Sie an Gif89a, aber mit voller Farbe) https://mathiasbynens.be/demo/animated-webp
Ich kann es kaum erwarten – Insta, Twitter und jede andere soziale Plattform wird mit besser aussehender Bewegung überrannt werden :)
Ich wünschte, sie würden WebP auch in Finder MacOS unterstützen, damit wir die Bilder zumindest lokal ansehen können.
JA! Gestimmt. Das würde ich gerne sehen. Es gibt ein Quick Look Plugin, das ich benutze, namens "Glance" (es ist im AppStore), das viele zusätzliche Vorschauelemente für viele Formate ermöglicht, die das native macOS nicht unterstützt. Vielleicht würde @samuelmeuli erwägen, WebP hinzuzufügen? https://github.com/samuelmeuli/glance/issues/26