PNG vs WebP vs AVIF: Cómo elegir formatos de imagen y métodos de conversión
La selección del formato de imagen es uno de los factores más críticos que afectan la velocidad de carga del sitio web. A partir de 2026, las opciones principales son <strong>PNG / JPEG / WebP / AVIF</strong>. Este artículo organiza las características, casos de uso y compatibilidad del navegador para cada formato y explica cómo elegir el formato óptimo.
Tabla de comparación de formatos
| Formato | Método de compresión | Transparencia | Animación | Calidad de imagen | Tamaño de archivo | Compatibilidad con navegadores |
|---|---|---|---|---|---|---|
| PNG | Sin pérdida (lossless) | ✅ | APNG | Máximo (sin degradación) | Grande | Todos los navegadores |
| JPEG | Con pérdida (Lossy) | ❌ | ❌ | Ajuste de calidad disponible | Pequeño a Mediano | Todos los navegadores |
| WebP | Sin pérdida / Con pérdida | ✅ | ✅ | Mejor que JPEG | JPEG 25-35% más pequeño | 95%+ |
| AVIF | Con pérdida / Sin pérdida | ✅ | ✅ | Mejor que WebP | 20% más pequeño que WebP | 92%+ |
Qué formato deberías elegir
Cuándo elegir PNG
- <strong>Logotipos, iconos, capturas de pantalla</strong> y otros casos donde no se permite degradación de calidad
- Imágenes que contienen texto (se vuelve difícil de leer si se desenfoca por compresión)
- Cuando se requiere transparencia y compatibilidad con IE11 (prácticamente innecesario)
Cuándo Elegir JPEG
- Cuando se necesita <strong>máxima compatibilidad</strong> para fotos e imágenes con muchos gradientes
- Para adjuntos de correo electrónico o entrega a dispositivos heredados
Cuándo elegir WebP (recomendado)
- <strong>La mayoría de las imágenes del sitio web</strong> — 25–35% más pequeñas en comparación con JPEG
- Transparencia + compresión conjuntas (alternativa a PNG)
- Animación (alternativa a GIF — mucho más pequeño)
- La tasa de compatibilidad con navegadores es del 95%+, por lo que prácticamente no hay problemas
Cuándo elegir AVIF (Vanguardia)
- <strong>Cuando se busca el tamaño mínimo de archivo</strong> — 20% más pequeño que WebP
- Cuando desea mantener fotos de alta calidad lo más ligeras posible
- Compatibilidad con navegadores: 92%+ (Safari 16+, Chrome 85+, Firefox 93+)
Patrón de implementación: Cambio con el elemento <code>picture</code>
El enfoque más sólido es especificar varios formatos usando el elemento <code><picture></code>. El navegador selecciona la primera fuente que admite.
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" loading="lazy">
</picture>Con este método, los navegadores compatibles con AVIF cargarán AVIF, los compatibles solo con WebP cargarán WebP, y los incompatibles cargarán JPEG.
Convertir con una herramienta
<a href="/ja/tools/image-convert/">La herramienta de conversión de formatos de imagen de DevLab</a> te permite convertir entre PNG ⇄ WebP ⇄ JPEG ⇄ AVIF usando solo tu navegador. Usa el deslizador de calidad para equilibrar el tamaño de archivo y la calidad de imagen mientras conviertes. Sin necesidad de cargar en servidor, tu privacidad está protegida.
Relacionado: Use el <a href="/ja/tools/exif/">visor EXIF</a> para verificar metadatos de fotos y eliminar información de ubicación, o <a href="/ja/tools/image-base64/">conversión de imagen a Base64</a> para generar URLs de datos en línea.
Resumen
- Si está indeciso, elija <strong>WebP</strong> — mejor equilibrio
- Para tamaños aún más pequeños, usa <strong>AVIF</strong> (con respaldo mediante picture)
- Si se requiere sin pérdidas, use <strong>PNG</strong>
- Use <strong>JPEG</strong> si se requiere máxima compatibilidad