Introducción
Tienes un PNG de alta resolución, tal vez un logo con transparencia o una ilustración, y pesa 5 o 10 MB, lo que es absurdo para una web. El JPG no te sirve porque no admite transparencia y pierde nitidez en los bordes. El WebP es el formato moderno que necesitas: comprime más que el JPG, admite transparencia como el PNG y está soportado por todos los navegadores actuales. En esta guía te explicamos cómo convertir PNG a WebP para web, qué ajustes elegir y cómo configurar fallbacks para navegadores antiguos.
Por qué ocurre esto
El PNG de alta resolución pesa mucho porque es sin pérdida y almacena cada píxel. Para logos e ilustraciones con transparencia es el formato correcto para trabajar, pero no para servir en web: un PNG de 5 MB tarda en cargar en móvil y consume datos móviles del usuario. El JPG no sirve aquí porque no admite transparencia y sus artefactos se notan en bordes afilados. El WebP, desarrollado por Google, es el puente ideal: usa compresión moderna que reduce el tamaño entre un 25 y un 35 por ciento respecto al JPG con calidad similar, admite transparencia como el PNG y está soportado por Chrome, Firefox, Edge, Opera y Safari moderno. Para web, el WebP es hoy el formato por defecto para imágenes con o sin transparencia. La única excepción son navegadores muy antiguos, para los que conviene servir un fallback PNG o JPG.
3 soluciones
Solución 1: Convertir PNG a WebP online. El conversor de imágenes de piczen admite PNG y WebP y permite procesar varios archivos a la vez. Configura la calidad WebP en 85 para imágenes con transparencia, lo que da un equilibrio excelente entre tamaño y nitidez. Es la opción más rápida para optimizar una carpeta de PNGs para web sin instalar nada.
Solución 2: Usar un CDN que autoconvierta. Servicios como Cloudflare, imgix o Cloudinary convierten tus PNG originales a WebP al vuelo según el navegador del visitante. Es la opción ideal para webs con muchas imágenes porque no tienes que gestionar versiones manualmente: el CDN sirve WebP a navegadores modernos y JPG o PNG a los antiguos.
Solución 3: Convertir en lote con cwebp. La herramienta de línea de comandos cwebp, de Google, es la más controlable para conversión WebP. Permite ajustar calidad, compresión, método de codificación y si se conserva transparencia. Es ideal para flujos de publicación automatizados, aunque requiere línea de comandos.
Guía paso a paso
Para optimizar una carpeta de PNGs para web, abre el conversor de imágenes en tu navegador. Arrastra tus PNGs a la página. Configura el formato de salida en WebP y la calidad en 85 para imágenes con transparencia o 90 para gráficos con bordes afilados. Si la herramienta permite elegir método de compresión, selecciona el nivel 6, que ofrece buen equilibrio entre tiempo y ahorro. Pulsa Convertir y espera. Para 20 PNGs de alta resolución el proceso suele tardar menos de un minuto. Descarga el zip, descomprímelo y comprueba visualmente que los WebP se ven bien comparándolos con los PNG originales. Si necesitas fallback para navegadores antiguos, también puedes generar una versión JPG de cada imagen. En tu HTML, usa el elemento picture con source en WebP y fallback en PNG o JPG: picture source srcset="imagen.webp" type="image/webp" img src="imagen.png" alt="...". Sube los archivos a tu servidor o CDN y prueba la carga en varios navegadores.
Ventajas y desventajas
Convertir PNG a WebP reduce drásticamente el tamaño de las imágenes web, a menudo entre un 60 y un 80 por ciento respecto al PNG original, lo que mejora tiempos de carga y posicionamiento. El WebP además admite transparencia como el PNG, lo que lo hace ideal para logos y gráficos web. La contrapartida es la compatibilidad con navegadores muy antiguos: Internet Explorer y versiones viejas de Android no lo soportan, así que conviene servir un fallback PNG o JPG mediante el elemento picture. Otra desventaja menor es que algunos editores de imagen aún no abren WebP nativamente, así que conserva el PNG original para editar y publica el WebP solo para web. Para webs modernas con tráfico mayoritariamente móvil, el WebP es hoy el formato por defecto y el ahorro en ancho de banda compensa con creces el pequeño esfuerzo de configurar fallbacks.