En el pasado, implementamos un CDN para reducir los costos de ancho de banda en un 80%, y la velocidad de nuestra página aumentó a medida que el CDN almacenaba imágenes en caché más cerca del usuario. Como una mejora adicional, propuse transformar las imágenes para hacerlas más pequeñas y usar un formato de última generación para reducir aún más el tamaño. En ese momento, el negocio no vio el valor en esto, pero unos meses después, ¿adivinen qué? Se me solicitó que revisara cómo podíamos mejorar la velocidad de la página de listado.

Mi investigación ya estaba hecha, y mi propuesta era la misma que hace meses. Acordamos pagar por la transformación de imágenes; el costo era bastante barato. Hoy, transformamos más de 200,000 imágenes mensualmente, y la facturación es menor a $100.

Para la implementación, pasamos algunos parámetros al CDN que ya implementamos. Para nuestro caso de uso, los parámetros definidos son tamaño, calidad y formato. El CDN también proporciona opciones para recortar y difuminar la imagen si es necesario, lo que en nuestro caso podría ayudar ya que algunas de las imágenes son realmente gráficas, pero por ahora, vamos a limitar la publicación a la optimización del tamaño.

Nuestra implementación fue simple: un método recibe la URL original y también el tamaño, la calidad y el formato. El tamaño se basa en el tamaño del contenedor de la imagen, por lo que no importa si está usando un teléfono o una pantalla grande, la imagen se optimizará. Después de probar diferentes números aquí, quedó claro que si establecemos la Calidad en 70%, la calidad de la imagen es aceptable, y el tamaño en MB se reduce considerablemente también. Para una reducción adicional en bytes, el formato WebP lossless fue seleccionado ya que, en promedio, el formato es 30% más pequeño manteniendo la misma calidad.

Una gran característica del CDN es que después de generar la imagen optimizada, también se almacena en caché por el CDN, por lo que no hay necesidad de que el CDN vuelva a crear la imagen, y esto también acelera el tiempo de carga.

Las imágenes JPG y PNG se mejoraron con esta implementación, pero la verdadera optimizacion provino de los GIFs. En el pasado, había GIFs de más de 90MB cargando. En la siguiente imagen, podemos ver que el tamaño del GIF se reduce en más del 80%.