Condiciones de comparación y métodos de reproducción.
En el ejemplo ejecutado, elija una imagen compuesta con texto y un centro sólido o textura. Los dos materiales no son sesiones fotográficas, sino imágenes de prueba de 1600×900 dibujadas por el sitio. Primero cree el PNG original, mantenga el mismo tamaño de píxel y guárdelo como JPEG, calidad WebP 75, 85 y 95, respectivamente. También puede descargar el archivo de salida directamente.
El número de bytes en la tabla es el Blob.size del archivo generado real. El número de calidad es una configuración del codificador y no significa que se retendrá ningún porcentaje de la información original. Si su navegador no admite el formato, falsificará los resultados con una extensión diferente, no los guardará y mostrará un error de ejecución.
Intente ejecutarlo directamente sin un archivo
Ejecuta el código de procesamiento de la herramienta real con material de ejemplo creado por el sitio. Actualmente, los resultados se calculan en el navegador y no se cargan datos de entrada en el servidor.
se muestran resultados y archivos de ejemplo.
Los ejemplos no son datos reales de visitantes ni rendimiento. El tamaño del archivo y la forma de la fuente pueden variar según el navegador, el dispositivo y la fuente.
2026-10-01 Ejemplo de verdad fundamental en un entorno de navegador único
Los valores siguientes se midieron utilizando dos imágenes compuestas idénticas del ejemplo anterior. Puede variar según el navegador y no pretende generalizar el tamaño de archivo esperado de las fotografías reales ni la superioridad o inferioridad de cada formato. El tamaño de píxel es 1600×900 en cada fila.
| Tipo de entrada | Formato de salida | Calidad | Bytes reales |
|---|---|---|---|
| Monocromo | PNG | — | 57379 |
| Monocromo | JPEG | 75 | 30914 |
| Monocromo | JPEG | 85 | 36131 |
| Monocromo | JPEG | 95 | 48342 |
| Monocromo | WebP | 75 | 10872 |
| Monocromo | WebP | 85 | 13114 |
| Monocromo | WebP | 95 | 18858 |
| Textura | PNG | — | 941654 |
| Textura | JPEG | 75 | 263962 |
| Textura | JPEG | 85 | 321468 |
| Textura | JPEG | 95 | 449142 |
| Textura | WebP | 75 | 213200 |
| Textura | WebP | 85 | 267302 |
| Textura | WebP | 95 | 363228 |
| Textura / objetivo de 200 KB | JPEG | 55 | 197656 |
| Textura / objetivo de 200 KB | WebP | 65 | 198788 |
¿Cuál es la diferencia entre los resultados objetivo de 200 KB?
Una fila separada de 200 KB utiliza la función de navegación para reducir el tamaño real de la imagen. La calidad inicial es 85, la calidad mínima es 50, el lado largo máximo es 2048 px y se permite una mayor reducción. 200 KB son menos de 200.000 bytes. Primero cambie la calidad y reduzca el tamaño de píxel si excede el objetivo, así que verifique el ancho y el alto del resultado juntos.
La fila de comparación 75·85·95 no es un experimento para alcanzar la capacidad objetivo. Este es el resultado de cambiar la configuración de calidad en el mismo tamaño. Si determina que la tasa de compresión es mejor mezclándola con la fila objetivo, las condiciones de comparación serán diferentes.
Orden de calidad y confirmación para aplicar a mis archivos
- Las fotos comienzan con una calidad de 85 y se amplían para comprobar las letras y los contornos.
- Si el tamaño del archivo es lo suficientemente pequeño, compárelo con el resultado 95 para determinar si es necesaria alguna diferencia en los detalles.
- Si el tamaño es demasiado grande, compare 75, pero también verifique el tamaño mínimo de píxeles requerido por la fuente de envío.
- Si el texto pequeño, los diagramas o los logotipos son importantes, compare el original PNG con los resultados JPEG/WebP.
- No uso el tamaño de archivo del ejemplo como el tamaño esperado para mi foto.
Formato Canvas toBlob/documento de procesamiento de calidaddescribe las diferencias en la configuración de calidad y el manejo de formatos no compatibles.
Preguntas frecuentes
Si la calidad es la misma, ¿todas las fotos tienen el mismo tamaño?
No. Depende del tamaño de píxel, el contenido de la imagen, el formato de salida y el codificador del navegador.
Si lo aumento de 85 a 95, ¿mejorará la calidad de la imagen en un 10%?
No puede interpretarse así. No se refiere a una relación de calidad de imagen en comparación con el original ni a una cantidad lineal de mejora.