homefinance blog
¿Ya has probado AVIF, el último formato de imagen fuerte? En Imagify, comenzamos a obtener preguntas sobre por qué nuestro complemento no lo acepta (spoiler: todavía). En este artículo, descubrirá por qué AVIF puede cambiar el juego para optimizar la imagen y dónde se compara con los formatos más populares, como JPG y WebP. Y, por supuesto, descubrirá más sobre los planes de Imagify para apoyar a AVIF. ¿Qué es el formato de imagen AVIF? AVIF es un formato de imagen basado en el código de video AV1 compresas las imágenes con AV1 en el HEIF (archivo de imagen de alta eficiencia). En inglés simple, significa que las imágenes se comprimen al máximo: tienen dimensiones más fáciles que nunca, manteniendo la misma calidad. Tal compresión tan fuerte se acompaña de otras características importantes, como HDR (alto rango dinámico) y resolución de color de 12 bits.
Y aquí están. AVIF es un software abierto y no tiene derechos de autor; significa que si desea usarlo para cualquier proyecto de compresión o negocio de compresión de imágenes, no debe pagar nada. AVIF ha sido desarrollado por muchos gigantes tecnológicos, como Google, Amazon, Cisco, Netflix y muchos otros. La razón es simple. Estas compañías están extremadamente interesadas en desarrollar y difundir un formato de imagen de alta calidad, que no necesita demasiado ancho de banda; así es como más personas pueden consumir contenido en sus dispositivos.
Dado su notable rendimiento, AVIF parece ser el sustituto perfecto para las formas más difíciles como JPEG y WebP. Hasta hace algún tiempo, solo había un problema: la compatibilidad del navegador. Que los navegadores aceptan AVIF durante mucho tiempo, solo una pequeña parte de los navegadores ha aceptado AVIF. En otras palabras, la mayoría de los usuarios no podían ver ningún formato de foto AVIF. Desde octubre de 2021, las cosas son diferentes. Ahora, Avif es aceptado por Firefox, Chrome y Opera. En general, el 67% de los usuarios puede beneficiarse del formato. Uso global de avif – Fuente: puedo usar
Y es por eso que es hora de comenzar a considerar AIVIF serio para optimizar el rendimiento de la imagen.
Comparación del rendimiento: AVIF vs. WebP (y otros formatos) mencionó cómo el formato AVIF ofrece la mejor compresión en el mercado y mantiene una alta calidad de imagen. Hagamos una comparación de rendimiento de la imagen y veamos cómo es AVIF para formatos como JPEG y WebP. Usaremos Squeosh, una aplicación web que compara fácilmente diferentes formatos. Tomemos una de las imágenes más difíciles formada como punto de partida y veamos cómo funcionan los otros formatos. Elegí una imagen PNG con un tamaño original de 15.6 MB y medí la diferencia entre el tamaño original y la conversión en formato JPG.
La conversión de PNG a JPG muestra un descuento del 92%. El tamaño de la imagen ahora es de 1.20 MB. Debido a que JPG no es el más fácil formado y lo sabemos, no podríamos esperar más que eso.
Comparación del rendimiento de PNG y JPG
¿Qué tal webp? Realicé la comparación de nuevo. Esta vez, la imagen PNG se comprimió con 95%. El tamaño de la imagen ahora es de 704 kb. Dada la dimensión inicial (15.6 MB), es un gran resultado, y es difícil observar cualquier disminución en la calidad de la imagen. Después de todo, WebP es el formato de imagen que debe usar en WordPress. Comparación del rendimiento de PNG y WebP
Luego hice la comparación nuevamente y descubrí que el formato AVIF aumenta al nivel de expectativas de rendimiento. El tamaño de la imagen se redujo en un 98%. Tiene solo 261 kb, y todavía es difícil ver cualquier diferencia en la calidad de la imagen.
Comparación del rendimiento de PNG y AVIF
Aquí está el resumen completo de las comparaciones que hicimos. Muestra cómo AVIF puede reducir el tamaño de sus imágenes.
Y ahora podrías preguntarte: ¿por qué Imagify no acepta AVIF? Esto nos lleva a la siguiente sección. Por qué Imagify no acepta AVIF (todavía) Jean-Baptiste Marchand-Arvier, cofundador y CEO de WP Media, explica: “AVIF se ha lanzado como un formato experimental y un porcentaje muy pequeño de navegadores lo aceptó. Además, AVIF ha tenido algunos problemas debido al tiempo de codificación. Al principio, la codificación tomaría unos segundos en la imagen, lo cual es extremadamente lento. Como comparación, la compresión de imagen en Imagify generalmente toma menos de 100 ms. Desde entonces, se ha trabajado mucho trabajo para mejorar el rendimiento “.
Como puede ver en la captura de pantalla a continuación, el tiempo de codificación es mejor y mejor:
Optimización de codificación – Fuente: Web.dev
Jean-Baptiste continúa: “Además de las mejoras realizadas en el tiempo de codificación, ahora varios navegadores aceptan AVIF. Y este formato es extremadamente interesante por dos razones: acepta el canal alfa (transparencia), por lo que puede usarse como un reemplazo para PNG y acepta que la animación se use como sustituto de GIF. Es por eso que Imagify definitivamente admitirá AVIF en el futuro corto ”. Y agrega: “Probablemente reemplazaremos la webp con AVIF. De lo contrario, puede ser demasiado complejo o confundido para nuestros usuarios ”. Si se pregunta qué significa, aquí hay un contexto. WebP se lanzó en 2010, hace más de 10 años. Sin embargo, no es completamente compatible con los navegadores y los sistemas operativos. La única compatibilidad parcial implica dos cosas. Como propietario de un sitio, debe administrar 2 formatos diferentes: el “clásico”, como JPG o PNG, y el más eficiente, como WebP o AVIF. Por otro lado, los complementos de optimización de imágenes, como Imagify, deben almacenar ambos formatos en sus servidores.
“Desde la perspectiva del usuario”, dice Jean-Baptiste, “significa que un nuevo formato como AVIF finalmente no ayudará a reemplazar JPG o PNG: permanecerán. Sin embargo, la conversión de estos formatos en AVIF ayudará a mejorar el rendimiento de la imagen y es por eso que AVIF reemplazará la webp en algún momento. Los usuarios no necesitarán ambos formatos. Y queremos mantener el complemento lo más simple posible “.
WebP sigue siendo una excelente manera de optimizar sus imágenes, por lo que ya no puede convertir sus imágenes con Imagify, pero siempre puede convertir sus imágenes y mejorar el rendimiento de su imagen en este momento. Más del 90% de los usuarios de todo el mundo podrán ver sus imágenes convertidas en formato WebP, por lo que sigue siendo una excelente opción para que sus fotos sean más livianas y optimizar el rendimiento del sitio. Al ejecutar una información de auditoría de la disposición, es posible que haya encontrado la recomendación de rendimiento con respecto a la difusión de imágenes en formatos de nueva generación. Bueno, WebP es exactamente el formato de nueva generación que Google recomienda con AVIF. Es todo lo que necesita para que las imágenes se carguen más rápido. Recomendación PageSpeed Insights – Servir imágenes en formatos de nueva generación
Hice una prueba y creé tres páginas. Cada página solo contiene la imagen en un formato particular: PNG, JPG o WebP. Cuando ejecutamos la auditoría de Impights PageSpeed para la página, incluida la imagen PNG, recibí una señal roja sobre el formato de nueva generación. Puede ver cómo el ahorro estimado es enorme: 1,076.7 kb.
Auditoría PSI para imagen PNG
Lo mismo es cierto al probar la página con la imagen JPG. La actuación fue un poco mejor y recibí una bandera naranja. Sin embargo, hay un lugar de mejora: un ahorro potencial de 16.8 kb.
Auditoría PSI para la imagen JPG
No es una sorpresa que la recomendación se convierta en una auditoría pasada cuando convertí la imagen en WebP con Imagify y creé una página dedicada:
Auditoría PSI para la imagen webp
Obtuve el mismo resultado al probar la página con la imagen AVIF:
Auditoría PSI para la imagen AVIF
Entonces WebP y AVIF dan el mismo gran resultado. Además, la puntuación PageSpeed Insights es casi la misma:
| Performance Score-Webp | |
|
También probé la diferencia de tamaño de la imagen y el byte entre las páginas WebP y AVIF. Y no pudimos ver una gran diferencia:
Como puede ver, WebP y AVIF son bastante similares en términos de proporcionar un rendimiento de imagen notable. Por un lado, AVIF ofrece una optimización ligeramente mejor. Sin embargo, a menos que su sitio tenga miles y miles de imágenes, su rendimiento será excelente con WebP, y porque sigue siendo el más común para nueve generaciones. Además, con Imagify, las imágenes de conversión en formato WebP son más fácil y más rápido que nunca, debido a la nueva compresión más rápida que le permite convertir sus imágenes lo antes posible. Esto es lo que debes hacer:
Descargar imagen gratis
Vaya a Configuración> Optimización> Formato WebP y marque ambas casillas:
3. Convierta sus imágenes (y aproveche la optimización del bloque):
