Toda imagen web implica un equilibrio entre calidad, tamaño de archivo y compatibilidad. Los formatos más comunes son WebP, AVIF, SVG, PNG y JPEG. Elegir el adecuado puede marcar la diferencia entre una página que carga rápido y otra que hace esperar a tus visitantes, especialmente si usan una conexión móvil. Compara aquí los formatos más habituales y descubre cuál se adapta mejor a tu proyecto.
Resumen de un vistazo
| Característica | AVIF | WebP | JPG | PNG |
|---|---|---|---|---|
| Tipo de compresión | Con pérdida y sin pérdida | Con pérdida y sin pérdida | Solo con pérdida | Solo sin pérdida |
| Calidad a igual tamaño | Excelente (líder en su categoría) | Muy buena | Buena | No aplica (no pierde calidad) |
| Tamaño de archivo habitual | El más pequeño (aprox. 50 % menos que JPG) | Pequeño (aprox. 25–35 % menos que JPG) | Mediano | Grande |
| Transparencia (canal alfa) | ✅ Sí | ✅ Sí | ❌ No | ✅ Sí |
| Compatibilidad con animación | ✅ Sí | ✅ Sí | ❌ No | Solo mediante APNG |
| Profundidad de color | Hasta 12 bits (HDR) | Hasta 8 bits | 8 bits | Hasta 16 bits |
| Compatibilidad con navegadores | Buena (Chrome, Firefox, Edge y Safari 16 o posterior) | Excelente (todos los navegadores modernos) | Universal | Universal |
| Velocidad de codificación | Lenta | Rápida | Muy rápida | Rápida |
AVIF: el nuevo referente
Basado en el códec de vídeo AV1, AVIF genera archivos muy pequeños y conserva un nivel de detalle notable, incluso en las sombras y los degradados sutiles. Admite color HDR, transparencia y animación, por lo que es uno de los formatos técnicamente más avanzados. Como contrapartida, la codificación suele tardar más y las versiones antiguas de Safari pueden no ser compatibles.
Ideal para: imágenes principales, páginas con muchas fotografías y cualquier caso en el que reducir el peso de las imágenes ayude a acelerar la carga.
WebP: el equilibrio práctico
Desarrollado por Google, WebP ofrece un buen equilibrio entre compresión y compatibilidad. Es compatible con prácticamente todos los navegadores modernos, se codifica rápidamente y admite tanto transparencia como animación. Por eso, es una opción práctica para muchos sitios web.
Ideal para: uso general en la web cuando importan tanto la compatibilidad amplia como el tamaño de archivo.
JPG: el formato universal de siempre
Durante décadas, JPG ha sido el formato fotográfico más usado en la web. Es compatible con prácticamente cualquier dispositivo, se codifica rápido y suele ofrecer una calidad razonable con un tamaño moderado. Sus principales limitaciones son que no admite transparencia y que cada nueva compresión puede reducir un poco más la calidad.
Ideal para: máxima compatibilidad y sitios antiguos, especialmente cuando no se pueden usar formatos más recientes.
PNG: precisión sin pérdida
Gracias a su compresión sin pérdida, PNG es una buena opción para imágenes que necesitan bordes nítidos y colores precisos, como logotipos, iconos y capturas de pantalla con texto. También admite transparencia. La desventaja es el tamaño: los archivos PNG suelen ser más pesados que los de los otros formatos de esta comparación.
Ideal para: logotipos, iconos, diagramas y capturas de pantalla en las que la nitidez importa más que el peso del archivo.
Guía rápida para elegir
- ¿Quieres un archivo lo más pequeño posible sin renunciar a la calidad? Prueba AVIF.
- ¿Buscas buena compresión y amplia compatibilidad? Elige WebP.
- ¿Necesitas un formato compatible prácticamente en todas partes? Usa JPG como alternativa.
- ¿Trabajas con logotipos, iconos o gráficos con mucho texto? Elige PNG.
En la práctica, muchos sitios ofrecen varios formatos: AVIF como primera opción, WebP como alternativa y JPG como último recurso. El elemento HTML <picture> permite que el navegador seleccione automáticamente el formato compatible más adecuado.
Prueba práctica
Para este artículo, hicimos una prueba propia en lugar de limitarnos a citar cifras generales. Redimensionamos en GIMP una fotografía horizontal de 1920 × 1080 píxeles, originalmente de 485 KB en JPG, a 1024 × 576 píxeles. Después, la exportamos al 60 % de calidad en cada uno de los tres formatos comprimidos:
| Formato | Tamaño del archivo |
|---|---|
| AVIF | 102 KB |
| WebP | 107 KB |
| JPG | 116 KB |
Con el mismo ajuste nominal de calidad, los tamaños quedaron mucho más parecidos de lo que sugieren las cifras generales anteriores. Aunque AVIF produjo el archivo más pequeño, al examinarlo de cerca se apreciaba algo menos de nitidez. Esto probablemente se deba a dos factores: el control de «calidad al 60 %» no significa lo mismo para todos los códecs, y esta fotografía —con degradados suaves en el cielo, el agua y la vegetación— tiene pocos detalles finos y contrastados, donde AVIF suele destacar más. En una imagen con más detalles, como texto denso o líneas arquitectónicas nítidas, la ventaja de AVIF probablemente sería mayor.
En resumen: las tablas ofrecen una orientación general útil, pero conviene probar los formatos con tus propias imágenes. Los resultados varían según el contenido, los ajustes de codificación y la herramienta de exportación.
