Imágenes con transparencia sin el peso del PNG
Durante años, PNG fue la única opción segura para cualquier imagen web con transparencia: fotos de producto recortadas, logotipos sobre cabeceras de color, ilustraciones con sombras suaves. JPG no puede guardar transparencia en absoluto, así que los diseñadores asumían los archivos enormes de PNG como precio a pagar. Una foto de producto recortada de 1500×1500 px pesa a menudo entre 1,5 y 3 MB en PNG.
WebP elimina ese dilema. Admite un canal alfa completo de 8 bits tanto en su modo sin pérdida como en el modo con pérdida, así que la parte fotográfica de una imagen se puede comprimir como un JPG mientras la transparencia se mantiene suave. Esa misma foto de producto recortada suele quedarse en 150 a 400 KB y, como todos los navegadores actuales muestran WebP, puede sustituir directamente a PNG en la mayoría de webs.
Qué PNG salen más beneficiados
El ahorro depende de lo que hay dentro del PNG, no solo del tamaño del archivo.
- El contenido fotográfico con transparencia es el que más gana: recortes de producto, retratos sin fondo, ilustraciones con texturas. Son habituales ahorros del 70 al 90 por ciento.
- Las capturas de pantalla y maquetas de interfaz con degradados, fotos o sombras suelen reducirse a la mitad o más.
- Los iconos planos y los logotipos sencillos con unos pocos colores sólidos ganan poco. PNG ya los comprime muy bien, y algún icono pequeño puede incluso salir algo más grande. Para esos casos, mantener PNG o pasarlo por comprimir PNG suele ser mejor opción.
- Los PNG ya optimizados con reducción de paleta ahorran menos que las exportaciones recién salidas de una herramienta de diseño.
La lista de archivos muestra el tamaño original y el nuevo de cada imagen, así que es fácil detectar las que no merece la pena convertir.
Cómo se hace la conversión
El navegador decodifica cada PNG, lo dibuja en un canvas a su tamaño original en píxeles y lo codifica con su codificador WebP integrado, en un worker en segundo plano cuando el navegador lo admite. La imagen nunca sale de tu dispositivo.
El control de «Calidad», del 10 % al 100 % y con un 90 % por defecto, regula la compresión con pérdida de los datos de color. La máscara de transparencia se comprime aparte de los colores y, con los codificadores habituales de los navegadores, el control no la degrada de la misma forma, así que los bordes de los recortes siguen limpios incluso al 75 %.
Hay un detalle técnico que importa en algunos flujos de trabajo: el canvas trabaja con alfa premultiplicado, así que los valores de color de los píxeles totalmente transparentes se descartan. En un navegador o en un documento es invisible. Solo importa si usas PNG como texturas de videojuegos o máscaras que dependen de datos de color ocultos bajo zonas transparentes; esos, mantenlos en PNG.
Valores de calidad para gráficos
El 90 % por defecto está más alto que para fotos porque el contenido típico de un PNG, como elementos de interfaz, texto y contornos nítidos, muestra artefactos de compresión antes que una foto.
- 90 % para logotipos, capturas de interfaz e ilustraciones con texto. Visualmente idéntico al original en casi todos los casos.
- 80 % para recortes fotográficos e imágenes de cabecera en las que el tamaño importa. Las diferencias solo se ven al ampliar.
- 95–100 % para pixel art, gráficos con líneas finas y capturas de letra pequeña. El modo con pérdida de WebP guarda el color a media resolución, lo que puede desdibujar líneas de color de un solo píxel; en lo alto del rango este efecto es mínimo.
Si piensas modificar la imagen más adelante, guarda el PNG original. WebP está pensado para la copia final publicada, y volver a convertir un WebP con pérdida usando WebP a PNG da un archivo grande sin recuperar el detalle perdido.
Cómo usar el resultado en una web
Sustituye el archivo de imagen y actualiza la extensión en la referencia; en los navegadores actuales no hace falta ningún otro cambio en el marcado. Algunas notas prácticas:
- Ajusta la imagen a su tamaño de visualización antes de convertirla. Un logotipo que se muestra a 240 px de ancho no gana nada por tener 2400 px.
- El formato WebP tiene un límite estricto de 16383 px por lado, así que las capturas muy largas o los sprite sheets que lo superen hay que dividirlos.
- Se aceptan archivos de hasta 50 MB cada uno, y un lote se convierte con un único ajuste de calidad y se puede descargar como ZIP.
- Los bloques de texto y otros metadatos del PNG no se copian al WebP.