El peso oculto de los PNG en una web
Los PNG son estupendos para diseñar, pero pésimos para servir: al guardar cada píxel sin descartar nada, un logotipo, una ilustración o una captura pueden ocupar cientos de KB que el visitante tiene que descargar en cada visita. Si tu página tarda en pintar, hay muchas papeletas de que buena parte de la culpa sea de las imágenes. Pasarlas a WebP es la optimización con mejor relación esfuerzo-resultado: no tocas el diseño, no cambias el contenido y la página adelgaza de golpe.
WebP: un formato pensado para servir páginas
Google publicó WebP en 2010 con un único objetivo: que la web cargase más rápido. Por eso reúne en un solo formato lo que antes exigía elegir: tiene un modo sin pérdida (como el PNG), un modo con pérdida (como el JPG), conserva la transparencia en ambos e incluso admite animación. El PNG, que existe desde 1996, solo sabe hacer una de esas cosas —guardar la imagen exacta con canal alfa—, y la paga con archivos mucho más voluminosos.
El ahorro, en cifras
Según las mediciones del propio equipo de Google, un WebP sin pérdida ocupa de media en torno a un 26 % menos que el PNG equivalente, con la imagen píxel a píxel idéntica.
Y ese es el escenario conservador. Si la imagen es una foto o una ilustración con degradados y aceptas el modo con pérdida a calidad alta, el archivo puede quedarse en una fracción del original sin que nadie aprecie la diferencia a simple vista. La herramienta te muestra el tamaño resultante de cada archivo, así que puedes comprobar el ahorro antes de descargar nada.
Y las Core Web Vitals lo agradecen
Google mide la experiencia de carga con métricas como el LCP (cuánto tarda en aparecer el elemento principal, que casi siempre es una imagen). Servir WebP en lugar de PNG reduce los bytes transferidos, adelanta ese pintado y mejora la puntuación en PageSpeed y Lighthouse. De hecho, el aviso «publica imágenes en formatos de última generación» de esos informes se refiere exactamente a esto. Menos peso también significa menos datos consumidos por tus visitantes móviles y menos ancho de banda facturado en tu alojamiento.
Lista rápida antes de sustituir tus imágenes
- Guarda los PNG originales fuera de la web: son tu copia maestra para futuras ediciones.
- Convierte y compara: revisa los gráficos con texto pequeño al 100 % de zoom antes de reemplazarlos.
- Actualiza las rutas: sustituye la extensión en tu HTML, CSS o gestor de contenidos y borra los PNG huérfanos del servidor.
- Vuelve a pasar Lighthouse o PageSpeed después del cambio para ver la mejora con números.
¿Cuándo mantener el PNG? Si el archivo va destinado a imprenta, a un programa de escritorio antiguo o a alguien que no sabes qué software usa: ahí la veteranía del PNG sigue siendo su baza. Para todo lo que se vea en un navegador, WebP gana.
Siguientes pasos
Si tus fotos de partida son JPG, conviértelas directamente con JPG a WebP; el viaje contrario lo tienes en WebP a PNG. Antes de convertir, a menudo compensa redimensionar la imagen a su tamaño real de visualización, y para retoques de peso genéricos está comprimir imagen.