PNG frente a WebP: ¿qué formato para la web moderna?
PNG es un formato sin pérdida maduro y compatible en todas partes; WebP es un formato más nuevo que ofrece modos sin pérdida y con pérdida, además de alfa y animación. WebP suele entregar imágenes web más pequeñas, pero PNG sigue siendo el maestro más seguro y el respaldo universal. La mejor elección depende del trabajo.
No hay un único ganador. Recurre a WebP para enviar imágenes más pequeñas a navegadores modernos, conserva un PNG sin pérdida (u otro maestro sin pérdida) como fuente editable y ofrece un respaldo cuando importe la compatibilidad universal. Usa la tabla de escenarios de abajo para decidir.
Sin pérdida y con pérdida: PNG tiene un modo, WebP tiene dos
PNG siempre es sin pérdida. Comprime con filtrado seguido de DEFLATE y restaura las muestras originales de forma exacta, así que nunca introduce artefactos de compresión sin importar cómo se produzca el archivo.
WebP admite dos modos. El WebP con pérdida se basa en la codificación intracuadro de VP8 y cambia exactitud por archivos más pequeños, muy parecido a JPEG. El WebP sin pérdida usa una técnica distinta que preserva los píxeles originales, en un espíritu similar a PNG.
Esto significa que WebP puede reemplazar a PNG para gráficos en su modo sin pérdida y reemplazar a JPEG para fotos en su modo con pérdida. Elegir el modo de WebP de forma deliberada importa: usa sin pérdida para gráficos planos que necesites exactos al píxel y con pérdida para contenido fotográfico donde gana el tamaño pequeño.
Transparencia alfa en ambos formatos
PNG admite un canal alfa completo, lo que permite que cada píxel lleve su propia opacidad para bordes limpios sobre cualquier fondo.
WebP también admite transparencia alfa, y puede combinar el alfa con compresión de color con pérdida, una opción que PNG no tiene. Esa combinación puede producir una imagen transparente más pequeña que un PNG equivalente conservando bordes suaves, útil para superposiciones e iconos web.
Salvedades de la animación
WebP admite animación, así que un único archivo WebP puede contener una secuencia animada corta con alfa, una alternativa al GIF animado o al APNG.
Hay salvedades. La herramienta de imagen de PixMovo convierte entre JPEG, PNG y WebP fijos y no produce animación, por lo que el WebP animado es una consideración de entrega y no algo que exportarías aquí. Cuando uses WebP animado, verifica la reproducción en tus navegadores objetivo y conserva una fuente que puedas volver a renderizar, porque no todos los visores o editores tratan el WebP animado igual que una imagen fija.
Entrega en el navegador y respaldo
Las versiones actuales de todos los navegadores principales admiten WebP, lo que hoy lo convierte en un buen valor predeterminado para la entrega web. Aun así, clientes muy antiguos, algún software de correo y ciertas herramientas de terceros pueden no decodificar WebP.
El patrón seguro es la mejora progresiva: sirve WebP a los clientes que lo aceptan y recurre a PNG o JPEG para los que no. El elemento picture de HTML deja que el navegador elija el primer tipo de fuente que admite, de modo que los visitantes modernos reciben el WebP más pequeño mientras los antiguos siguen viendo una imagen compatible.
Conserva un maestro fuente sin pérdida
Entregues lo que entregues, conserva una fuente sin pérdida. Si tu maestro es un PNG sin pérdida (o un WebP sin pérdida), podrás reexportar a cualquier formato más adelante sin acumular pérdidas de compresión.
Exportar un WebP con pérdida a partir de un JPEG con pérdida apila dos rondas de compresión con pérdida y degrada el resultado. Genera siempre los archivos de entrega a partir del maestro sin pérdida de mayor calidad que tengas y archiva ese maestro en lugar de la copia publicada.
Comparación de atributos
| Atributo | PNG | WebP |
|---|---|---|
| Modos de compresión | Solo sin pérdida | Sin pérdida y con pérdida |
| Transparencia alfa | Sí | Sí, incluso con color con pérdida |
| Animación | No (imagen fija) | Sí |
| Soporte de navegadores | Universal | Todos los navegadores principales actuales |
| Bueno como maestro editable | Sí | Sí en modo sin pérdida |
| Respaldo universal | Sí | Necesita respaldo para clientes antiguos |
Cuándo suele ganar cada formato
- Elige WebP cuando tu prioridad sean imágenes más pequeñas para navegadores modernos y puedas proporcionar un respaldo.
- Elige PNG cuando necesites un archivo universalmente compatible, un maestro sin pérdida editable o una fuente de respaldo fiable.
- Para gráficos planos que deban permanecer exactos al píxel, usa el modo sin pérdida en cualquiera de los dos formatos.
- Para fotografías en la web, el WebP con pérdida suele superar a PNG en tamaño con un aspecto comparable.
Ejemplo práctico: entregar un gráfico web transparente
- Parte de un maestro sin pérdida
Conserva el gráfico como PNG sin pérdida para tener una fuente exacta y editable con alfa.
- Exporta un WebP para la entrega
Convierte el PNG a WebP en PixMovo. Usa WebP sin pérdida para gráficos planos o WebP con pérdida y alfa para imágenes más suaves y reducir el tamaño.
- Proporciona un respaldo
Referencia el PNG como respaldo (por ejemplo, mediante un elemento picture) para que los clientes que no puedan decodificar WebP sigan mostrando la imagen.
Tabla de decisión por escenario
| Escenario | Recomendado | Por qué |
|---|---|---|
| Fotos (photos) | WebP con pérdida | Más pequeño que PNG en la web con aspecto comparable; conserva un maestro sin pérdida |
| Logotipos (logos) | WebP sin pérdida o PNG | Ambos mantienen bordes nítidos y alfa; PNG es el maestro más universal |
| Capturas de pantalla (screenshots) | PNG o WebP sin pérdida | Los píxeles exactos mantienen nítidos los bordes de interfaz y el texto; el WebP sin pérdida puede ser más pequeño |
| Entrega web (web delivery) | WebP con respaldo | Envía imágenes más pequeñas a navegadores modernos y recurre a PNG o JPEG |
| Impresión (printing) | PNG o maestro sin pérdida | Confirma el formato de la imprenta; evita artefactos con pérdida en la pieza final |
Preguntas frecuentes
- ¿Es WebP mejor que PNG?
- No de forma universal. WebP puede producir imágenes web más pequeñas y añade modos con pérdida y de animación, pero PNG es un maestro y respaldo más universal. La mejor elección depende del trabajo.
- ¿WebP admite transparencia como PNG?
- Sí. WebP admite un canal alfa e incluso puede combinar transparencia con compresión de color con pérdida, algo que PNG no puede hacer.
- ¿Todos los navegadores admiten WebP?
- Todos los navegadores principales actuales admiten WebP, pero algunos clientes muy antiguos, software de correo y herramientas de terceros pueden no hacerlo. Proporciona un respaldo PNG o JPEG para compatibilidad universal.
- ¿Debería convertir mis maestros PNG a WebP y borrar los PNG?
- Conserva un maestro sin pérdida. Entrega WebP para la web, pero archiva el PNG sin pérdida (o WebP sin pérdida) para reexportar más adelante sin acumular pérdidas de compresión.
- ¿Qué modo es el adecuado, WebP sin pérdida o con pérdida?
- Usa WebP sin pérdida para gráficos planos, logotipos y cualquier cosa que necesite píxeles exactos. Usa WebP con pérdida para fotografías donde un archivo más pequeño importa más que la exactitud.
- ¿Puede WebP contener una animación?
- Sí, WebP admite animación con alfa. La herramienta de imagen de PixMovo trabaja con imágenes fijas, así que trata el WebP animado como un formato de entrega y verifica la reproducción en tus navegadores objetivo.