PNG vs WebP: el choque de generaciones
Durante casi 20 años, la regla de oro del diseño web fue sencilla: el JPG para las fotos, el PNG para las imágenes que necesitan un fondo transparente (canal alfa). Pero el formato WebP, impulsado por Google desde 2010 y adoptado masivamente a partir de 2020, ha cambiado las reglas del juego.
¿Debemos hoy desterrar por completo el PNG de nuestros sitios web? La respuesta es matizada, pero el veredicto se inclina con mucha claridad.
El problema del PNG: un peso pesado estructural
El PNG (Portable Network Graphics) utiliza una compresión sin pérdida (lossless). Es perfecto para preservar la nitidez absoluta de los textos, los trazos vectoriales y las zonas de color plano, pero produce archivos extremadamente pesados.
Algunos órdenes de magnitud observados en producción:
- un banner ilustrado de 1920×600 con degradados en PNG: 800 KB a 1,4 MB;
- un logo complejo con sombras: 180 a 350 KB;
- una captura de pantalla de interfaz en 1440p: 2,5 a 4 MB.
En una red 4G móvil (mediana ~12 Mbps), estos pesos representan 0,5 a 2,5 segundos de carga por imagen. Multiplica por 15 imágenes en una página de producto y tu LCP se dispara.
La ventaja aplastante del WebP
El WebP es la navaja suiza definitiva:
- gestiona la transparencia (como el PNG);
- puede usar una compresión con pérdida (con pérdidas invisibles a simple vista, como el JPG) o sin pérdida (a tu elección);
- admite la animación (como alternativa a los pesados GIF);
- a calidad visual equivalente, un archivo WebP es de media un 26 % más ligero que un PNG, y la diferencia puede llegar al 80 % en ilustraciones con degradados complejos.
Comparativa detallada: 1 imagen, 3 formatos
Imagen de origen: ilustración vectorial exportada a 1200×800 píxeles, con transparencia y degradados.
| Formato | Peso | Compresión | Transparencia | Compatibilidad |
|---|---|---|---|---|
| PNG-24 | 612 KB | Sin pérdida | Sí (alfa 8 bits) | 100 % |
| WebP lossless | 312 KB | Sin pérdida | Sí (alfa 8 bits) | 96 % |
| WebP lossy 85 | 88 KB | Con pérdida | Sí (alfa 8 bits) | 96 % |
| AVIF 80 | 54 KB | Con pérdida | Sí (alfa 10 bits) | 92 % |
En este ejemplo, pasar de PNG a WebP lossy permite ahorrar 524 KB, es decir un 85 %, sin diferencia visual perceptible.
Compatibilidad con navegadores: el fin del debate
Hoy en día, el WebP es compatible con el 96 % de los navegadores del mundo (fuente: caniuse.com, mayo de 2026). La excusa de la incompatibilidad ya no es válida:
- Chrome ≥ 32 (2014)
- Firefox ≥ 65 (2019)
- Safari ≥ 14 (macOS Big Sur, iOS 14 — septiembre de 2020)
- Edge ≥ 18 (2018)
El único caso realmente bloqueante sigue siendo Internet Explorer, cuya cuota de mercado mundial cayó por debajo del 0,3 % y que Microsoft retiró oficialmente en junio de 2022.
El veredicto: ¿cuándo usar qué?
- Conserva el PNG únicamente para:
- elementos gráficos muy pequeños (iconos simples en pixel art, favicons), donde el peso ya es del orden de unos pocos kilobytes;
- los archivos de origen entregados a una imprenta (que suele exigir PNG, TIFF o PSD);
-
las exportaciones de software de diseño (Figma, Sketch) antes de la publicación web.
-
Pásate al WebP para todo lo demás:
- logos complejos con sombras o recortes;
- ilustraciones de blog;
- banners de marketing;
- fotos de producto (como alternativa al JPG, el WebP es ~30 % más ligero a igual calidad);
- capturas de pantalla de interfaz.
¿Y qué pasa con el AVIF?
Si buscas la optimización máxima, el AVIF (~50 % más ligero que
el WebP en modo lossy) es el futuro. Pero su compatibilidad aún se
queda en el 92 % y su codificación es bastante más lenta. La mejor
práctica en 2026: servir el AVIF con un fallback a WebP mediante la
etiqueta <picture>:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="…" loading="lazy">
</picture>
Limpia tus assets sin fugas de datos
Si gestionas el sitio web de un cliente, subir sus assets gráficos (a veces bajo NDA, a veces como adelanto del lanzamiento de un producto) a un conversor en línea de terceros es un fallo de seguridad y un riesgo para el RGPD.
Convierte tus PNG a WebP con un clic con MediaBay. El código se ejecuta directamente en tu navegador: el secreto industrial de tus clientes permanece en tu puesto de trabajo. Ningún archivo toca un servidor de terceros, ninguna fuga es posible.
Escrito por Nikola Markovic · publicado el 17 de mayo de 2026.