Con la llegada de WordPress 6.5 por fin se admite la subida y entrega de imágenes en formado AVIF, el más eficiente de los formatos de archivo de imagen actualmente, muy por encima de WebP, y por supuesto de los tradicionales PNG o JPG.
Hasta ahora había que usar trucos y plugins para usar AVIF en WordPress, pero desde la versión 6.5 ya no es necesario, puedes subirlos como cualquier otro formato de archivo de imagen.
¿Realmente merece la pena apostar por el formato de imagen AVIF?
Sin duda alguna. AVIF es un formato de imagen moderno que ofrece mejoras significativas en la calidad y compresión de la imagen con respecto a formatos anteriores como JPEG, PNG e incluso WebP.
Las imágenes AVIF pueden ser hasta un 50% más pequeñas que las JPEG manteniendo la misma calidad de imagen. Además, las imágenes en formato AVIF también admiten una amplia gama de colores (incluido HDR) y producen imágenes más nítidas que las JPEG, especialmente en áreas con mucho detalle.
Las imágenes AVIF son significativamente más pequeñas que sus equivalentes JPEG, por lo que las páginas se cargan más rápidamente y requieren menos ancho de banda para transmitirse.
Las imágenes AVIF son adaptables a cualquier tamaño de dispositivo, y se puede hacer la carga diferida que WordPress añade por defecto.
En cuanto a su adopción por parte del mercado, la mayoría de las grandes plataformas hace tiempo que están sirviendo imágenes en AVIF, y actualmente es compatible con todos los navegadores modernos.
Probando en una instalación nueva de WordPress 6.5 una imagen en formato PNG de 2560 por 1600 píxeles y 5 MB de peso de archivo, al convertirla usando Squoosh y sus ajustes por defecto, los pesos de archivo resultantes fueron estos:
- JPG – 398 KB
- WebP – 184 KB
- AVIF – 81 KB
Y sin pérdida de calidad alguna apreciable en el formato AVIF.
¿Existe algún requisito para subir archivos de imagen AVIF a WordPress?
Si tu alojamiento web tiene las últimas tecnologías y es compatible con Imagick y LibGD, solo necesitas WordPress 6.5 para poder subir archivos AVIF como cualquier otro a tu web.
¿Comprime WordPress las imágenes en formato AVIF al subirlas igual que hace con las JPG?
Sí, por defecto, WordPress comprime las imágenes en formato AVIF al 75%, pero puedes forzar a que las suba sin pérdida añadiendo esta función usando tu método preferido:
/* Subir archivos de imagen AVIF sin perdida */
function filter_avif_quality( $quality, $mime_type ) {
if ( 'image/avif' === $mime_type ) {
return 100;
}
return $quality;
}
add_filter( 'wp_editor_set_quality', 'filter_avif_quality', 10, 2 );
¿Algo más?
Nada, lánzate ya al uso masivo del formato AVIF, conseguirás muchos beneficios:
- Menos consumo de espacio en disco en tu hosting.
- Páginas de carga más rápida al entregar archivos de imagen mucho menos pesados, a igual calidad de imagen.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Grandes noticias 🙂
La duda es si añadirán posibilidad con el Performance Lab, de conversión directa a AVIF cuando se sube un jpeg, igual que ya han hecho con WebP.
Saludos!
Seguro que sí, ya hay creada una función para hacerlo, que se puede incluir en cualquier plugin.
Hola Fernando, en tu caso, seguís usando *.JPG ?
Subo en jpg que convierto automáticamente a webp, y pronto a AVIF
Perfecto Fernando, entiendo entonces que debemos convertirlas antes de subirlas y recomiendas Squoosh. Nos pondremos manos a la obra!
Respecto de svg, ahí esperanzas de que se normalice su uso? Gracias
SVG está normalizado su uso, con las debidas precauciones.
¿Algún plugins o código para convertir las imágenes subidas a avif automaticamente como webp?
Hola! Ya he convertido mis imágenes a AVIF con Squoosh, pero veo que sigue habiendo navegadores que no soportan AVIF. Por eso he pensado en dejar las webp y jpg en mi librería de medios, para que el navegador elija qué cargar. Pero he leído que hay una orden para decir a los navegadores el orden preferido de carga de la página, priorizando los avif y luego webp y jpg.
Mi pregunta es: tengo que dejar tooooodos los archivos de imagen en la librería de medios, o sustituyo todas las que no sean avif por la versión avif?
O dejo todos los formatos en la librería de medios e incluyo un código para que el navegador cargue las imágenes en orden: si no reconoce avif-que cargue webp o jpg… Y para eso qué debo insertar y dónde?
Gracias de antemano 😉
Hola Nuria, están tardando mucho en compatibilizar los navegadores con AVIF, pero sobre todo las redes sociales, y ahora mismo compartes algo con una imagen AVIF en Twitter y más y no se muestran, así que yo esperaría de momento a ponerlas por defecto y me quedaría con WebP o JPG.
Gracias, Fernando!
He probado con varios navegadores y el que me da problemas en cargar AVIF es Safari.
La pregunta es cómo poner por defecto los AVIF o WebP a nivel código, forzando a Wordpress que sirva el archivo adecuado para cada navegador. Me puedes dar un poco de luz en ese tema?
Supongo que aparte de incluir un código deberé tener en mi librería de medios de Wordpress las imágenes en todos los formatos, para que así se cargue la que se necesite en cada momento. Es esto así? Esas son mis dos dudas.
Gracias de nuevo 😉
Siempre deberás tener todos los formatos, claro, y hay varias maneras de hacer lo que dices, mira aqui. https://ayudawp.com/avif-wordpress/
Hola de nuevo,
Tras leer atentamente el artículo que me indicas, me queda claro que tengo que incorporar el siguiente código a mi web para servir imágenes AVIF mediante HTML:
El tema es dónde poner el código… Supongo que es en el archivo functions.php de mi tema hijo, pero por si acaso ando desencaminada, me gustaría si me puedes confirmar que el camino es ahí o es por otro lado. Puede sonar a súper básico, pero la verdad es que me muevo un poco por intuiciones en WP porque no soy programadora sino quizá una usuaria curiosa y con ganas de aprender.
Mil gracias de antemano!
No se mostró el código, mételo entre < pre > y < / pre > (sin los espacios extra) a ver si así los pilla el sistema de comentarios
Es el código que comentabas en tu artículo, a ver si ahora entra bien:
Que va, pero vale, el código, el de subir avifs sin pérdida ¿no?
Vaya, parece que no coge el código…
No, el de poner el orden de archivos de imagen para que los sirva en función de lo que soporta el navegador: avif, webP, jpg…