Cómo convertir PNG a WebP sin perder transparencia

El PNG es el formato rey de los iconos, logotipos, capturas y cualquier imagen con fondo transparente, pero también es el que más peso arrastra sin necesidad: un logotipo de 800 px puede pesar 120 KB en PNG y menos de 20 KB en WebP con la misma apariencia. WebP admite transparencia (canal alfa) de forma nativa, así que puedes reducir el peso drásticamente sin renunciar a los bordes limpios sobre cualquier fondo.

Cuándo conviene convertir PNG a WebP

• Logotipos e iconos: casi siempre ganan un 70-80% de peso con transparencia intacta.
• Capturas de pantalla: el texto fino aguanta bien al 90% de calidad; por debajo puede difuminarse.
• Ilustraciones y gráficos: si tienen pocas zonas planas, compensa el modo sin pérdida.
• Fotografías guardadas en PNG: el error más común; si no hay transparencia, conviértelas desde el original en JPG (mira la guía de JPG a WebP).

Paso 1: comprueba la transparencia y el tamaño final

Antes de convertir, revisa que el PNG tenga realmente canal alfa: ábrelo en tu visor y coloca un fondo de color detrás. Si el fondo ya está dibujado (por ejemplo, blanco sólido), WebP conservará ese fondo y no habrás ganado nada en transparencia.

También ajusta las dimensiones finales. Un icono que se muestra a 64 px no debe cargarse a 1024 px: en el conversor puedes activar «Redimensionar» y fijar el ancho exacto manteniendo la proporción.

Paso 2: elige entre modo sin pérdida o con pérdida

WebP ofrece dos modos y elegir bien es la diferencia entre ahorrar un 20% o un 80%:

• Sin pérdida (lossless): píxel a píxel idéntico al original. Ideal para iconos, diagramas, texto embebido y capturas. El ahorro típico es del 30-50% frente al PNG.
• Con pérdida al 80%: para ilustraciones ricas en degradados y fotografías con transparencia. Ahorros del 60-80% con diferencia visual mínima.
• Con pérdida al 60% o menos: solo para miniaturas; en bordes afilados aparecerán halos.

Regla práctica: si la imagen contiene texto o líneas geométricas, prueba primero sin pérdida; si el resultado pesa demasiado, sube la calidad con pérdida al 90% y compara en la vista previa.

Paso 3: convierte y verifica el resultado

Arrastra los PNG al área de carga del conversor. Cada tarjeta muestra el peso original, el peso final y el porcentaje de ahorro; para iconos es habitual superar el 70%.

Haz clic en la miniatura para abrir la comparación lado a lado y revisa especialmente los bordes de la transparencia contra un fondo oscuro y otro claro: es donde se ven los halos de una mala compresión. Si los bordes están limpios, el archivo está listo.

Cómo insertar el WebP con respaldo PNG

Para navegadores antiguos o crawlers con poca capacidad, la etiqueta <picture> te da compatibilidad total:

<picture>
  <source srcset="icono.webp" type="image/webp">
  <img src="icono.png" alt="Icono de ejemplo"
       width="64" height="64" loading="lazy">
</picture>

Recuerda declarar width y height para evitar saltos de layout que empeoran el CLS, y no olvides un alt descriptivo (lo explicamos en nuestra guía de texto alt para SEO).

Errores frecuentes al convertir PNG a WebP

• Convertir dos veces. Si guardas WebP y lo conviertes otra vez, pierdes calidad sin ganar nada: parte siempre del PNG original.
• Usar pérdida alta en texto. En capturas con letras pequeñas, por debajo del 85% el texto se vuelve borroso.
• Ignorar el fondo. Si el «PNG transparente» ya tiene fondo pintado, la transparencia no existía: revisa antes de convertir.
• Dejar dimensiones gigantes. Un icono de 1024 px para mostrar a 64 px multiplica el peso sin motivo.

Si además quieres entender en qué situaciones WebP sigue siendo mejor que el formato más moderno, consulta la comparativa WebP vs AVIF y la diferencia entre PNG y JPG.