AVIF: la versión mejorada del formato de imagen WebP.
AVIF: la versión mejorada del formato de imagen WebP.
Si quieres ofrecer una web lo más optimizada posible hay muchas maneras de hacerlo, pero algo elemental es utilizar formatos de imagen que ofrezcan la mayor calidad con el menor peso de archivo posible, ya que las imágenes son uno de los elementos más pesados de cualquier web.
A la hora de elegir formatos de imagen solemos tener varias opciones actualmente, compatibles con la mayoría de los navegadores:
- JPG – Formato normalmente comprimido, no admite transparencia.
- PNG – Formato sin comprimir, admite transparencia.
- WebP – Formato con o sin comprimir, admite transparencia.
Y sí, podemos optimizar bastante la carga de nuestra web utilizando adecuadamente estos formatos, pero podemos ir aún más allá, usando lo que en las métricas web principales (Core Web Vitals) se denomina como formatos de imagen de nueva generación, y aquí es donde entra AVIF.
Y, de repente, AVIF
En 2018 salió a la luz AVIF, o formato de imagen AV1, un formato que usa los mismos algoritmos de compresión que los archivos de vídeo, ofreciendo alta calidad a pesos mínimos.
Empresas como Netflix ya lo están utilizando para todas las carátulas de sus películas y series, por sus ventajas de adaptación a distintos tipos de dispositivos, así como por su excelente relación de calidad-peso.
¿Por qué es mejor AVIF?
Si hablamos de nuevos formatos de imagen, AVIF soluciona los mayores problemas de WebP. Podríamos considerar que AVIF es una actualización del formato WebP, pues ambos están basados en algoritmos de codificación de vídeo.
Pero si hablamos de limitaciones, WebP está limitado a una profundidad de color de 8 bits, y solo puede almacenar color a la mitad de la resolución de la imagen. Esto puede provocar bordes de colores saturados, manchados o pixelados. Por el contrario, AVIF admite resoluciones completas de 10 y 12 bits, con alto rango dinámico (HDR).
AVIF también utiliza un nuevo método de compresión, llamado chroma-from-luma. Para que te hagas una idea de por qué marca diferencias, la mayoría de formatos de imagen almacenan por separado el brillo y la saturación de color, pero AVIF utiliza el canal de brillo para ajustar el canal de color, ya que normalmente están relacionados.
El resultado es que ofrece tamaños de archivo más pequeños y bordes más precisos en todos los tamaños de imagen.
En esta galería se aprecian mejor las diferencias (presta atención a los bordes y/o líneas):
Compatibilidad de AVIF con los navegadores
Actualmente el formato de imagen AVIF solo lo reconocen: Chrome (desde la versión 85), Android, Firefox (desde la versión 91) y Opera Mobile (desde la versión 62), con compatibilidad prevista para Safari, pero aún desconocida para Edge.
Cómo guardar como AVIF o convertir a formato AVIF
El siguiente problema que nos vamos a encontrar es que muchas de las herramientas incluidas en los sistemas operativos actuales no permiten guardar como AVIF, así que nos tocará inicialmente disponer de las imágenes en otros formatos para, a continuación, convertir las imágenes a formato AVIF.
Una buena opción es disponer del servicio gratuito web Squoosh, que permite convertir imágenes a y desde prácticamente cualquier formato, incluido el AVIF. Además, te permite ir viendo sobre la marcha el resultado de la conversión, tanto visualmente como en lo que se refiere al tamaño resultante.
Otro modo de convertir a AVIF es usar el conversor incluido en la web oficial del proyecto.
De todos modos, ya se ha ido incorporando compatibilidad con AVIF en los sistemas operativos modernos. Así, por ejemplo, Microsoft permite mostrar archivos AVIF en Paint y el administrador de archivos desde Windows 10. Para el resto de sistemas operativos, podemos abrir y exportar archivos como AVIF desde el editor multiplataforma GIMP.
Cómo usar AVIF en WordPress
El primer escollo que nos encontramos para poder usar el formato de imagen AVIF en WordPress son los tipos MIME admitidos.
WordPress no permite subir archivos AVIF
De hecho, actualmente ni siquiera WordPress permite subir formatos SVG y WebP por defecto (aquí explicamos como hacerlo), y por supuesto tampoco archivos en formato AVIF.
Para saltarte esta limitación te recomendamos que añadas la siguiente función al archivo functions.php del tema wordpress activo:
/* Compatibilidad con nuevos formatos de imagen */
function ayudawp_compatibilidad_nuevos_formatos_imagen( $mime_types ) {
$mime_types['webp'] = 'image/webp';
$mime_types['heic'] = 'image/heic';
$mime_types['heif'] = 'image/heif';
$mime_types['heics'] = 'image/heic-sequence';
$mime_types['heifs'] = 'image/heif-sequence';
$mime_types['avif'] = 'image/avif';
$mime_types['avis'] = 'image/avif-sequence';
return $mime_types;
}
add_filter( 'upload_mimes', 'ayudawp_compatibilidad_nuevos_formatos_imagen', 1, 1 );Solo necesitarías la línea de $mime_types [ 'avif' ] para añadir compatibilidad con AVIF pero de paso te hemos añadido otros formatos que quizás necesites pronto, como webp, heic o heif. Cuando guardes los cambios ya podrás subir estos nuevos formatos de archivo.
Subir AVIF por FTP
Otra manera de saltarte esta restricción de WordPress es subir los archivos directamente por FTP o desde el gestor de archivos del hosting (desde el cPanel) y copiar la URL para usarla posteriormente, es una opción, pero puede llegar a ser complicada y tediosa, si piensas manejar una gran cantidad de imágenes bajo este formato.
Plugins para que WordPress admita archivos AVIF
Por otra parte, si no te sientes a gusto añadiendo códigos puedes usar el plugin Mime Types Plus para añadir los nuevos formatos desde una interfaz más visual.
CloudFlare, las CDN y AVIF
La red de entrega de contenidos (CDN) CloudFlare admite archivos AVIF, así que los incluirá en la estrategia de caché y entrega de contenidos, así no tendrás ningún problema por este lado.
También la CDN de ImageEngine es compatible con AVIF, y mediante su plugin permite la entrega de estos formatos.
Plugins para servir archivos de imagen AVIF
La manera más sencilla de empezar a usar archivos de imagen en formato AVIF es mediante plugins, aunque de momento hay poco entre lo que elegir.
Uno que cumple bastante bien es ShortPixel Image Optimizer, que permite convertir a WebP y AVIF, además de entregar estos nuevos formatos en tu web, eso sí, consumiendo créditos de pago.
Servir imágenes AVIF mediante HTML
Si te sientes cómod@ con el HTML es sencillo ofrecer imágenes en formato AVIF y otros mediante la etiqueta <picture>, por ejemplo:
<picture> <source srcset="imagen.avif" type="image/avif"> <source srcset="image.webp" type="image/webp"> <img src="imagen.jpg" alt=""> </picture>
Por qué WordPress debería admitir AVIF
WordPress, con una implantación global de más del 40% de toda la web, es importante que adopte nuevas tecnologías y formatos que, como AVIF, contribuyen a hacer una web más rápida y accesible para todos.
El formato AVIF permite entregar imágenes de gran calidad y bajo peso, pero sobre todo con menos consumo de ancho de banda que otros formatos, y esto es especialmente importante en países donde el ancho de banda disponible no es el más óptimo.
WordPress tiene un gran potencial, pero también una gran responsabilidad, de contribuir a hacer una web mejor, más accesible para todos, y este sería otro pequeño gran paso.
¡Míranos!
 |
