Jeder redet heute über AVIF wegen Jakes Blogbeitrag. Wie man so schön sagt, heute habe ich gelernt, dass AVIF existiert. Aber dank der Webtechnologie, die dem Spiel einmal voraus ist, können wir es bereits nutzen.
Das wird einfacher, wenn Sie Ihre responsiven Bildsyntax abstrahiert haben. Wo immer Sie <picture> verwenden, können Sie es so einfügen, dass unterstützende Browser es erhalten und nicht unterstützende nicht.
<picture>
<!-- use if possible -->
<source type="image/avif" srcset="snow.avif">
<!-- fallback -->
<img alt="Hut in the snow" src="snow.jpg">
</picture>Möchten Sie es sofort ausprobieren? Jake hat Squoosh aktualisiert, um es zu unterstützen. CodePen unterstützt es ebenfalls. Hier ist ein Pen (ich habe ihn von Shaws Original abgezweigt).
Schauen Sie sich den Pug HTML dort an, um andere Quellen auszuwählen. Wenn die URL des Bildes, das Sie einfügen, auf CodePens Asset Hosting gehostet wird, werden alle Konvertierungen und dergleichen automatisch durchgeführt. Die Bilder laufen durch einen Cloudflare Worker, der die Konvertierungen durchführt und AVIF unterstützt. Bei neuen Bildern kann es beim ersten Anfordern von AVIF zu einer Verzögerung kommen, bevor es zwischengespeichert wird, da die Generierung offenbar viel mehr Arbeit erfordert.
Wie bei jedem Format hängt es wirklich von der Art des Bildes ab. Beim Herumspielen habe ich ein bereits komprimiertes JPG als Quelle verwendet, und AVIF hat die Größe seiner Version mehr als verdoppelt. Sie müssen also vorsichtig sein, dass Sie die Dinge durch die Verwendung nicht langsamer machen.
Wir hatten bisher Glück mit neuen Bildformaten. WebP ist fast immer das beste Format, daher ist ein Großteil der Logik auf den Weg if (webp_supported) { use_webp } gegangen. Aber jetzt ist AVIF nicht nur manchmal kleiner, sondern die Art und Weise, wie es Kompression durchführt, führt zu unterschiedlichen visuellen Ergebnissen, sodass Sie selbst dann, wenn es kleiner ist, mit dem Aussehen möglicherweise nicht zufrieden sind.
Mein ideales Szenario ist immer eine Art Bild-CDN mit ?format=auto&quality=auto, das automatisch das bestmögliche Format und die beste Qualität auswählt und es niemals schlechter als das Original macht. Aber dann auch mit Überschreibungsmöglichkeiten, sodass Sie, wenn Sie mit einer automatischen Entscheidung nicht zufrieden sind, sie korrigieren können. Ich wollte die automatischen Formatierungsoptionen von Cloudinary testen, aber sie unterstützen es noch nicht. Ich wette, das werden sie bald tun, aber ich wette auch, dass es verdammt kompliziert ist, das richtig hinzubekommen.