AVIF ha aterrizado

Todo el mundo habla de AVIF hoy gracias a la publicación del blog de Jake . Como dice el dicho, hoy tenía años cuando descubrí que AVIF existía. Pero gracias a que la tecnología web está a la vanguardia por una vez, ya podemos aprovecharla.

Esto será más fácil si has abstraído la sintaxis de tus imágenes responsivas. Dondequiera que lo esté usando, picturepuede insertarlo de modo que los navegadores compatibles lo obtengan y los no compatibles no:

picture  !-- use if possible --  source type="image/avif"  !-- fallback --  img alt="Hut in the snow" src="snow.jpg"/picture

¿Quieres jugar con él ahora mismo? Jake actualizó Squoosh para admitirlo. CodePen también lo admite. Aquí hay un bolígrafo (obtuve el original de Shaw):

Consulte el HTML de Pug allí para descartar otras fuentes. Si la URL de la imagen que puso está alojada en Asset Hosting de CodePen , realizará todas las conversiones y demás automáticamente. Las imágenes pasan por un Cloudflare Worker que es el que realiza las conversiones y soporta AVIF. Para imágenes nuevas, es posible que sienta un retraso en el tiempo de respuesta en la primera solicitud de AVIF antes de que se almacene en caché; parece que generarlas requiere mucho más trabajo.

Como cualquier formato, realmente depende del tipo de imagen que sea. Mientras bromeaba, puse un JPG ya comprimido como fuente, y AVIF duplicó con creces el tamaño de su versión. Por lo tanto, tendrás que tener cuidado de no ralentizar las cosas al usarlo.

Lo hemos tenido bien con los nuevos formatos de imagen hasta ahora. WebP es casi siempre el mejor formato, por lo que gran parte de la lógica se ha ido perdiendo if (webp_supported) { use_webp }. Pero ahora, AVIF no sólo es a veces más pequeño, sino que la forma en que lo comprime conduce a diferentes resultados visuales, por lo que incluso cuando es más pequeño, es posible que no esté satisfecho con su apariencia.

Mi escenario ideal es siempre algún tipo de CDN de imágenes en ?format=autoquality=autoel que se elija automáticamente el mejor formato y calidad posibles, sin dejar nunca que sea peor que el original. Pero también es posible anularlas, de modo que si no está satisfecho con una decisión automática, puede solucionarla. Iba a probar las opciones de formato automático de Cloudinary, pero aún no las admiten. Apuesto a que lo harán pronto, pero también apuesto a que es muy complicado hacerlo bien.

Enlace directo →