Herramientas útiles para crear imágenes AVIF trucos CSS

AVIF (formato de archivo de imagen AV1) es una especificación moderna del formato de archivo de imagen para el almacenamiento de imágenes, que ofrece una reducción de archivos mucho más significativa en comparación con otros formatos como JPG, JPEG, PNG y WebP. La versión 1.0.0 de la especificación AVIF se finalizó en febrero de 2019 y Open Media Alliance la lanzó al público.

En este artículo, aprenderá acerca de algunas herramientas basadas en navegador y de línea de comandos para crear imágenes AVIF.

 

¿Por qué usar AVIF sobre JPG, PNGS, WebP y GIF?

• Compresión sin pérdida y compresión con pérdida
• JPEG sufre de bandas horribles
• WebP es mucho mejor, pero todavía hay un bloqueo notable en comparación con AVIF
• Mucho espacio de color
• Profundidad de color de 8, 10 y 12 bits

Advertencias

Jake Archibald, escribió artículo hace algunos años sobre este nuevo formato de imagen y también nos ayudó a identificar algunas deficiencias en la compresión de imágenes, por lo general, debe tener cuidado con estos dos al comprimir en AVIF:

1. Si el usuario mira la imagen en el contexto de la página y parece fea debido a la compresión, entonces este nivel de compresión no es aceptable. Pero un poco por encima de ese límite está bien.
2. No hay problema con que la imagen pierda detalles notables en comparación con el original. a menos que este detalle sea importante para el contexto de la imagen.

Soluciones de navegador

Squoosh

Squoosh es una popular aplicación de compresión de imágenes web que le permite convertir imágenes en múltiples formatos a otros formatos comprimidos ampliamente utilizados, incluido AVIF.

Característica

• Límite de tamaño de archivo: 4 MB
• Configuración de optimización de imagen (ubicada a la derecha)
• Controles de descarga: esto incluye ver el tamaño del archivo resultante y el porcentaje de reducción de la imagen original
• Uso gratuito

AVIF.io

AVIF.io es una herramienta de imagen que no requiere ningún tipo de código. Todo lo que tiene que hacer es cargar las imágenes elegidas en PNG, JPG, GIF, etc. y devolverá versiones comprimidas de ellos.

Característica

• Configuración de conversión (ubicada en la esquina superior derecha del banner de carga)
• Uso gratuito

Puede encontrar respuestas a sus preguntas en Página de preguntas frecuentes de AVIF.io.

Soluciones de línea de comandos

avif-cli

avif-cli desde me encanta le permite crear imágenes AVIF almacenadas en una carpeta y convertirlas en imágenes AVIF con el tamaño de reducción que especifique.

Estos son los requisitos y lo que debes hacer:

Instale el paquete:

npm install avif

Ejecuta el comando en tu terminal:

npx avif --input="./imgs/*" --output="./output/" --verbose

• ./imgs/* - Representa la ubicación de todos sus archivos de imagen
• ./output/ - representa la ubicación de su carpeta de salida

Característica

• de uso gratuito
• La tasa de conversión se puede establecer

Puede conocer más comandos a través de avif-cli página de GitHub.

Afilado

Afilado (también apoyado por me encanta) es otra herramienta útil para convertir imágenes grandes a formatos comunes en imágenes AVIF más pequeñas y compatibles con la web.

Estos son los requisitos y lo que debes hacer:

Instale el paquete:

npm install sharp

Cree un archivo JavaScript llamado sharp-example.js y copia este código:

const sharp = require('sharp')

const convertToAVIF = () => {
    sharp('path_to_image')
    .toFormat('avif', {palette: true})
    .toFile(__dirname + 'path_to_output_image')
}

convertToAVIF()

Donde path_to_image representa la ruta a su imagen con su nombre y extensión, es decir:

./imgs/example.jpg

Y path_to_output_image representa la ruta en la que desea que se almacene su imagen con su nombre y nuevo extensión, es decir:

/sharp-compressed/compressed-example.avif

Ejecuta el comando en tu terminal:

node sharp-example.js

¡Y ahí! ¡Debe tener un archivo AVIF comprimido en su ubicación de origen!

Característica

• de uso gratuito
• Las imágenes se pueden rotar, difuminar, cambiar de tamaño, recortar, escalar, etc. sharp

Véase también: el artículo de Stanley Ully sobre Cómo procesar imágenes en Node.js con Sharp.

Conclusión

AVIF es una tecnología que los desarrolladores front-end deben tener en cuenta para sus proyectos. Estas herramientas le permiten convertir sus imágenes JPEG y PNG existentes al formato AVIF. Pero como con cualquier herramienta nueva en su flujo de trabajo, los beneficios y los inconvenientes deberán sopesarse adecuadamente de acuerdo con su caso de uso específico.

Espero que hayas disfrutado leyendo este artículo tanto como yo escribiéndolo. ¡Muchas gracias por su tiempo y espero que tenga un gran día por delante!