El formato es la optimización más barata que existe
En la mayoría de sitios que auditamos, las imágenes son entre el 60% y el 80% del peso total de la página. Antes de tocar el código, cambiar de formato suele recortar más de la mitad de ese peso sin que el usuario note diferencia alguna.
Los cuatro formatos que importan
| Formato | Fuerte en | Transparencia | Peso relativo |
|---|---|---|---|
| JPG | Fotografías; compatibilidad universal | No | Referencia (100%) |
| PNG | Logos, capturas, gráficos con texto | Sí | Muy alto en fotos |
| WebP | Todo uso general en web | Sí | ~40-60% menos que JPG |
| AVIF | Máxima compresión con buena calidad | Sí | ~60-75% menos que JPG |
Una fotografía de 2000 px que en JPG calidad 90 pesa 1.4 MB suele quedar en unos 620 KB en WebP calidad 80 y cerca de 410 KB en AVIF calidad 55, sin diferencia perceptible a simple vista. Los números varían según la imagen —una foto con mucho detalle fino comprime peor que un cielo despejado— pero el orden se mantiene.
Compatibilidad: dónde estamos hoy
WebP tiene soporte prácticamente universal en navegadores modernos; hace años que dejó de ser una apuesta. AVIF está soportado en las versiones actuales de los principales navegadores, pero sigue siendo el que más probabilidades tiene de fallar en un dispositivo antiguo o en un cliente de correo.
La solución no es elegir uno, es ofrecer varios y dejar que el navegador escoja:
<picture>
<source srcset="foto.avif" type="image/avif">
<source srcset="foto.webp" type="image/webp">
<img src="foto.jpg" alt="Descripción real de la imagen"
width="1200" height="800" loading="lazy" decoding="async">
</picture>
El navegador toma la primera fuente que entiende. Si no reconoce ninguna, cae al <img> con el JPG. Nunca se rompe.
Qué formato usar en cada caso
| Contenido | Recomendado | Por qué |
|---|---|---|
| Fotografía de producto o banner | AVIF con respaldo WebP y JPG | El mayor ahorro está justo aquí |
| Logo o icono con bordes nítidos | SVG si es vectorial; si no, PNG o WebP | Un SVG escala sin perder nada y pesa poquísimo |
| Captura de pantalla con texto | PNG o WebP sin pérdida | La compresión con pérdida ensucia el texto |
| Imagen para un correo | JPG o PNG | Los clientes de correo van muy por detrás |
| Favicon | ICO con varios tamaños | Sigue siendo lo más compatible |
| Animación corta | Video WebM o MP4, no GIF | Un GIF puede pesar 10 veces más que el video |
El error de la calidad al 100
Exportar en calidad 100 no produce una imagen mejor: produce una imagen enorme. En fotografía, entre 75 y 85 en JPG o WebP es indistinguible del original para el ojo humano y pesa la mitad. En AVIF el rango equivalente ronda 50-60, porque su escala no es comparable con la de JPG.
El otro error frecuente es el opuesto: comprimir dos veces. Si tomas un JPG ya comprimido y lo vuelves a comprimir, los defectos se acumulan. Trabaja siempre desde el original de mayor calidad que tengas.
Cómo migrar sin romper nada
- Mide primero. Abre las herramientas de desarrollo, pestaña Red, y ordena por tamaño. Vas a encontrar dos o tres imágenes que explican casi todo el peso.
- Empieza por esas. No conviertas 400 imágenes: convierte las 10 que pesan.
- Genera las variantes AVIF y WebP conservando el original.
- Cambia el marcado a
<picture>con respaldo. - Verifica en un móvil real, no solo en el simulador del escritorio.
- Vuelve a medir. Si el peso no bajó, algo quedó mal enlazado.
Para las conversiones puntuales usamos ChasquImage, que convierte a WebP y AVIF por lotes directamente en el navegador y permite fijar un peso objetivo en KB para que el sistema busque la mejor calidad que quepa en ese límite.
Conclusión
No hay un formato ganador para todo. Hay una estrategia sencilla que funciona casi siempre: AVIF si el navegador puede, WebP si no, JPG como red de seguridad, SVG para lo vectorial y video para lo animado. Aplicada solo a las imágenes más pesadas de tu sitio, es de las pocas optimizaciones que se hacen en una tarde y se notan el mismo día.
Si además quieres entender cómo repercute esto en tu posicionamiento, lo desarrollamos en optimizar imágenes para Core Web Vitals.