Comparativa de formatos de imagen (PNG/JPG/WebP/AVIF/GIF)
Una comparativa de los formatos de imagen habituales en desarrollo web y de apps, para elegir el adecuado en cada caso.
Comparativa de formatos de un vistazo
La tabla siguiente compara los formatos principales en compresión, transparencia alfa, soporte de animación y cobertura de navegadores.
| Formato | Compresión | Transparencia | Animación | Profundidad de color | Soporte de navegador |
|---|---|---|---|---|---|
| PNG | Sin pérdida | Sí (alfa de 8 bits) | APNG (limitado) | Hasta 48 bits + alfa de 16 bits | Todos los navegadores |
| JPEG | Con pérdida | No | No | 24 bits (unos 16,7 millones de colores) | Todos los navegadores |
| WebP | Sin pérdida o con pérdida | Sí (alfa de 8 bits) | Sí | 24 bits + alfa de 8 bits | Todos los navegadores principales (no IE) |
| AVIF | Sin pérdida o con pérdida | Sí (alfa de 8/10/12 bits) | Sí (AVIF Sequence) | Hasta 12 bits HDR | Chrome/Firefox/Safari 16.4+ |
| GIF | Sin pérdida (LZW) | 1 bit (solo transparente u opaco) | Sí | 8 bits (256 colores) | Todos los navegadores |
Comparativa de tamaño de archivo
Tamaños orientativos de una misma imagen guardada en cada formato. Las cifras reales varían mucho según el contenido y los ajustes de compresión.
| Formato | Foto (tamaño relativo) | Ilustración (tamaño relativo) | Captura de pantalla (tamaño relativo) |
|---|---|---|---|
| PNG | Grande | Medio | Medio |
| JPEG (calidad 80) | Pequeño | De medio a grande | Medio |
| WebP (calidad 80) | Muy pequeño | Pequeño | Pequeño |
| AVIF (calidad 60) | Muy pequeño | Muy pequeño | Muy pequeño |
| GIF | No recomendado | Grande (limitado a 256 colores) | Grande |
Cada formato en detalle y cuándo usarlo
PNG（Portable Network Graphics）
Es sin pérdida, así que no degrada nada, y admite transparencia alfa. Resulta ideal para logotipos, iconos, capturas y cualquier imagen con texto, donde importan los bordes nítidos. Con contenido fotográfico tiende a generar archivos grandes.
- Ideal para: logotipos, iconos, capturas e imágenes que necesiten transparencia
- Evítalo para: fotografías — los archivos se vuelven innecesariamente grandes
JPEG（Joint Photographic Experts Group）
La compresión con pérdida trata bien las fotografías y los degradados. Un parámetro de calidad de 0 a 100 equilibra tamaño y fidelidad. No admite transparencia ni animación, pero sí conserva metadatos Exif como la fecha de captura y el modelo de cámara.
- Ideal para: fotografías, imágenes naturales, degradados
- Evítalo para: imágenes con texto y logotipos, donde se notan los artefactos, y todo lo que necesite transparencia
WebP
Desarrollado por Google, WebP reduce el tamaño en torno a un 25-34% frente a JPEG y un 26% frente a PNG. Ofrece modos con y sin pérdida y admite transparencia alfa y animación. Lo soportan todos los navegadores principales salvo IE.
- Ideal para: sitios web en general — sirve tanto para fotos como para ilustraciones
- Evítalo para: cuando haga falta compatibilidad con IE y para impresión
AVIF（AV1 Image File Format）
Un formato de nueva generación basado en el códec de vídeo AV1. Comprime más que WebP y admite HDR. La codificación es comparativamente lenta, pero ofrece el mejor equilibrio entre calidad y tamaño.
- Ideal para: sitios donde el tamaño es crítico e imágenes HDR
- Evítalo para: compatibilidad con navegadores antiguos y codificación en tiempo real
GIF（Graphics Interchange Format）
Limitado a 256 colores, pero lleva décadas admitiendo animación. El vídeo y las animaciones WebP/AVIF lo van sustituyendo, aunque su compatibilidad casi universal lo mantiene vivo para bucles cortos en redes sociales y mensajería.
- Ideal para: animaciones cortas y sistemas heredados
- Evítalo para: fotografías y todo lo que exija alta fidelidad — 256 colores no bastan
Buenas prácticas en la web
En un sitio moderno, lo recomendable es ofrecer varios formatos con alternativas mediante el elemento <picture>.
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="説明文">
</picture>Con ese marcado, los navegadores que entienden AVIF reciben AVIF, los que entienden WebP reciben WebP y el resto recurre a JPEG. DevLab ofrece imágenes de prueba en cada formato para comprobar conversiones y comparar tamaños.