Cómo reducir el tamaño de archivos de imagen sin perder calidad
Nuestro querido Robot /image/optimize y nuestro Robot /image/resize son nuestras herramientas más potentes para combatir los tamaños de archivo excesivos y los tiempos de ejecución largos. Hoy veremos algunas cifras reales para saber exactamente cuánto pueden reducir estos Robots el tamaño de tus archivos.
Método
Para recopilar los datos de este artículo, creé un pequeño script de Python que crea una Assembly para optimizar varias imágenes de prueba distintas, ajustando un solo parámetro en cada iteración. De esa forma, cada Assembly queda aislada de las anteriores, lo que nos da resultados más limpios. Además, cada tipo de archivo que probamos tiene al menos dos imágenes de prueba.
Puedes encontrar el código del script aquí en GitHub.
Se usaron dos Templates para probar cada Robot por separado. Encapsular cada Robot es importante para asegurar que nuestros datos solo reflejen el impacto que tuvo ese Robot en concreto. Ambos Templates se muestran a continuación.
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"optimize": {
"use": ":original",
"robot": "/image/optimize",
"preserve_meta_data": false,
"priority": "conversion-speed"
}
}
}
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"quality": {
"use": ":original",
"robot": "/image/resize",
"result": true,
"quality": 20,
"imagemagick_stack": "{{stacks.imagemagick.recommended_version}}"
}
}
}
También deberíamos definir una métrica para medir la reducción total del tamaño de archivo: la diferencia de tamaño en %. Es la diferencia porcentual entre el tamaño del archivo de entrada y el de salida. Esta es la fórmula que usamos para calcularla:
Ahora, veamos algunos de los datos.
Prioridad
El primer parámetro que veremos es priority. Podemos elegir entre dos
algoritmos distintos, compression-ratio y conversion-speed, según si queremos una tasa de
compresión ligeramente menor, del ~18 %, para tiempos de ejecución más rápidos, o una tasa de
compresión más alta, del ~31 %, para obtener el mínimo tamaño de archivo.
Compression-ratio
Como puedes ver abajo, usar la prioridad compression-ratio suele dar una mayor reducción del
tamaño del archivo que usar la prioridad conversion-speed.
Sin embargo, si decides no conservar los metadatos del archivo, ambas prioridades usarán el mismo algoritmo de compresión, lo que explica por qué la reducción de tamaño es la misma para ambas prioridades.
Conversion-speed
La prioridad conversion-speed, como su nombre indica, ayuda a combatir los tiempos de ejecución
largos. Como se demuestra abajo, de las aproximadamente cincuenta Assemblies ejecutadas, el
tiempo de ejecución total se redujo en un promedio de un segundo al usar la prioridad conversion-speed.
Formato de entrada
Por supuesto, el alcance de nuestras optimizaciones está limitado por el tipo de archivo. Veamos con qué tipos de archivo puedes esperar el mayor beneficio.
Diferencia de tamaño
Como se ve claramente abajo, los archivos .webp muestran una reducción media del tamaño de archivo mucho mayor, mientras que los archivos .jpg casi no muestran reducción. El rango entre .gif, .png, .svg y .jpg también es estrecho, así que los resultados pueden variar más según los archivos que decidas usar.
Tiempo de ejecución
En cuanto a los tiempos de ejecución, .gif es el claro ganador, con .webp muy cerca en segundo lugar. Sin embargo, quizá el resultado más sorprendente sea cuánto más tardaron en procesarse los archivos .svg y .png, quizá porque ambos usan compresión sin pérdida.
Prueba el mismo flujo de trabajo de optimización en nuestro compresor de GIF (English) en vivo.
Calidad
Tamaño del archivo
Una de las mejores formas de reducir el tamaño del archivo es bajar la calidad con el Robot /image/resize. Como puedes ver en el gráfico de abajo, una calidad de 75 o menos produce reducciones significativas del tamaño del archivo. Sin embargo, los valores de calidad por encima de 75 hacen que el tamaño del archivo aumente.
Reducir la calidad también mejora el tiempo de ejecución total de una Assembly. En este caso, las diferencias son más lineales.
Calidad de imagen
Entonces, ¿qué impacto tiene realmente la calidad en el aspecto de una imagen?
Esta es la misma imagen en cuatro calidades distintas. Con calidades más bajas, el número de colores se reduce, lo que produce el bandeado de color que puedes ver abajo.
Sin embargo, esta es una imagen bastante grande, con muchos colores distintos. La diferencia de calidad es prácticamente invisible en imágenes más simples, como el logotipo de Transloadit.
En esta imagen solo hay dos colores, lo que significa que puedes bajar el valor de calidad sin ver ninguna diferencia.
Por supuesto, lo mejor es que hagas tus propios experimentos para encontrar un valor de calidad que logre un buen equilibrio entre el tamaño del archivo y la calidad de imagen.
Conclusiones
Después de lanzarte toda esa información, tomémonos un momento para repasarla y ver cómo puede beneficiarte ahora mismo.
Quizá el detalle más importante que puedes llevarte es el uso del formato .webp. Tanto si buscas reducir los tiempos de ejecución como el tamaño de los archivos, aquí verás un beneficio. Puedes comparar el resultado con nuestros conversores en vivo de PNG a WebP (English) y JPG a WebP (English). Combinar esto con una calidad de archivo ligeramente reducida en un único Step de /image/resize probablemente dará los mejores resultados.
Otra conclusión importante es elegir la priority adecuada para tu caso de uso. El algoritmo
compression-ratio sería mi elección, por lo significativa que puede ser la reducción de tamaño.
Pero, de nuevo, no dudes en probarlo tú mismo.
Por último, espero que este blog te haya inspirado a lanzarte a optimizar tus Templates, y que sea un buen punto de partida para el comienzo de tu recorrido. Estaremos encantados de orientarte cuando sea posible, así que no dudes en escribirnos también por soporte o Twitter.