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.  Procesamiento de imágenes  Manual  back-end  Sobre la marcha  Uso de la mejor compresión.  No  No  Sí  Costos adicionales de almacenamiento  Alto  Alto  Ninguno  costos de ancho de banda  Alto  Alto  Bajo  Tiempo de carga de la imagen  Lento  Lento  Rápido  Experiencia de usuario  Pobre  Pobre  Excelente  Normalización de imágenes generadas por el usuario  Pobre  Pobre  Excelente  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   , código HTML que ofrece al navegador varias imágenes diferentes para elegir. Puede usar   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. srcsets la generación automática de srcset  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.    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 support@imgix.com o   . imgix regístrese para obtener una cuenta gratuita  También publicado   . aquí

Sign Up for Free

Get A Demo

Read the Docs

Visit Website

Este audio es producido en el idioma original de la historia!

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps