PNG a WebP: Cómo convertir y reducir imágenes PNG

Última actualización: June 27, 2026

PNG es el formato adecuado para gráficos nítidos y transparencia, pero sus archivos son grandes, especialmente para cualquier cosa fotográfica. Convertir PNG a WebP mantiene la nitidez y el canal alfa mientras reduce drásticamente los bytes. La clave está en elegir correctamente entre WebP sin pérdidas (lossless) y con pérdidas (lossy), porque el modo correcto depende del contenido de la imagen. Esta guía cubre ambos, con tamaños medidos reales.

Respuesta rápida: ¿deberías convertir PNG a WebP?

Sí, para imágenes web: WebP mantiene la transparencia y la nitidez de PNG con una fracción del tamaño. Elige el modo según el contenido:

Para una imagen, usa Image Converter; para lotes, usa cwebp. La decisión de formato detrás de esto se encuentra en image formats explained.

¿Cuánto ahorra PNG a WebP?

Depende enteramente del modo WebP que elijas, porque PNG es sin pérdidas y la comparación no es comparable.

Dos conclusiones honestas de estos números. Primero, el WebP sin pérdidas de una fotografía sigue siendo grande (568 KB), porque la codificación sin pérdidas no puede eliminar el ruido en una foto. Si el contenido es una foto, debe ser WebP con pérdidas, no sin pérdidas. Segundo, WebP sin pérdidas brilla en gráficos planos: en capturas de pantalla y arte UI suele ser un 20–30% más pequeño que PNG con píxeles idénticos. Haz coincidir el modo con el contenido.

La misma fuente en los cuatro formatos muestra dónde se sitúa PNG en relación con las alternativas:

¿Qué imágenes deberían permanecer en PNG?

Algunas imágenes no deben convertirse en absoluto. Mantén PNG cuando la imagen sea un logo o icono que podría ser SVG en su lugar (el vector es más pequeño y nítido), o cuando te estás comunicando con un sistema que requiere PNG específicamente: algunas tuberías de impresión, algunos editores heredados y la mayoría de los intercambios de herramientas de diseño esperan PNG. Para un único icono diminuto (inferior a ~3 KB), la conversión no vale la complejidad del proceso; déjalo como PNG. La regla de decisión es la misma que en image formats explained: convierte PNG a WebP cuando los bytes importan y el destino es un navegador web, mantén PNG cuando la compatibilidad o una alternativa vectorial importa más.

Método 1: Conversor de navegador

Para una imagen, usa el Imagic AI Image Converter: sube el PNG, elige WebP, selecciona sin pérdidas para gráficos o calidad ~80 para fotos y descarga. Squoosh es bueno para comparar sin pérdidas vs con pérdidas lado a lado antes de comprometerte.

Método 2: Línea de comandos cwebp

## WebP sin pérdidas (mejor para gráficos, capturas de pantalla, texto nítido, UI transparente)
cwebp -lossless input.png -o output.webp

## WebP con pérdidas (mejor si el PNG es realmente una foto)
cwebp -q 80 input.png -o output.webp

## Una carpeta de PNGs, sin pérdidas, en paralelo
mkdir -p out
ls *.png | xargs -P 4 -I {} cwebp -lossless {} -o out/{}.webp

-lossless es el indicador clave: sin él, cwebp por defecto usa con pérdidas, lo que difumina los bordes finos. Siempre pasa -lossless para gráficos y capturas de pantalla.

Método 3: Python (Pillow)

from PIL import Image
from pathlib import Path

def png_to_webp(src: Path, dest: Path, lossless: bool = True, quality: int = 80):
    with Image.open(src) as img:
        img.save(dest, "WebP", lossless=lossless, quality=0 if lossless else quality, method=6)

for f in Path("assets").glob("*.png"):
    # sin pérdidas para gráficos nítidos; cambiar a lossless=False para PNG fotográficos
    png_to_webp(f, Path("out") / f"{f.stem}.webp", lossless=True)

Cuando lossless=True, el valor de quality se ignora; cuando es con pérdidas, configúralo en ~80 para fotos.

¿WebP mantiene la transparencia de PNG?

Sí. WebP admite un canal alfa completo tanto en modo con pérdidas como sin pérdidas, por lo que un PNG transparente se convierte en un WebP transparente sin trabajo adicional. Esta es la razón principal para convertir activos UI y recortes de productos: mantienes la transparencia y pierdes la mayoría de los bytes. Para detalles sobre la transparencia, consulta how to make transparent images.

¿Cómo servir WebP con un fallback a PNG?

El soporte de WebP es de ~98%, pero conserva un fallback a PNG para clientes antiguos y correo electrónico:

<picture>
  <source srcset="/img/icon.webp" type="image/webp">
  <img src="/img/icon.png" alt="Description" width="200" height="200" loading="lazy">
</picture>

El navegador elige el primer tipo que admite; el <img de PNG es el fallback final. Para gráficos nítidos, reserva width/height para que el diseño no cambie. Consulta la WebP converter guide para el patrón completo de fallback, incluyendo AVIF.

¿Cuándo es incorrecto convertir PNG a WebP?

• Correo electrónico. Muchos clientes de correo ignoran WebP. Mantén PNG (o JPEG) para correos electrónicos.
• Cuando necesitas un JPEG en su lugar. Si el PNG es una foto para un marketplace que solo acepta JPEG, conviértelo a JPEG, no a WebP. Consulta WebP to JPG.
• Navegadores incrustados antiguos sin soporte WebP — aunque el fallback <picture> cubre esto.
• Cuando el PNG ya es diminuto. Un icono de 2 KB gana poco con la conversión; el costo del proceso no vale la pena.

Errores comunes

• Usar WebP con pérdidas para gráficos nítidos. Con pérdidas difumina los bordes finos y el texto. Usa -lossless para capturas de pantalla y UI.
• Usar WebP sin pérdidas para fotos. Sigue siendo grande porque sin pérdidas no puede eliminar el ruido fotográfico. Usa con pérdidas.
• Omitir el fallback a PNG. Los navegadores antiguos y el correo electrónico necesitan el <img de PNG.
• Olvidar redimensionar primero. Un WebP de 4000px sigue siendo una descarga de 4000px, sin importar el formato.
• Tratar PNG como un formato fotográfico. Si la imagen es una foto, probablemente fue JPEG/RAW desde el principio; conviértela desde la fuente correcta.

Preguntas frecuentes

¿Cuánto ahorra convertir PNG a WebP?

Para contenido fotográfico, 25 a 35 por ciento más pequeño con calidad igual; para gráficos planos con transparencia, a menudo más. WebP admite modos tanto con pérdidas como sin pérdidas más un canal alfa, por lo que cubre lo que hace PNG en un tamaño más pequeño.

¿Debería cada PNG convertirse a WebP?

Para la entrega web, sí, con un fallback a PNG para navegadores muy antiguos. Conserva el maestro PNG si puedes volver a editarlo, porque WebP con pérdidas es una generación de compresión. Sirve WebP a través de un elemento <picture> con fallback a PNG.

¿WebP soporta transparencia?

Sí: WebP admite un canal alfa completo, por lo que los PNG transparentes se convierten limpiamente. Esta es la razón principal para preferir WebP sobre JPEG para gráficos con transparencia. Consulta transparent images guide.

¿Cuál es la conversión de línea de comandos?

cwebp -q 80 input.png -o output.webp. El indicador -q establece la calidad (80 es el valor predeterminado web). Para sin pérdidas, usa -lossless. Lote con un bucle de shell o ImageMagick. Consulta WebP converter guide.

¿WebP soporta animación?

Sí: WebP admite imágenes animadas, más pequeñas que los GIFs animados equivalentes. Para bucles cortos, WebP animado es una alternativa moderna a GIF. Para animaciones más largas, el video (MP4) sigue siendo más pequeño y mejor.

¿Debería convertir PNG a WebP con pérdidas o sin pérdidas?

Con pérdidas para fotografías (mucho más pequeño, pérdida invisible en calidad 80); sin pérdidas para gráficos, texto y maestros donde cada píxel debe ser exacto. WebP admite ambos. Un error común es convertir un logo con pérdidas, lo que añade artefactos a los bordes nítidos: mantén los gráficos sin pérdidas, convierte las fotos con pérdidas.

¿Qué es el indicador de calidad cwebp?

El indicador -q establece la calidad con pérdidas en una escala de 0 a 100 (80 es el valor predeterminado web, pérdida invisible, aproximadamente una cuarta parte de los bytes de calidad 100). Usa -lossless en su lugar para gráficos donde cada píxel debe ser exacto. Una mayor calidad significa un archivo más grande con rendimientos visibles decrecientes; 80 es el punto óptimo práctico para la entrega web de fotografías.

¿Convertir PNG a WebP acelera mi sitio?

Sí, mediblemente: WebP es un 25 a 35 por ciento más pequeño que PNG para el mismo contenido, por lo que las páginas con muchos gráficos cargan más rápido y LCP mejora. El ahorro se acumula en una página con docenas de iconos o gráficos. Sirve WebP con un fallback a PNG para que los navegadores más antiguos sigan renderizando las imágenes, y obtienes la velocidad sin perder compatibilidad.

Créditos de imágenes

• Comparación PNG a WebP y gráfico de barras de tamaño — generado por el autor a partir de una fotografía estilo comercio electrónico (Pexels #16675632, foto de Mikael Blomkvist) para mostrar ahorros reales medidos de PNG a WebP.