Tres formatos cubren casi todas las fotografías de la web actual. JPG ha sido el predeterminado durante tres décadas. WebP llegó en 2010 y ahora se muestra en todos los navegadores actuales. AVIF es el más nuevo de los tres, construido sobre un códec de video y generalmente crea los archivos más pequeños. Una auditoría de desempeño le indicará que "servir imágenes en formatos y quot modernos; y luego un formulario de carga o un cliente de correo electrónico rechazará el archivo moderno que creó.
Elegir entre ellos es menos sobre qué formato es mejor y más sobre hacia dónde se dirige la imagen. Una imagen de héroe en una página de inicio, una foto de producto en una lista de mercado y una imagen adjunta a un correo electrónico tienen respuestas diferentes. Esta guía compara los tres atributos que lo deciden: tamaño del archivo, calidad, transparencia, profundidad de color, animación, costo de codificación y soporte fuera del navegador. Luego proporciona una tabla de decisiones y muestra cómo convertir entre ellos.
TL;Dr: Para imágenes en un sitio web, sirva AVIF primero con WebP como alternativa y JPG como último recurso, usando
<picture>negociación de elementos o servidores; AVIF suele ser más pequeño, WebP está muy cerca y es más rápido de codificar, y JPG se abre en todas partes. Para imágenes que salen del navegador (correo electrónico, cargas, impresión, software de oficina), usan JPG o PNG cuando la transparencia importa. Para hacer que los archivos acepten otros programas, el Convertidor AVIF a JPG y WebP a JPG ejecuta el lado del cliente, nada cargado, gratis, sin registro; JPG a WebP y PNG a WebP van en sentido contrario.
¿qué son AVIF, WebP y JPG?
Los tres son formatos de imagen rasterizada para fotografías y se diferencian principalmente en la antigüedad y el diseño de su compresión.
JPG (JPEG) es el método de imágenes fijas estandarizado en Recomendación UIT-T T.81 en 1992, divide la imagen en bloques de 8x8 píxeles, transforma cada uno con una transformada de coseno discreta y descarta los detalles de alta frecuencia que el ojo menos nota. Los archivos generalmente se envuelven en el contenedor JFIF de UIT-T T.871.
webp es el formato Google's, ahora especificado en RFC 9649. Su modo con pérdida utiliza la codificación de fotogramas clave del códec de vídeo VP8 y tiene un modo sin pérdidas independiente, además de transparencia y animación. La guía en qué es WebP y por qué las imágenes guardadas aparecen como .webp lo cubre en profundidad.
todoterreno es el formato de archivo de imagen AV1, publicado por Alliance for Open Media como Especificación AVIF. Almacena imágenes codificadas con el Códec de vídeo AV1 dentro de un contenedor HEIF, se utilizan las mismas fotografías HEIC de iPhone con estructura de caja. AV1 se ofrece bajo una licencia de patente libre de regalías de Alliance for Open Media, que es una de las razones por las que los navegadores adoptaron AVIF más rápido que HEIC.
AVIF vs WebP vs JPG: la tabla comparativa
AVIF lidera la compresión y la capacidad, JPG lidera la compatibilidad y la velocidad de codificación, y WebP se ubica entre ellos en casi todas las filas.
| Atributo | todoterreno | webp | JPG |
|---|---|---|---|
| Especificación | AOMedia AVIF, códec AV1 | IETF RFC 9649 | UIT-T T.81 y T.871 |
| Introducido | 2019 | 2010 | 1992 |
| Compresión | Perdido o sin pérdidas | Perdido o sin pérdidas | con pérdidas |
| Tamaño típico de la foto | Más pequeño | Pequeño | El más grande de los tres |
| Profundidad del bit | 8, 10 o 12 bits por canal | 8 bits por canal | 8 bits por canal en la práctica |
| HDR y color amplio | sí | prohibido | prohibido |
| diapositiva | Alfa completo | Alfa completo | nadie |
| Animación | Secuencias de imágenes | sí | prohibido |
| Velocidad de codificación | Lento, con mucha CPU y con un gran esfuerzo | Moderado | firme |
| Pantalla del navegador | Chrome 85, Firefox 93, Safari 16, Edge 121 y posteriores | Todos los navegadores actuales | Universal |
| Aplicaciones de escritorio, correo electrónico, formularios de carga | Más débil | Parcheado | Universal |
| Mejor uso | Imágenes web más grandes donde los bytes son más importantes | Imágenes web generales, amplio respaldo | Cualquier cosa que salga del navegador |
La fila que sorprende a la gente es la velocidad de codificación. AVIF' Los archivos pequeños provienen de un codificador que busca con fuerza la mejor manera de codificar cada bloque, y esa búsqueda lleva tiempo. Un paso de compilación que convierte miles de imágenes de productos a WebP en minutos puede llevar mucho más tiempo para AVIF con un alto esfuerzo. Para un sitio que codifica una vez y sirve millones de veces, el comercio suele valer la pena. Para imágenes generadas sobre la marcha por solicitud, es posible que no lo sea.
¿Qué formato crea los archivos más pequeños?
AVIF generalmente crea los archivos más pequeños con una calidad visual similar, WebP es el siguiente y JPG es el más grande. El tamaño del espacio depende en gran medida de la imagen y la configuración del codificador.
Para WebP existe un punto de referencia publicado: Google's Descripción general de WebP informa archivos WebP con pérdidas entre un 25 y un 34% más pequeños que JPEG comparables con una calidad SSIM equivalente, y WebP sin pérdidas un 26% más pequeños que PNG. AVIF comúnmente mejora WebP nuevamente para fotografías, con las mayores ganancias en gradientes suaves, cielos y piel, donde JPEG's 8x8 bloques se muestran primero.
Tres advertencias mantienen esos números honestos.
- Los números de calidad no coinciden en todos los formatos. Un JPG con calidad 80, un WebP con 80 y un AVIF con 80 no tienen la misma calidad visual y diferentes codificadores para el mismo formato tampoco están de acuerdo. Compare archivos mirándolos o mediante una métrica como SSIM, nunca mediante el valor deslizante.
- Las imágenes con pocos detalles ahorran menos. A una ilustración plana o a un JPEG ya muy comprimido le queda poco que apretar.
- Vuelva a codificar un archivo con pérdidas y acumula pérdidas. La conversión de un JPG a AVIF o WebP comienza a partir de una imagen que ya perdió detalles. Codifique desde el archivo de cámara original, PNG o master de alta calidad siempre que pueda.
¿Cuánto importa la elección del formato para el peso de la página?
Lo más importante son las páginas con muchas imágenes, porque las imágenes suelen ser la mayor parte de lo que descarga un visitante. La aritmética es sencilla. Una página de catálogo con 40 fotografías de productos a alrededor de 400 KB cada una contiene 16 MB de imágenes como JPG. Con un ahorro del 25 al 34% de los informes de Google para WebP, el mismo conjunto alcanza entre 10,5 y 12 MB. AVIF normalmente se recorta más encima de eso.
En una conexión rápida de escritorio, la diferencia es modesta. En un teléfono a través de una red móvil lenta, varios megabytes es la brecha entre una página que se establece rápidamente y una que los visitantes abandonan, y las imágenes cerca de la parte superior de la página ingresan directamente a la velocidad a la que se representa el elemento visible más grande.
El formato no es la única palanca y, a menudo, no la más grande. Enviar una foto de 4000 px de ancho a una ranura de 400 px desperdicia muchos más bytes que elegir WebP en lugar de AVIF. Cambie el tamaño al tamaño mostrado primero, proporcione srcset variantes para diferentes pantallas, cargue imágenes de forma diferida debajo de la página y luego elija el formato. Hacerlo en el otro orden optimiza lo incorrecto.
¿en qué se diferencian en calidad y artefactos?
Cada formato falla a su manera cuando se envía a tamaños pequeños, y conocer la falla le ayuda a elegir.
JPG se divide en bloques visibles de 8x8 y "ringing" ondas tenues alrededor de bordes afilados como el texto de una foto. WebP' El modo con pérdida suaviza los detalles y, debido a que almacena color a media resolución, puede dejar flecos de colores alrededor de finas líneas rojas o azules. AVIF tiende a difuminar la textura fina en lugar de bloquear, por lo que un AVIF muy comprimido parece suave y ligeramente ceroso, lo que es menos objetable en las fotografías y más notable en la tela, el cabello y el follaje.
Para gráficos con bordes duros, color plano y texto, ninguno de los modos con pérdida es ideal. PNG o WebP sin pérdidas mantiene los bordes exactos.
El comportamiento de carga también difiere. T.81 define un modo progresivo para JPEG, en el que una versión borrosa de toda la imagen aparece primero y se agudiza a medida que llegan más datos, por lo que un JPG progresivo grande se siente rápido en una conexión lenta incluso antes de que finalice. WebP y AVIF, como se suele servir, dibujan sólo una vez que ha llegado suficiente archivo, lo que su tamaño más pequeño suele compensar. En imágenes de héroes muy grandes sobre conexiones deficientes, esa diferencia puede ser visible y es una razón más para cambiar el tamaño antes de elegir un formato.
¿dónde encajan PNG y GIF?
Ninguno de los dos es un formato de fotografía y ninguno compite directamente con los tres anteriores. PNG, definido en el Especificación PNG W3C, no tiene pérdidas: la elección correcta para capturas de pantalla, diagramas, logotipos y masters de edición, y la incorrecta para fotografías, que almacena en varias veces el tamaño de un JPG. GIF está limitado a 256 colores por fotograma y sobrevive principalmente para animaciones cortas en lugares que no reproducirán nada más nuevo.
En un sitio web, ambos suelen funcionar mejor como WebP o AVIF: sin pérdidas o con pérdidas de alta calidad para gráficos estilo PNG, WebP animado para clips estilo GIF. Fuera del navegador, PNG sigue siendo el formato seguro para cualquier cosa con transparencia, ya que JPG no puede contenerlo.
¿qué formato admite transparencia, HDR y animación?
AVIF admite los tres, WebP admite transparencia y animación pero no HDR, y JPG no admite ninguno de ellos.
Transparencia. AVIF almacena alfa como imagen auxiliar y WebP tiene un canal alfa en modo con y sin pérdidas. Cualquiera de los dos puede contener un recorte de producto con un borde suave a una fracción del tamaño de PNG's. JPG no tiene transparencia, por lo que cualquier área transparente debe llenarse con un color sólido al convertirlo.
HDR y color amplio. AVIF puede usar 10 o 12 bits por canal, que es lo que necesitan las fotos HDR de teléfonos y cámaras recientes para evitar bandas en cielos brillantes. WebP y JPG son de 8 bits.
Animación. Las animaciones WebP se utilizan ampliamente como un reemplazo más pequeño de GIF. AVIF define secuencias de imágenes, aunque la compatibilidad con AVIF animado en software fuera de los navegadores es menor.
¿Dónde sigue fallando cada formato?
La compatibilidad con los navegadores actuales se resuelve para los tres. El soporte en cualquier otro lugar es donde muerde la elección.
AVIF se muestra en Chrome desde la versión 85, Firefox desde 93, Safari desde 16 y Edge desde 121. Los navegadores más antiguos, los visores de fotografías de sistemas operativos más antiguos, muchas suites de oficina y una larga lista de formularios de carga no lo aceptan. Guardar un AVIF desde una página web y colocarlo en una presentación es el clásico fracaso.
WebP está más avanzado. Todos los navegadores actuales lo muestran y la mayoría de los sistemas operativos modernos lo abren, pero algunos clientes de correo electrónico, servicios de impresión y software de escritorio más antiguo aún lo rechazan.
JPG se abre esencialmente en todos los dispositivos, aplicaciones y formularios. Por eso sigue siendo el formato adecuado para cualquier imagen cuyo destino no controles.
¿Qué formato deberías utilizar? Una tabla de decisiones
Decida primero por destino y luego por contenido.
| colocación | aprovechamiento | porque |
|---|---|---|
| Imágenes de héroes y productos en su propio sitio | AVIF, con alternativas WebP y JPG | Bytes más pequeños en las imágenes más pesadas |
| Imágenes generales del sitio, canalización simple | WebP, con respaldo de JPG | Compatibilidad con navegador casi universal, rápido de codificar |
| Imágenes generadas por solicitud | WebP o JPG | El costo de codificación AVIF agrega latencia |
| Fotos con HDR o gran color | todoterreno | Sólo uno de los tres con 10 y 12 bits |
| Gráficos transparentes en la web | AVIF o WebP | Alfa en una fracción del tamaño de PNG's |
| Adjuntare de e-mail | JPG | Cada cliente lo abre |
| Cargue formularios, mercados, portales de identificación | JPG | Las listas permitidas rara vez incluyen AVIF o WebP |
| Impresión y documentos de oficina | JPG o PNG para gráficos | Soporte de software |
| Edición de masters y archivos | Formato original, PNG o TIFF | Evite la codificación con pérdidas repetidas |
El patrón es simple: formatos modernos para entrega, JPG para intercambio, sin pérdidas para maestros.
¿cómo se sirve AVIF y WebP con un respaldo JPG?
Usa el <picture> elemento. El navegador recorre el <source> lista en orden y toma el primer tipo que admite, volviendo al <img>, según lo definido por el WHATWG HTML picture elemento:
<picture>
<source srcset="hero-1600.avif" type="image/avif">
<source srcset="hero-1600.webp" type="image/webp">
<img src="hero-1600.jpg" width="1600" height="900" alt="Mountain lake at sunrise">
</picture>
Un navegador con soporte AVIF descarga solo AVIF. Uno sin AVIF pero con WebP descarga el WebP y todo lo demás obtiene el JPG. Ningún formato se descarga dos veces.
La alternativa es la negociación del lado del servidor: el navegador envía un Accept encabezado como image/avif,image/webp,*/*, y el servidor o CDN devuelve el mejor formato que tiene desde una única URL. Esto mantiene el marcado simple pero requiere que el caché varíe en ese encabezado, como se describe en HTTP's reglas de negociación de contenido en RFC 9110.
Para generar las tres versiones en un paso de compilación, la biblioteca Node.js sharp las escribe todas:
import sharp from 'sharp'
const input = sharp('hero-master.png').resize(1600)
await input.clone().avif({ quality: 50 }).toFile('hero-1600.avif')
await input.clone().webp({ quality: 80 }).toFile('hero-1600.webp')
await input.clone().jpeg({ quality: 82, mozjpeg: true }).toFile('hero-1600.jpg')
Los valores de calidad difieren a propósito, ya que las escalas no se corresponden entre formatos. Verifique visualmente la salida antes de decidirse por los números.
¿cómo se convierte entre AVIF, WebP y JPG sin cargarlo?
Utilice un convertidor del lado del cliente, que decodifica y vuelve a codificar la imagen dentro de la pestaña del navegador para que el archivo nunca salga de su dispositivo. Los convertidores de Toolz están divididos por dirección.
Desde AVIF hasta algo que otros programas aceptan. los Convertidor AVIF a JPG es la solución para un AVIF guardado de un sitio web que un documento o formulario rechaza. Las áreas transparentes se llenan de blanco y una nota debajo del resultado lo dice. El control deslizante Calidad va de 10 a 100 y comienza en 90. Cuando la imagen tiene un fondo transparente que debe sobrevivir, convierta el AVIF a PNG en cambio, mantiene el canal alfa y almacena los píxeles decodificados sin pérdidas.
La decodificación de AVIF utiliza el propio decodificador AVIF del navegador ', por lo que el convertidor necesita un navegador que muestre AVIF: Chrome, Edge, Firefox o Safari 16 y posteriores. Si el navegador no puede abrir el archivo, la fila lo dice. Un AVIF animado se lee como una imagen fija.
De WebP a JPG. Por las mismas razones, WebP a JPG convierte un .webp descargado en un archivo que se abre en todas partes, con el mismo relleno blanco para mayor transparencia.
De JPG y PNG a WebP. Mergi în altă parte, JPG a WebP encoge fotografías para publicar y PNG a WebP hace lo mismo con capturas de pantalla y gráficos transparentes manteniendo el canal alfa. La codificación utiliza el navegador y el codificador de lienzo #39. Los actuales Chrome, Edge y Firefox pueden escribir WebP; un navegador que no puede obtener un error claro en lugar de un PNG renombrado a .webp.
Lo que no hacen los convertidores. Toolz lee AVIF pero no lo escribe porque los navegadores no exponen de manera confiable un codificador AVIF a las páginas web. Para producir archivos AVIF, utilice una herramienta de compilación como el ejemplo nítido anterior. El Convertidor de imágenes acepta JPG, JFIF, PNG, WebP, AVIF, GIF, BMP, ICO, HEIC, TIFF, PSD, SVG, CR2, DNG y PDF y escribe JPG, PNG, WebP, GIF, ICO, PDF y SVG, que cubre lotes mixtos.
Cada conversión se dibuja a través de un lienzo, por lo que los datos EXIF, las coordenadas GPS y los perfiles de color no se copian en la salida. Las imágenes de más de 100 megapíxeles se rechazan con un mensaje en lugar de bloquear la pestaña. Las herramientas son gratuitas, sin registro, con un límite de conversión diario.
¿la conversión entre AVIF, WebP y JPG pierde calidad?
Convertir a un formato con pérdidas pierde algunos detalles cada vez y convertir a un formato sin pérdidas no pierde nada más. La dirección decide cuál se aplica.
| cambio | ¿paso perdido? | que cambia |
|---|---|---|
| AVIF a JPG | sí | Segunda codificación con pérdida; transparencia llena de blanco; archivo generalmente más grande |
| AVIF a PNG | prohibido | Los píxeles decodificados se mantienen exactamente; transparencia mantenida; archivo mucho más grande |
| WebP a JPG | sí | Segunda codificación con pérdida; transparencia llena de blanco |
| JPG a WebP | sí | Segundo codificado con pérdida además de JPEG's; archivo generalmente más pequeño |
| PNG a WebP | Por lo general, con WebP con pérdidas | Transparencia mantenida; archivo generalmente mucho más pequeño |
| Cualquiera de ellos a AVIF | Sí, en uso típico | Archivo más pequeño; codificación más lenta |
Siguen dos consecuencias prácticas. Un archivo que ha pasado por varias conversiones con pérdidas se degrada un poco en cada paso, así que evite viajes de ida y vuelta como JPG a WebP a JPG. Y el tamaño de un archivo convertido dice poco sobre su calidad: un AVIF convertido a JPG se hace más grande sin mejorar, porque el codificador JPG gasta más bytes describiendo la misma imagen ya comprimida.
Con una configuración de calidad de alrededor de 90, es muy difícil ver un solo paso adicional con pérdidas en fotografías normales. Las pérdidas se vuelven visibles con conversiones repetidas, configuraciones de baja calidad o imágenes con texto fino y bordes afilados.
¿por qué se abrió un AVIF o WebP guardado?
La apertura del programa no tiene decodificador para el formato. Un navegador actual muestra la imagen porque negoció ese formato con el servidor, pero luego el archivo en el disco se entrega a un software con una lista de formatos más antigua o más limitada: una suite ofimática, un visor de fotos más antiguo, un cliente de correo electrónico o un formulario de carga 's lista de permitidos.
Cambiar el nombre del archivo a .jpg no ayuda. Los bytes aún comienzan con un AVIF ftyp caja o WebP RIFF el encabezado y un programa que espera JPEG no encuentran datos JPEG. Convertir el archivo es la solución y también vale la pena comprobar si el sitio ofrece un enlace de descarga directa, que a veces sirve al JPG o PNG original en lugar de la versión negociada.
¿jpg está obsoleto?
No. JPG está obsoleto sólo porque el formato que un sitio web debe enviar a un navegador actual, e incluso allí sigue siendo el respaldo en todos <picture> elemento. Como formato de intercambio, para correo electrónico, formularios, impresión, documentos de oficina y cualquier cosa dirigida a software que no controle, sigue siendo el valor predeterminado correcto y ni AVIF ni WebP lo han reemplazado.
La misma lógica se aplica al otro formato que confunde a las personas ajenas al navegador. Las fotos del iPhone son HEIC, un hermano de AVIF en el mismo contenedor HEIF, y la comparación de HEIC frente a JPG explica por qué esos archivos no se abren en Windows. Cada convertidor de imágenes aparece en centro de herramientas de imagen.
