Convertir a WebP no siempre reduce el peso.
Procesamos cuatro PNG y seis WebP que ya usa esta web. Los PNG bajaron entre un 27 % y un 70 %. Los seis WebP crecieron entre un 7 % y un 18 %. La decisión útil no es “usar WebP”, sino comparar el resultado antes de reemplazar el original.
- Corpus total
- 101,1 KB
- Salida total
- 59,0 KB
- Diferencia conjunta
- −42 %
- Recompresiones peores
- 6 de 10
El −42 % conjunto mezcla formatos distintos y no debe leerse como una promesa de ahorro. La conclusión importante está en cada fila.
La ejecución, sin reconstruir la interfaz
Captura del panel real después de completar el lote. El CSV se descargó desde el botón que ve cualquier usuario.
Resultado por archivo
Los bytes proceden del informe generado por Studio. “Más” significa que la salida pesa más que el original y conviene conservar el archivo de entrada.
| Entrada | Original | Salida | Cambio |
|---|---|---|---|
| apple-touch-icon.png | 3.360 B | 2.462 B | 27 % menos |
| icon-192.png | 3.449 B | 2.436 B | 29 % menos |
| icon-512.png | 19.153 B | 5.716 B | 70 % menos |
| social-preview.png | 44.443 B | 13.470 B | 70 % menos |
| guia-calculadora-ahorro.webp | 7.064 B | 7.608 B | 8 % más |
| guia-comprimir-jpg.webp | 4.484 B | 5.012 B | 12 % más |
| guia-convertir-webp.webp | 5.700 B | 6.308 B | 11 % más |
| guia-formatos-imagen.webp | 3.116 B | 3.664 B | 18 % más |
| guia-reducir-peso.webp | 8.278 B | 8.832 B | 7 % más |
| guia-sin-perder-calidad.webp | 4.452 B | 4.930 B | 11 % más |
Qué podemos afirmar
PNG: hubo margen real
Los cuatro PNG eran recursos gráficos de producción, no archivos inflados para la prueba. Convertirlos a WebP redujo el peso en todos los casos. El ahorro fue menor en iconos pequeños y mayor en el icono de 512 px y en la imagen social.
WebP: volver a codificar empeoró todo
Las seis ilustraciones ya estaban optimizadas. Al pasarlas otra vez por Canvas con calidad 82, todas crecieron. El formato de salida era el mismo; la nueva codificación no tenía información útil que eliminar y produjo archivos mayores.
Regla práctica
Conserva el original, genera una copia y compara peso, dimensiones y aspecto. Si la salida es mayor o introduce defectos, no la uses. Studio muestra “más” de forma explícita para evitar una falsa sensación de mejora.
Método reproducible
La prueba se puede repetir con los mismos recursos públicos del repositorio.
- Corpus. Cuatro PNG de producción —iconos y vista social— y seis ilustraciones WebP usadas en las guías.
- Herramienta. ArchivoLigero Studio servido localmente y ejecutado en Chromium 149.0.7827.55.
- Ajustes. Calidad 82, máximo 1600 × 1600 px, salida WebP y sin peso objetivo.
- Medición. El navegador informó el tamaño del archivo de entrada y del Blob de salida. No se redondearon los bytes del CSV.
- Repetición. El script
npm run benchmark:studiocarga los diez recursos, espera los resultados y guarda CSV, JSON y captura.
Qué no demuestra esta prueba
- El corpus contiene gráficos e iconos del sitio, no fotografías con piel, pelo, ruido o textura compleja.
- Diez archivos no representan todos los codificadores, navegadores ni tipos de imagen.
- No medimos SSIM, Butteraugli u otra métrica perceptual; el laboratorio compara peso y comprueba visualmente la salida.
- Canvas puede producir resultados distintos cuando cambia el navegador. Por eso registramos versión y fecha.
- Una reducción de bytes no autoriza a sustituir el original sin revisar transparencia, nitidez y uso final.
Datos abiertos para comprobarlo
Publicamos los resultados completos bajo CC BY 4.0. Si detectas una incoherencia, indica el archivo y la fila a contacto@jcerezred.es.