AVIF: formato de imagen moderno para sitios web

El formato de imagen AVIF para sitios web mejora el SEO, la velocidad de página y la experiencia del usuario

Matthias Petri
publicado:

Menos del 0,1% de todos los sitios web utilizan el formato AVIF y aprovechan la mejor oportunidad que ofrecen los formatos de imagen para mejorar de forma apreciable la velocidad del sitio web , la experiencia del usuario y la visibilidad en línea en Google. El resto de operadores de sitios web aún no utilizan el potencial que ofrece AVIF como formato de imagen. Este artículo pretende ponerle remedio y animarle a que se tome en serio el formato AVIF e, idealmente, a que lo utilice para las imágenes de su sitio web.

¿Has probado alguna vez la URL de tu sitio web con Google PageSpeed Insights para ver su rendimiento? Si no es así, hazlo directamente con tu propio sitio web.

Déjame adivinar, actualmente no ves este valor en tu sitio web, ¿verdad?

Resultado de PageSpeed Insights para TutKit - Escritorio

Cuanto más baja sea tu puntuación, más optimización necesita tu sitio web para mejorar tu PageSpeed. Si abres las recomendaciones de Google para mejorar tu PageSpeed más abajo en la página de la herramienta de pruebas, es muy posible que uno de los puntos incluya formatos de imagen modernos, si es que todavía utilizas formatos de archivo JPG o PNG para tus imágenes.

PageSpeed-Insights recomienda el uso de AVIF

Esta es una de las varias razones por las que aún no está obteniendo las mejores puntuaciones con su sitio web en PageSpeed Insights y probablemente tampoco esté superando el Core Web Vitals.

Tanto las imágenes de la página web de nuestra agencia 4eck Media como las de TutKit.com se cargan en formato AVIF: ultrarrápido, ultrapequeño y con una calidad convincente. Y AVIF nos ayuda a conseguir la mayor PageSpeed posible.

Este formato de archivo relativamente nuevo para imágenes web apenas es conocido por nadie, por lo que ha llegado el momento de presentar el moderno formato de imagen AVIF para sitios web con todas sus ventajas para SEO, PageSpeed y la experiencia del usuario.

El índice del artículo sobre AVIF:

    ¿Qué es el formato de imagen AVIF?

    AVIF es un nuevo formato de imagen publicado en 2020 por la Alliance for Open Media (AOMedia). El formato se basa en el algoritmo de compresión sin pérdidas AV1 y ofrece una serie de ventajas sobre otros formatos de imagen habituales, como JPEG y PNG, así como sobre el formato web WebP.

    Las imágenes AVIF son mucho más pequeñas que las JPEG con la misma calidad de imagen. Esto se debe a que AV1 ofrece una compresión significativamente más eficiente. Una imagen AVIF con la misma calidad de imagen que una imagen JPEG puede ser a menudo hasta un 50 % más pequeña.

    Las imágenes AVIF también ofrecen una mayor profundidad de color que las imágenes JPEG. Las imágenes AVIF pueden almacenar hasta 12 bits de profundidad de color, mientras que las JPEG sólo admiten 8 bits. El resultado es una gama cromática más amplia y colores más realistas en las imágenes AVIF.

    Además, las imágenes AVIF pueden almacenar canales alfa. Los canales alfa se utilizan para definir la transparencia de las imágenes. Esto hace que las imágenes AVIF sean ideales para aplicaciones gráficas que requieran transparencia.

    AVIF es un formato de código abierto y es compatible con una gran variedad de proveedores de software y hardware. La mayoría de los programas de edición de imágenes y navegadores ya admiten imágenes AVIF. Por tanto, ¡ya es hora de que este moderno formato de imagen se imponga!

    A continuación se enumeran algunas de las ventajas de AVIF frente a otros formatos de imagen populares:

    • Mejores índices de compresión: Las imágenes AVIF son significativamente más pequeñas que las imágenes JPEG y PNG con la misma calidad de imagen.
    • Mayor profundidad de color: las imágenes AVIF admiten una profundidad de color de hasta 12 bits, mientras que las imágenes JPEG y PNG sólo admiten una profundidad de color de 8 bits.
    • Compatibilidad con canales alfa: Las imágenes AVIF pueden almacenar transparencias, por lo que también sustituyen a la razón por la que las imágenes PNG o incluso WebP se siguen utilizando hoy en día en los sitios web.
    • Formato de código abierto: AVIF es un formato de código abierto y está soportado por un gran número de proveedores de software y hardware.
    • AVIF es un formato de imagen convincente para sitios web que ofrece muchas ventajas sobre otros formatos comunes (incluido WEBP).

    Es previsible que en el futuro AVIF desempeñe un papel cada vez más importante en el almacenamiento y la visualización de imágenes en sitios web, sobre todo porque Google ha incluido su uso directamente en las recomendaciones de los resultados de PageSpeed Insights y todos los navegadores habituales soportan ya AVIF en las versiones más recientes.

    Por lo tanto, merece la pena anticiparse a la hora de integrarlo en su propio sitio web para aprovechar ahora las ventajas para SEO, PageSpeed y la experiencia del usuario.

    ¿Por qué AVIF aporta ventajas para SEO, PageSpeed y la experiencia del usuario?

    La mayor ventaja se hace más visible cuando comparamos las imágenes en la vista. Como ejemplo, he generado una imagen a través de Midjourney de un banco de peces payaso en resolución 1024x1024 en formato PNG.

    • PNG original: 1,43 MB
    • Optimizado mediante TinyPNG: 393 KB - 73 % de ahorro
    Mejora de los gráficos PNG mediante TinyJPG

    A continuación, he convertido el archivo PNG original mediante squoosh.app con el resultado:

    • Optimizado como WebP mediante Squoosh: 84 kb - 94 % de ahorro
    • Optimizado como AVIF mediante Squoosh: 42 kb - 97 % de ahorro
    Comparación de compresión WebP y AVIF mediante Squoosh

    Como resultado, la imagen AVIF sólo ocupa la mitad que la imagen WebP con la misma calidad óptica. Muchas otras pruebas han demostrado que los artefactos de compresión, que se producen cuando los archivos JPG se comprimen demasiado, sólo se hacen ligeramente visibles cuando la calidad se ajusta por debajo de 30 hacia 20 o menos. Con una calidad de 30, incluso los componentes de texto de los gráficos de píxeles conservan una nitidez excelente sin artefactos de compresión.

    Nunca se insistirá lo suficiente en el ahorro que esto supone en los sitios web con muchas imágenes.

    AVIF para mejorar los valores SEO, la velocidad de la página y la experiencia del usuario

    Google ya ha elevado los valores fundamentales (Core Web Vitals) de un sitio web a factor de clasificación en 2021. Esto incluye, por ejemplo, la velocidad de carga, es decir, la rapidez con la que el contenido principal se muestra al usuario. Google especifica tiempos de hasta 2,5 segundos como un buen valor al que los operadores de sitios web deben aspirar para sus usuarios.

    Los datos de imagen más grandes provocan tiempos de carga más largos. Se considera entonces que las Core Web Vitals han fallado.

    También hay un segundo problema. Si se colocan en el sitio web datos de imagen más grandes basados en PNG o JPEG, por ejemplo, es posible que el contenido de texto ya esté cargado mientras una imagen tarda más en cargarse. Esto puede dar lugar a los denominados cambios de diseño acumulativos, es decir, pequeños desplazamientos que empujan hacia abajo las zonas inferiores del sitio web cuando se muestra una imagen, que es donde deben estar. A Google no le gustan estos cambios de diseño acumulativos y los notifica como errores CLS, lo que provoca que no se aprueben las Core Web Vitals.

    Además, a todos los visitantes de un sitio web les gusta que las páginas funcionen sin problemas y que el contenido esté disponible inmediatamente con un clic. También se pueden colocar imágenes de mejor calidad en el sitio web sin comprimirlas tanto que se vean artefactos de compresión. El tamaño del archivo sigue siendo pequeño en comparación con PNG o JPEG, incluso con conversión sin pérdidas o compresión normal. Por tanto, el formato AVIF mejora la experiencia de cada usuario de varias maneras. Al aprobar las Core Web Vitals, Google nos obliga a hacer algo por nuestros visitantes para que no se sientan frustrados al visitar nuestro sitio web.

    Esto significa que usted puede hacer algo para mejorar la experiencia del usuario, la velocidad de la página y la calidad técnica de su sitio web, todo lo cual tendrá un impacto positivo en su visibilidad en línea.

    Compatibilidad del navegador con imágenes AVIF

    Especialmente cuando se trata de nuevas tecnologías, todos los operadores de sitios web dudan un poco y prefieren esperar unos meses más. Por un lado, uno no quiere convertirse en beta tester de grandes lanzamientos de sistemas de tiendas o CMS, por ejemplo; por otro, nunca está completamente garantizado que no vaya a haber problemas con determinados navegadores o dispositivos.

    En el caso del formato de imagen AVIF , el factor decisivo es si los navegadores actuales son compatibles con el formato. El sitio web caniuse.com ofrece información al respecto: https://caniuse.com/avif

    Compatibilidad de los navegadores con AVIF
    Captura de pantalla: https://caniuse.com/avif

    AVIF ya es compatible con casi el 85% de los navegadores de todo el mundo. En Alemania, la cifra sigue siendo del 80,33% a fecha de 2 de septiembre... bueno, Alemania, donde las carencias en la red de telefonía móvil siguen formando parte de la vida cotidiana y algunas regiones siguen padeciendo un Internet cojo (incluida mi región: mientras viajo con gigabit en la oficina, sólo consigo 9 MBit/seg en mi despacho de casa).

    Así que ya ves que el AVIF es compatible con los navegadores más importantes desde hace tiempo.

    ¿Cuántos sitios web utilizan ya el formato AVIF?

    Al igual que caniuse.com, w3tech.com ofrece información estadística sobre el uso de determinadas tecnologías. Esto también se aplica a los formatos de imagen utilizados en los sitios web.

    Uso de AVIF en sitios web
    Capturas de pantalla de https://w3techs.com/

    Este es el porcentaje de todos los sitios web que utilizan (en septiembre de 2023)

    • PNG: 82,1
    • JPEG: 78 %
    • SVG: 55,2
    • GIF: 21,7
    • WebP: 9,2
    • ICO y BMP: 0,2 % cada uno
    • AVIF: 0,1 % (redondeado al alza)

    Esto significa que menos del 0,07 % de todos los sitios web utilizan actualmente el formato AVIF. ¿Qué? Sigue siendo una cifra ridículamente baja. Pero Heyer, es una oportunidad para que te conviertas en punta de lanza tecnológica en el uso de formatos de imagen modernos. La curva de la imagen de la derecha muestra claramente que el uso está aumentando mes a mes... todavía en el rango por mil. Sin duda, esto se acelerará pronto.

    Es interesante observar que ni siquiera el 10% de todos los sitios web siguen la recomendación de Google sobre formatos web modernos. Todos los demás están recortando en PageSpeed y la experiencia del usuario y presumiblemente también pasan el Core Web Vitals, que tiene un impacto negativo en la visibilidad en línea como un factor de clasificación.

    AVIF vs. WebP: ¿cuál es mejor para su sitio web?

    Hagamos otra prueba directa para ilustrarlo. La imagen de la derecha de la sección principal de TutKit.com tenía más de 600 KB antes de la conversión a AVIF como archivo PNG debido a las transparencias.

    TutKit en la zona de la cabeza

    Ahora el sistema la muestra como un archivo WebP con 159 KB (¡nuestra solución alternativa!). Aunque ahora se optimice con una herramienta como TINYPNG, que también puede reducir archivos WebP, nos quedan 128 KB. Una reducción del 20%.

    Como archivo AVIF , que se muestra por defecto, la imagen sólo tiene 94 KB , es decir, sólo el 59 por ciento del tamaño del WebP. En todas las pruebas, AVIF superó al formato WebP en tamaño de archivo con la misma calidad óptica.

    ¿Cuáles son las razones a favor de AVIF en lugar de WebP?

    • AVIF puede manejar transparencias y sigue conservando mejor calidad de imagen con mayor compresión y menor tamaño de archivo.
    • AVIF ya es compatible con casi el 85% de los navegadores más populares. Y la tendencia sigue en aumento.
    • Su sitio web se cargará aún más rápido gracias a AVIF en comparación con WebP. Esto es una ventaja especial para los sitios web con muchas imágenes, como las tiendas online con páginas de categorías, donde se coloca un gran número de imágenes de productos. Del mismo modo, para los sitios web en los que las imágenes deben mostrarse en alta calidad (sitios web de portafolios, referencias, etc.), puede garantizar una alta calidad visual con un tamaño de archivo reducido.

    Otra pista es lo que caniuse.com escribe directamente en la página WebP: "AVIF y JPEG XL están diseñados para sustituir a WebP". AVIF y JPEG XL están diseñados para sustituir a WebP.

    Compatibilidad con navegadores WebP
    Captura de pantalla: https://caniuse.com/webp

    Antes de que te preguntes si te estás equivocando de caballo con AVIF, porque probablemente JPEG XL también esté en la carrera, puedo tranquilizarte. Con un 0,08%, la compatibilidad de los navegadores con JPEG XL es prácticamente inexistente.

    Compatibilidad con el navegador JPEG-XL
    Captura de pantalla: https://caniuse.com/jpegxl

    Ya puedes convertir imágenes a JPEG XL en Squoosh y "sólo" tiene valores similares a WebP (ver imagen inferior).

    AVIF es y sigue siendo el formato ganador. ¡Utilízalo sin demora y aprovecha todas las ventajas también para tus páginas web!

    Squoosh.app - la mejor herramienta para convertir JPG, PNG, WebP a AVIF

    Aunque en el equipo solíamos utilizar TinyJPG o TinyPNG como herramienta en línea para optimizar archivos JPG, PNG o WebP para su uso en sitios web, ahora soy un gran fan de Squoosh de Google.

    Squoosh es un conversor de imágenes gratuito desarrollado por Google. La herramienta funciona como un servicio en línea, pero también localmente en tu ordenador o servidor (¡node.js!). Puede convertir imágenes a varios formatos, como JPEG, PNG, GIF y WebP. Y lo mejor de todo es que también convierte tus imágenes al formato AVIF.

    Squoosh.app - Conversor de imágenes de Google para AVIF

    El conversor de imágenes Squoosh utiliza diversas técnicas para reducir el tamaño de las imágenes sin comprometer su calidad. Entre ellas se incluyen la compresión de la información de color, la reducción de la resolución y la eliminación de datos redundantes.

    Sólo tienes que arrastrar la imagen y establecer el formato deseado. Unos pocos clics y tu imagen estará convertida y optimizada.

    Así se ve cuando insertas una imagen WebP y la creas una vez como AVIF (izquierda) y como JPEG XL (derecha) para su conversión y compresión. También puede utilizar el control deslizante para comparar qué nivel de calidad es el adecuado para que se conserve la calidad visible. En la configuración predeterminada, una página es siempre el archivo de origen para la comparación. De este modo, tienes un control total sobre el resultado.

    Comparación de compresión Squoosh
    En una comparación directa de AVIF y JPEG XL, una vez más hay un claro ganador: AVIF

    Tú también puedes utilizar Squoosh para tu mantenimiento de contenidos y desarrollo web para reducir el tamaño de tus imágenes gracias a formatos web modernos como WebP o AVIF y mejorar los tiempos de carga de tus sitios web. También puedes reducir el tamaño de tus archivos JPG -de forma similar a TinyJPG- si quieres subirlos a las redes sociales, por ejemplo. La ventaja sobre TinyJPG es que tienes control total sobre la compresión y puedes experimentar con diferentes ajustes de optimización para conseguir la mejor calidad con el menor tamaño posible.

    Estas son algunas ventajas de Squoosh:

    • Soporta una gran variedad de formatos de imagen a los que convertir
    • Utiliza diversas técnicas para reducir el tamaño de las imágenes.
    • Permite previsualizar las imágenes comprimidas
    • Ofrece diversos ajustes de optimización
    • La herramienta es gratuita y fácil de usar.

    A pesar de todas las características positivas, hay un inconveniente: Actualmente Squoosh sólo puede procesar una imagen a la vez y no permite el procesamiento por lotes. Espero que esta función se añada en el futuro.

    Conversión por lotes del lado del servidor en frameworks PHP de imágenes en JPG y PNG a AVIF y WebP

    Aquí en TutKit.com, nosotros mismos hemos convertido nuestras imágenes que estaban integradas en el portal como archivos JPG y PNG - más de 14.000 archivos individuales - en formato AVIF en el lado del servidor y también en formato WebP como fallback para navegadores antiguos. También hemos resuelto técnicamente el problema para que nuestros editores puedan seguir subiendo imágenes al portal en JPG o PNG, como acostumbran a hacer nuestros diseñadores, y etiquetarlas allí con metadatos. A continuación, el sistema incrusta automáticamente las imágenes en AVIF y, como alternativa para todos los navegadores antiguos (o no compatibles), las muestra en WebP.

    Para asegurarse de que funciona en el lado del servidor, utilice las últimas versiones del software. Las nuevas funciones imagecreatefromavif e imageavif para el formato AVIF sólo están disponibles bajo PHP 8.1+, y si la extensión GD fue construida con soporte AVIF. Requiere libavif versión 0.8.2 o superior.

    También preste atención a la compatibilidad de los sistemas operativos. AVIF se proporciona con los paquetes libavif-dev/libavif-devel en los repositorios:

    • de Ubuntu 21.04
    • de Debian 11
    • de Alpine 3.13
    • de Fedora 34

    Aquí está la evaluación PageSpeed para la vista móvil de TutKit.com. Aunque sigue siendo relativamente fácil obtener un valor por encima de 90 para escritorio, es realmente difícil para las vistas móviles. Seguimos trabajando para mejorar este valor hacia 100, porque lo sabemos: PageSpeed es bueno para la experiencia del usuario y, por tanto, también contribuye a nuestro éxito SEO.

    PageSpeed-Insights para TutKit - móvil

    Lo que suena tan esponjoso aquí con la integración de AVIF aquí en nuestro framework PHP Laravel, terminó sumando más de 60 tickets en nuestra herramienta JIRA, que estaban relacionados con la conversión y la integración (incluyendo la investigación, el desarrollo, la corrección de errores y pruebas). Así pues, aunque los plugins reducen significativamente la carga de trabajo en un CMS clásico como WordPress, a veces pueden ser necesarias tres semanas para un amplio desarrollo personalizado, como nos ocurrió a nosotros. Sin duda, las ventajas de utilizar AVIF merecen la pena.

    Por cierto: quizás escriba pronto un artículo sobre por qué preferimos utilizar un framework php para portales como TutKit.com en lugar de WordPress u otros CMS.

    Plugins para usar AVIF en WordPress

    Desde septiembre de 2023, el CMS WordPress no soporta la carga de imágenes AVIF por defecto - a diferencia del CMS Contao, por ejemplo, que soporta AVIF desde la versión 5.0.0. Por lo tanto, actualmente todavía es necesario seguir dos pasos al utilizar WordPress para poder dar salida a sus imágenes en AVIF.

    1. Crear soporte AVIF para WordPress
    2. Convertir imágenes de JPG/PNG/WEBP a AVIF

    Hay una serie de plugins de WordPress que permiten el uso de imágenes AVIF en sitios web de WordPress. Aquí tienes tres plugins que puedes consultar:

    • AVIF Support: Este plugin permite cargar y mostrar imágenes AVIF en sitios web WordPress. También soporta la conversión automática de imágenes JPEG y PNG a imágenes AVIF.
    • Converter for Media: Este plugin convierte todas las imágenes de tu biblioteca multimedia de WordPress en imágenes AVIF. También ofrece una serie de opciones para ajustar la calidad de la imagen y la tasa de compresión.
    • ShortPixel Image Optimizer: este plugin optimiza las imágenes de tu biblioteca multimedia de WordPress, incluida su conversión a imágenes AVIF. También ofrece otras funciones para mejorar la calidad y el rendimiento de las imágenes.

    Estos plugins son una excelente forma de aprovechar las imágenes AVIF en los sitios web de WordPress.

    Cargador compatible con AVIF como plugin de WordPress

    Haga clic aquí para acceder al plugin de soporte de AVIF - por ahora sólo tiene 1.956 descargas y menos de 800 instalaciones - se puede ver que AVIF es todavía completamente desconocido para los usuarios de WordPress.

    Actualmente, el 43,1% de todos los sitios web funcionan con el CMS WordPress. En cuanto WordPress soporte AVIF en el sistema, AVIF iniciará su marcha triunfal y barrerá a JPG, PNG e incluso WebP. - Matthias Petri


    ACTUALIZACIÓN 05.04.2024: Con WordPress 6.5, ¡por fin WordPress es compatible con AVIF! Esto significa que los plugins de soporte sólo son necesarios para las versiones más antiguas de WordPress. Razón de más para actualizar a WordPress 6.5 y superiores.

    El plugin Local Image Sharp para sitios web Strapi

    Nosotros mismos también utilizamos AVIF en el sitio web de nuestra agencia 4eck Media.de, que utiliza el CMS Strapi basado en node.js. El plugin Local Image Sharp para Strapi permite el uso de imágenes AVIF en sitios web Strapi. El plugin utiliza el kit de herramientas de procesamiento de imágenes Sharp para convertir imágenes en imágenes AVIF.

    El plugin Local Image Sharp le ofrece una serie de funciones, entre las que se incluyen

    • Conversión automática de imágenes en imágenes AVIF
    • Ajuste de la calidad de imagen y la tasa de compresión
    • Compatibilidad con varios formatos de imagen

    Para instalar el plugin, descárguelo de la Strapi Plugin Store e instálelo como cualquier otro plugin de Strapi.

    Local-Image-Sharp en el mercado Strapi

    Lo hemos configurado para que sigamos subiendo las imágenes al sistema Strapi como JPG o PNG. El sistema convierte las imágenes a AVIF y WEBP en seis resoluciones diferentes para mostrar las imágenes del tamaño correcto en el navegador como AVIF dependiendo del dispositivo (escritorio, tableta, móvil). Para los navegadores más antiguos, también tenemos aquí una solución alternativa con imágenes WebP, que se muestran a continuación.

    Lo mejor es utilizar la etiqueta <picture> , que a su vez contiene una etiqueta <source> y <img>, para mostrar las imágenes en la dimensión correcta y en los dos formatos AVIF y WebP con fuente JPEG o PNG.

    Junto con el almacenamiento en caché, las imágenes en el formato web moderno fueron uno de los impulsores más importantes para el gran rendimiento del sitio web de nuestra agencia:

    PageSpeed-Insights para 4eck Media - escritorio

    Nota sobre meta miniaturas y datos estructurados

    Como Google Imágenes todavía no admite el formato AVIF, seguimos especificando el archivo JPG asociado como "imagen" de marcado de esquema:. La meta miniatura, que especificamos para cada página de producto con el fin de ofrecer a Google una imagen de vista previa para el fragmento de búsqueda, también sigue conteniendo el formato JPG.

    Más vale prevenir que curar. Alguien ya ha informado en los foros de que la visibilidad en línea completa de las imágenes desapareció después de cambiar a AVIF. No podemos confirmar esta experiencia. Nuestra visibilidad en línea se ha mantenido constante, pero las solicitudes de rastreo de imágenes por parte de Googlebot han aumentado. Curiosamente, vemos que Googlebot rastrea las imágenes WebP que están disponibles en el código fuente como alternativa para los navegadores más antiguos. Google parece estar rastreando las imágenes WebP para el índice.

    Por lo tanto, mi recomendación sería utilizar también la fuente JPG en los metadatos para las miniaturas y también para los datos estructurados.

    Herramientas y software para editar imágenes AVIF

    Las imágenes se editan a menudo y con mucho gusto, por lo que la compatibilidad con el formato AVIF es, por supuesto, deseable para los programas habituales de edición de imágenes. A veces se descarga una imagen existente de la web para hacer un cambio. Es bueno que tu programa de imágenes favorito también pueda abrirla, que es la función más importante para la compatibilidad con AVIF. Incluso si luego se guarda en un formato diferente, se puede volver a convertir al formato AVIF utilizando Squoosh u otras herramientas.

    Aquí está una lista de software de edición de imágenes para la compatibilidad AVIF (a partir de septiembre de 2023)

    • Gimp: puede importar, editar y exportar AVIF desde la versión 2.10.22.
    • Photopea: puede importar y editar AVIF, pero no exportar. Guardar entonces posible en otro formato de archivo.
    • Affinity Photo: no soporta AVIF.
    • Photoshop: no es compatible, pero un plugin ayuda a garantizar la compatibilidad.

    Plugin AVIF para Photoshop

    Aquí puedes encontrar un plugin que permite a Photoshop abrir archivos AVIF.
    https://github.com/0xC0000054/avif-format

    La descarga está disponible en la pestaña Releases de la página.


    Una vez descargado el ZIP, añada Av1Image.8bi a la carpeta en la que Photoshop busca plug-ins. Esta es la carpeta para instalaciones estándar:
    C:Archivos de Programa - Archivos Comunes - Adobe - Plug-ins CC

    O esta carpeta: C:Archivos de programa de Adobe - Photoshop [versión]-Plug-ins

    Photoshop debe estar cerrado. A continuación, inicie Photoshop para que el plug-in pueda cargarse. A continuación, puede abrir los archivos AVIF directamente mediante arrastrar y soltar o el cuadro de diálogo Abrir de Photoshop.

    AVIF en Photoshop

    Visualización de imágenes AVIF en Windows

    Cuando descargo imágenes del sitio web porque quiero editarlas o las necesito para otros fines, naturalmente quiero que el explorador de archivos pueda abrirlas y mostrarlas.

    Esto es posible a partir de Windows 10, pero se necesita una extensión. Si haces clic en un archivo AVIF, primero aparece un mensaje de error.

    Error de visualización AVIF en Windows

    El mensaje de error contiene un enlace. Si haces clic en él, accederás a la tienda de Microsoft para descargar la extensión AVIF. Descárgala. Sólo ocupa 1,61 MB.

    Extensión AVIF para Microsoft

    Así podrás abrir y mostrar imágenes en formato AVIF en tu explorador de archivos de Windows.

    Visualización AVIF en Microsoft

    Insertar animaciones AVIF en sitios web en lugar de animaciones GIF

    Aquí tienes un conversor online para convertir animaciones GIF en animaciones AVIF. https://mconverter.eu/convert/gif/avif/

    Mientras que mi GIF de prueba tiene un tamaño de 787 KB, la animación AVIF se reduce a 411 KB.

    Mi conclusión personal

    En mi opinión, AVIF es la mejor opción para integrar formatos de imagen modernos en los sitios web. Las ventajas en compresión y calidad de imagen son convincentes. Ningún otro formato de imagen combina estas propiedades y mejora tanto los tiempos de carga. En la actualidad, muy pocos operadores de sitios web utilizan el formato AVIF, a pesar de que más del 85% de los navegadores lo admiten y de que no es un obstáculo técnico seguir utilizando WebP como alternativa. El SEO está cambiando. Por supuesto, el formato AVIF por sí solo no basta para obtener las mejores puntuaciones en PageSpeed Insights; también se necesitan otros factores técnicos. Cuando se trata de la integración de formatos de imagen modernos, podrá obtener mejores resultados con AVIF en comparación con WebP.

    El contenido optimizado para palabras clave por sí solo ya no será suficiente, porque la IA está prácticamente inundando Internet de contenido, lo que significa que muchos sitios web están compitiendo por la visibilidad en línea con sus competidores con un alto nivel de contenido. El SEO técnico y la existencia de Core Web Vitals , en particular, se están convirtiendo cada vez más en un factor de clasificación más importante y, por tanto, en un factor de desempate, ya que Google quiere ofrecer a los usuarios la mejor experiencia de usuario posible. AVIF, junto con otros factores, forma parte de la solución para acelerar los tiempos de carga, aumentar la experiencia del usuario y mejorar la visibilidad en línea a largo plazo.

    Más información sobre SEO, experiencia del usuario, diseño y tendencias técnicas

    Si te interesan estos temas relacionados con el SEO, la experiencia de usuario, las herramientas de IA y las nuevas tecnologías web, puedes obtener más información en nuestros cursos de formación y en otros artículos aquí en el blog.

    1101,908,1094,1055,1096

    Ahora le toca a usted

    Si te ha parecido interesante este artículo, escríbenos una reseña en Google. Cada reseña nos ayuda. Si necesitas ayuda con el uso de AVIF en tu proyecto web, puedes contactar con nosotros a través de nuestra página de agencia.

    Publicado el de Matthias Petri
    Publicado el: En Matthias Petri
    Matthias Petri fundó la agencia 4eck Media GmbH & Co. KG junto con su hermano Stefan Petri en 2010. Junto con su equipo, dirige el popular foro especializado PSD-Tutorials.de y el portal de aprendizaje electrónico TutKit.com. Ha publicado numerosos cursos de formación sobre procesamiento de imágenes, marketing y diseño y ha impartido clases de "Marketing y comunicación digital" como profesor en la FHM de Rostock. Ha recibido varios premios por su trabajo, entre ellos el premio especial del Mecklenburg-Vorpommern Website Award en 2011 y como Kreativmacher Mecklenburg-Vorpommern 2015. Fue nombrado miembro del Centro Federal de Excelencia para las Industrias Culturales y Creativas en 2016 y participa en la iniciativa "We are the East " como empresario y director general en nombre de muchos otros protagonistas de origen germano-oriental.
    Volver a la vista general