¿Estoy obligado a elegir un solo formato?

No, y el enfoque profesional consiste precisamente en no elegir un único formato. El elemento `picture` de HTML te permite declarar varias versiones de la misma imagen; el navegador escoge el formato más eficiente que soporta e ignora en silencio los que no reconoce. Así obtienes la ganancia de velocidad de AVIF en los navegadores modernos sin perder a ningún visitante en entornos antiguos. La obligación de elegir un solo formato solo aparece en contextos donde no puedes usar ese mecanismo, como un boletín de correo electrónico.

¿Cuál debo usar en imágenes que necesitan transparencia?

Los tres soportan canal alfa, así que la transparencia ya no es un criterio que determine por sí solo la elección del formato. Antes, si querías transparencia estabas condenado a PNG y, por tanto, a archivos grandes; WEBP y AVIF eliminaron ese dilema. En ese caso la decisión vuelve a tomarse en el eje de eficiencia y compatibilidad. Solo ten cuidado con una cosa: cuando trabajes en modo con pérdida, revisa si aparecen degradaciones en las transiciones de bordes suaves, especialmente en logotipos de bordes nítidos.

¿Qué hago con capturas de pantalla e imágenes cargadas de texto?

Con este tipo de contenido hay que ir con cuidado, porque la compresión con pérdida puede suavizar los bordes finos del texto y la legibilidad se resiente directamente. Con ajustes de calidad altos, tanto WEBP como AVIF suelen dar un resultado limpio y el archivo sigue siendo más pequeño que el PNG, pero hacer una conversión masiva con ajustes agresivos es arriesgado. En este tipo de imágenes, prueba con algunos ejemplos y revisa el resultado con un zoom del cien por cien. Si necesitas nitidez absoluta, quedarte en PNG o valorar los modos sin pérdida es el camino más seguro.

Para la velocidad del sitio: ¿PNG, WEBP o AVIF?

Q: ¿WEBP ya es innecesario? ¿Debería pasar directamente a AVIF?

WEBP sigue siendo un peldaño intermedio valioso y no es innecesario. AVIF suele ofrecer una compresión más eficiente, pero el soporte de WEBP en navegadores y herramientas lleva más tiempo asentado y lo reconoce un abanico más amplio de software, desde gestores de contenido hasta programas de edición de imagen. Si vas a montar una cadena de respaldo, poner AVIF en primer lugar, WEBP en segundo y PNG o JPG como último escalón es una solución equilibrada. Si solo puedes servir un único formato moderno, decide según el perfil técnico de tu audiencia.

La pregunta es más compleja de lo que parece

Las respuestas a la pregunta "¿qué formato de imagen debería usar en mi sitio web?" suelen proclamar un ganador. La realidad es que esa pregunta no se puede responder con un único ganador, porque los tres formatos son fuertes en puntos distintos y la mayor variable de la web —el dispositivo y el navegador del visitante— no está bajo tu control.

En este artículo comparamos los tres formatos con criterios reales y después explicamos la estrategia práctica que debería aplicar la mayoría de los sitios.

Retrato breve de los tres formatos

PNG

Funciona sin pérdida: guarda el valor exacto de cada píxel y no descarta ninguna información. Soporta el canal alfa y ese soporte es sumamente consistente. Se abre en todos los navegadores, en todos los dispositivos, en todos los programas.

Dónde es fuerte: Gráficos de bordes nítidos, logotipos, capturas de pantalla, imágenes con texto fino, ilustraciones con pocos colores. Con ese contenido la compresión sin pérdida trabaja de forma eficiente y el archivo se mantiene razonable.

Dónde es débil: El contenido fotográfico. Las texturas naturales y las transiciones continuas de color no se pueden codificar de forma eficiente con algoritmos sin pérdida; la versión PNG de una fotografía resulta sorprendentemente grande. En la web eso significa directamente una página lenta.

WEBP

La primera generación ampliamente extendida de los formatos modernos. Puede trabajar tanto en modo con pérdida como sin pérdida y soporta el canal alfa. Es notablemente más eficiente que JPG.

Dónde es fuerte: El equilibrio entre eficiencia y compatibilidad. El soporte de navegadores lleva mucho tiempo asentado y un amplio abanico de software, desde gestores de contenido hasta programas de edición de imagen, reconoce WEBP. En la práctica es una ventaja que no conviene subestimar.

Dónde es débil: No es tan eficiente como AVIF. Con la misma calidad visual suele producir archivos más grandes.

AVIF

Formato de nueva generación basado en la codificación intra-fotograma del códec de vídeo AV1. Soporta canal alfa, HDR, gamut de color amplio y alta profundidad de color. Tiene tanto modo con pérdida como sin pérdida.

Dónde es fuerte: La eficiencia de compresión. Con una calidad visual similar produce archivos notablemente más pequeños que JPG —la proporción de aproximadamente la mitad que tanto se repite es una generalización, pero la dirección es correcta— y suele ser también más eficiente que WEBP. En contenido fotográfico la diferencia resulta llamativa.

Dónde es débil: La compatibilidad. Los navegadores principales actuales lo soportan, pero los dispositivos antiguos, los sistemas operativos antiguos, muchos programas de escritorio y algunas plataformas no. Además, el proceso de codificación es más pesado en términos de cómputo; generar el archivo lleva más tiempo.

Tabla comparativa

| Criterio | PNG | WEBP | AVIF | |---|---|---|---| | Eficiencia de compresión | Baja (en fotografía) | Buena | La mejor | | Modo sin pérdida | Siempre | Sí | Sí | | Transparencia | Sí | Sí | Sí | | Soporte de navegadores | Universal | Muy amplio | Navegadores actuales | | Soporte en programas de escritorio | Universal | Amplio | Limitado | | Velocidad de codificación | Rápida | Rápida | Más lenta |

La comprensión clave: esto no es una pregunta de "o esto o aquello"

Si has llegado leyendo hasta aquí, habrás notado una tensión. AVIF es el más eficiente, pero el más arriesgado. PNG es el más seguro, pero el más lento. Quedarse en medio tampoco parece una solución.

La solución no es elegir entre los formatos, sino servirlos todos a la vez.

El elemento picture de HTML existe exactamente para esto. Declaras varias versiones de la misma imagen; el navegador escoge el formato más eficiente que soporta e ignora en silencio los que no reconoce. El visitante no nota nada: simplemente carga más rápido en un navegador moderno.

Una cadena de respaldo típica se monta así:

AVIF — los navegadores que lo soportan reciben el archivo más pequeño
WEBP — los entornos modernos que no soportan AVIF caen aquí
JPG o PNG — la última red de seguridad para los entornos más antiguos

El coste de este enfoque es que tienes que generar y almacenar varias versiones de cada imagen. La ganancia es a la vez velocidad y accesibilidad; no sacrificas ninguna de las dos.

¿Y si estás obligado a elegir un solo formato?

En algunos contextos no puedes usar el mecanismo picture: un boletín de correo, la subida a determinadas plataformas, el envío directo de archivos. En esos casos la decisión se toma según el contenido y la audiencia:

Contenido fotográfico, audiencia web actual → AVIF o WEBP. WEBP es más seguro, AVIF es más rápido.
Contenido fotográfico, perfil de audiencia desconocido → JPG sigue siendo la elección universal más segura.
Logotipo, icono, gráfico de bordes nítidos → PNG. Sin pérdida, con transparencia consistente, se abre en todas partes y con ese contenido ya es pequeño.
Captura de pantalla, texto denso → PNG, o WEBP de alta calidad. La legibilidad es el criterio más importante.
Se necesita transparencia y el archivo debe ser pequeño → WEBP o AVIF; ambos soportan el canal alfa.

Error frecuente: sacrificar el original

Hay un punto que se suele pasar por alto en el debate sobre formatos. Los archivos optimizados que generas para la web son copias de entrega, no la copia maestra.

Cuando generas un WEBP o un AVIF con pérdida, los datos descartados no vuelven. Si más adelante necesitas redimensionar la imagen, generarla con otro ajuste de calidad o convertirla a otro formato, necesitarás el original sin pérdida.

Por eso, cuando conviertas PNG a AVIF, no borres el PNG original. Que el original siga siendo sin pérdida; la copia de presentación puedes regenerarla tantas veces como quieras.

Lo que el formato no puede resolver

Una última advertencia: la optimización de formato es solo una parte del problema de velocidad de página y no lo resuelve todo por sí sola.

Si sirves con 4000 píxeles de ancho una imagen que en pantalla se ve con 400 píxeles de ancho, pasar el formato a AVIF no elimina ese derroche: solo lo empaqueta de forma un poco más eficiente. Generar las imágenes al tamaño en el que realmente se usan suele aportar más ganancia que cambiar de formato.

Del mismo modo, cargar de forma diferida las imágenes que están fuera de la parte visible de la pantalla y eliminar de la página las imágenes innecesarias son ganancias independientes del formato.

En resumen

AVIF es el más eficiente, WEBP el más equilibrado, y PNG el más seguro y todavía la elección correcta para contenido de bordes nítidos. Pero la respuesta de fondo no es elegir uno de ellos: es montar una cadena de formatos de respaldo y dejar que el propio navegador escoja lo mejor para él. Allí donde puedas hacerlo, obtienes velocidad y accesibilidad al mismo tiempo. Donde no puedas, el tipo de contenido y el perfil de tu audiencia deciden, y en cualquier caso no olvides guardar tu original sin pérdida.