Por qué el procesamiento de imágenes sobre la marcha supera al procesamiento manual y back-end

Las imágenes dan vida a las páginas web y las aplicaciones móviles. El procesamiento de imágenes efectivo es crucial para lograr el impacto que desea y obtener un rendimiento web óptimo. Sin embargo, no todas las técnicas de procesamiento de imágenes son fáciles, confiables o se realizan en tiempo real.

En esta publicación de blog, describiremos brevemente los tres tipos de procesamiento de imágenes: procesamiento de imágenes manual, back-end y sobre la marcha. Luego le mostraremos por qué el procesamiento de imágenes sobre la marcha ofrece resultados superiores.

Procesamiento manual de imágenes: la solución original para imágenes receptivas

Para cumplir con las expectativas de los usuarios de páginas web con mayor capacidad de respuesta, muchos diseñadores y desarrolladores crean manualmente varias versiones de las mismas imágenes, adaptadas a diferentes tamaños de pantalla, resoluciones de dispositivos y diseños de página.

Este enfoque tiene muchos problemas.

• Es laborioso.
• Es propenso al error humano, especialmente a medida que aumenta el volumen de trabajo.
• No hay suficientes versiones para cumplir con muchas de las combinaciones de dispositivo/navegador más nuevas o menos utilizadas.
• Siempre que quieras cambiar una imagen tienes que cambiar todas las variantes.
• Aumenta sus costos de almacenamiento.

El auge del procesamiento de imágenes backend

Con el procesamiento de imágenes de back-end, el software genera automáticamente algunas versiones de la imagen de origen para adaptarse a una variedad de dispositivos y navegadores. El software de procesamiento de imágenes back-end almacena todas las imágenes renderizadas localmente o en la nube, para uso futuro. Este método ahorra mucho tiempo de diseño y desarrollo web y elimina muchos de los errores encontrados en el proceso manual.

El procesamiento de back-end a menudo se realiza utilizando un software creado internamente, como una solución única. Las herramientas comerciales como ImageMagick y Thumbor también son opciones populares.

Donde el procesamiento de imágenes de back-end se queda corto

Si cambia al procesamiento de imágenes de fondo, seguirá teniendo muchos de los mismos problemas que tiene con el procesamiento manual de imágenes. Todavía tiene que almacenar todas las versiones de imágenes, lo que cuesta dinero. Para un sitio grande con muchas imágenes y para sitios con contenido generado por el usuario, los costos son sustanciales.

Esto significa que, por lo general, no tiene la imagen más atractiva, en el tamaño de archivo más pequeño, para muchos de sus usuarios. Estos archivos subóptimos también tardan más en descargarse, lo que daña aún más la experiencia del usuario.

Aquí hay un resumen de los problemas con el procesamiento de imágenes de back-end:

• No está optimizado para todos los entornos. El procesamiento de back-end no genera la mejor imagen comprimida de manera óptima para todos los navegadores y dispositivos.
• Soporte deficiente para el contenido generado por el usuario. Si bien el procesamiento de back-end puede recortar y cambiar el tamaño de las imágenes de origen estandarizadas, no cuenta con una tecnología de transformación sofisticada para manejar imágenes de diferentes tamaños, relaciones de aspecto y niveles de calidad.
• Costos de almacenamiento. Tiene muchas copias de imágenes para almacenar y mantener. Los nuevos dispositivos y los nuevos formatos de imagen, como WebP y AVIF, requieren que almacene una cantidad cada vez mayor de copias por imagen, lo que eleva sus costos.
• Costos de ancho de banda. Con el procesamiento de fondo, está generando un conjunto relativamente pequeño de opciones por imagen, lo que significa que a menudo enviará una imagen más grande o una imagen menos comprimida de lo necesario.
• Tiempo de carga de página lento y mala experiencia de usuario. Las imágenes comprimidas de forma subóptima tardan más en descargarse, lo que perjudica la percepción del usuario y reduce las conversiones.

Procesamiento de imágenes sobre la marcha y sus beneficios

El procesamiento de imágenes sobre la marcha es una tecnología más nueva y avanzada, y está reemplazando constantemente el procesamiento de imágenes de back-end.

Para procesar imágenes sobre la marcha, el software genera la mejor versión de la imagen en tiempo real, cuando el usuario la necesita, en lugar de generar un conjunto de renderizaciones de antemano. Una vez que se procesa una imagen, se almacena en caché, en lugar de en el almacenamiento de origen.

Cada usuario obtiene la imagen más atractiva, en el tamaño de archivo más pequeño y el tiempo de carga más rápido posible:

• La imagen óptima se sirve cada vez. Hay posibilidades de representación casi infinitas, pero cada combinación de dispositivo y navegador obtiene exactamente la imagen correcta.
• Importantes ahorros de almacenamiento. Como las imágenes renderizadas se almacenan en caché, no en el origen, no hay aumento en los costos de almacenamiento.
• Tiempo de carga más rápido. Con las imágenes comprimidas al nivel óptimo, el tiempo de carga de la página es mucho más rápido.
• Entrega de imágenes a prueba de futuro. A medida que surgen nuevos formatos de imagen, nuevos dispositivos y nuevas tecnologías de procesamiento de imágenes, el procesamiento sobre la marcha responde, sin esfuerzo adicional de su parte.

El procesamiento de imágenes sobre la marcha le quita la mayor parte del trabajo y los gastos y ofrece un resultado realmente optimizado.

Esta tabla compara el procesamiento manual de imágenes, el procesamiento de imágenes back-end y el procesamiento de imágenes sobre la marcha. Sin embargo, la tabla no puede describir completamente cuánto más fácil y mejor es la tecnología más nueva. Para aquellos que han tenido problemas con los enfoques más antiguos, el procesamiento de imágenes sobre la marcha se siente un poco mágico; mucho menos trabajo, mucho menos costo y una experiencia mucho mejor para el usuario, todo lo cual produce mejores resultados comerciales.

Cómo lograr el procesamiento de imágenes sobre la marcha

Con el procesamiento de imágenes sobre la marcha, crea una imagen de origen y luego establece algunas reglas. Puede especificar los valores que desea usar para varios parámetros o dejar que el software optimice la imagen, la compresión, etc. por usted.

Un objetivo popular de los medios visuales es mejorar los colores de las imágenes automáticamente, especialmente con las imágenes generadas por los usuarios. imgix ofrece un conjunto completo de opciones de mejora del color .

Otro objetivo común logrado por el procesamiento de imágenes sobre la marcha es la generación automática de srcsets , código HTML que ofrece al navegador varias imágenes diferentes para elegir. Puede usar la generación automática de srcset para tener en cuenta diferentes resoluciones de dispositivos. Puede ver una demostración de cómo funciona esto en nuestro nuevo video sobre este y otros temas relacionados.

Conclusión

Con sus muchas ventajas en cuanto a costo, facilidad de uso y experiencia del usuario final, el procesamiento de imágenes sobre la marcha es una opción superior al procesamiento back-end para sitios web con gran cantidad de imágenes y alto tráfico.

imgix es el líder en procesamiento de imágenes sobre la marcha, que proporciona transformaciones sólidas, implementación simple y entrega rápida a través de una CDN de imágenes global. Si tiene alguna pregunta sobre la optimización de imágenes o imgix, contáctenos en [email protected] o regístrese para obtener una cuenta gratuita .