Cómo usar imágenes en formato AVIF en WordPress

Si quieres ofrecer una web lo más optimizada posible hay muchas maneras de hacerlo, pero un básico es utilizar formatos de imagen que ofrezcan la mayor calidad con el menor peso de archivo posible, al ser las imágenes 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 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

Pero eso era hasta ahora, pues en 2018 salió a la luz AVIF, o formato de imagen AV1, un formato de imagen 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 (que de nuevo tiene poco, pues lleva 10 años entre nosotros).

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 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:

Compatibilidad de AVIF con los navegadores

Actualmente el formato de imagen AVIF solo lo reconocen los navegadores Chrome (desde la versión 85), también en 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 la 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.

A mi personalmente me gusta mucho el servicio web gratuito 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, se va 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, y por supuesto tampoco archivos en formato AVIF.

Para saltarte esta limitación te recomiendo que añadas la siguiente función a tu plugin de personalizaciones, o en su defecto al archivo functions.php del tema hijo 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 he añadido otros formatos que quizás necesites pronto, como webp, heic o heif, de nada 🙂

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 y copiar la URL para usarla posteriormente, pero es complicarse demasiado la vida, al menos bajo mi punto de vista.

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, ningún problema por esta parte.

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 con nota 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ómodo 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 como al que estamos acostumbrados en el primer mundo.

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.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!