JPG, PNG, WEBP o AVIF: cómo elegir de verdad

La regla, en una línea cada caso

Casi todo queda cubierto por cuatro frases. El resto del artículo explica por qué.

• Fotografía que va a una web → WEBP.
• Fotografía que va a cualquier otro sitio (correo, imprenta, un formulario) → JPG.
• Logotipo, icono, captura, diagrama o cualquier cosa con transparencia → PNG, o WEBP si es para web.
• Animación → WEBP si se verá en un navegador; GIF cuando la compatibilidad importe más que la calidad.

Por qué el contenido importa más que el formato

El JPG comprime descartando detalle de alta frecuencia, esos cambios bruscos entre píxeles vecinos. En una fotografía hay muy poco de eso, y por eso el JPG puede tirar el 90% de los datos y verse idéntico. En una captura de texto, en cambio, *todo* es detalle de alta frecuencia: cada letra es un borde negro y duro sobre blanco. El JPG ataca precisamente lo que necesitabas conservar, y de ahí que las capturas en JPG se vean sucias y, absurdamente, a menudo pesen más que el PNG.

El PNG tiene el sesgo contrario. Comprime de maravilla las tiradas de píxeles idénticos, así que un logotipo de cuatro colores planos queda diminuto. Apúntalo a una fotografía —donde casi ningún par de píxeles contiguos coincide— y no tiene con qué trabajar, así que el archivo se hincha a tres o cinco veces el JPG.

WEBP: el valor por defecto que casi nadie usa todavía

El WEBP hace ambos trabajos. Tiene un modo con pérdida que gana al JPG por un 25-35% a igual calidad visual, un modo sin pérdida que gana al PNG por un margen parecido, y admite transparencia y animación. No hay ningún otro formato ampliamente compatible que sustituya a los dos.

La vieja objeción era Safari, que no lo soportó hasta la versión 14 en 2020. Esa objeción caducó hace años: todos los navegadores en uso manejan WEBP. Si tu web sigue sirviendo JPG y PNG por todas partes, convertir las imágenes suele ser la mayor mejora de peso de página disponible, y se hace en una tarde.

AVIF: mejor, con truco

El AVIF comprime todavía mejor —alrededor de un 50% menos que el JPG— y maneja los degradados sin las bandas que afectan tanto al JPG como al WEBP. Para imágenes de cabecera fotográficas es genuinamente la mejor opción disponible.

Los inconvenientes son reales. La codificación es lenta, lo que importa si procesas miles de imágenes. Y el soporte, aunque bueno en navegadores, es irregular en las herramientas de alrededor: muchos gestores de contenido, editores y plataformas sociales todavía se atragantan. Úsalo donde controles la cadena y sirve WEBP como alternativa.

La trampa de la transparencia

Es el error caro más frecuente, así que conviene decirlo claro: el JPG no puede guardar transparencia. No es que la guarde mal — es que el formato no tiene canal alfa.

Así que un logotipo transparente guardado como JPG gana un fondo sólido, normalmente blanco, y en cuanto se coloca sobre una página de color aparece dentro de un recuadro blanco. Y ninguna conversión lo deshace: una vez perdida la transparencia, se perdió, porque esa información nunca llegó a escribirse en el archivo. Si tu logotipo necesita transparencia, vive en PNG, WEBP o SVG, para siempre.

¿Y el SVG?

Para logotipos, iconos y diagramas sencillos, el SVG gana a todo lo anterior: es una descripción de formas en lugar de una rejilla de píxeles, así que se ve nítido a cualquier tamaño, suele pesar una fracción y puede cambiar de color con CSS para el modo oscuro.

Solo sirve para dibujo vectorial: no puedes guardar una fotografía como un SVG útil. Pero si tu logotipo lo hizo un diseñador, pide el SVG: probablemente estás sirviendo un PNG de 40 KB donde un SVG de 3 KB se vería mejor en todas las pantallas.

Una cosa que gana a la elección de formato

Servir la imagen a las dimensiones correctas. Una fotografía de 4000 píxeles de ancho mostrada en una columna de 800 desperdicia cerca del 96% de sus datos por muy hábilmente que esté comprimida, y quien te visita se descarga cada byte antes de que el navegador los tire.

Redimensiona primero, elige formato después y comprime al final. En ese orden, el formato es un refinamiento. En el orden equivocado, es mover las sillas de cubierta.