imgix images image cloudinary imgix-js

images - Eficiencia de servicios como Cloudinary, Imgix.



imgix api (6)

Definitivamente hay una ventaja de solo cargar imágenes del tamaño que las necesitas. El bono más grande será el tiempo de carga. Todos sabemos que a los usuarios no les gusta esperar a que se carguen las páginas. Entonces, si tiene varias copias o comprime todas sus imágenes según el tamaño de la pantalla, ofrecerá una mejor experiencia de usuario. Google también basa la visualización de búsqueda en los tiempos de carga, en los que se juega el tamaño de la imagen. También sugiero usar un servicio que ofrezca CDN para imágenes para que pueda aprovechar el almacenamiento en caché.

Quiero construir un sitio web con muchas imágenes y, por lo tanto, manipulaciones de imágenes como Amazon, eBay, Flipkart, etc. Se me sugirió usar servicios como Cloudinary, Imgix, etc. para cambiar el tamaño de mis imágenes, ya que sería mejor almacenar una versión de cada imagen, aunque necesitaría varias versiones con diferentes tamaños. Me gustaría saber qué tan eficientes son estos servicios. ¿Hay algún problema? Me gustaría que mi sitio web fuera muy rápido y receptivo. He escuchado inquietudes como "Tenga en cuenta que al menos está duplicando la latencia de transferencia involucrada, que con frecuencia dominará el tiempo requerido para completar una operación de imagen.

Normal: end_user-> your_user-> end_user

A través de estos servicios: end_user-> your_user-> you-> your_user-> end_user "

Estoy usando imgix durante 1 año. Creo que alojar imágenes en un servidor de imágenes profesional es mucho mejor que alojarlas en sus servidores.

Alto rendimiento

1- Como dijo Paul Straw: Imgix tiene una estrategia de almacenamiento en caché adecuada. No agrega la latencia para cargar la imagen. Incluso deduce la latencia ya que no recupera la imagen maestra cada vez que se carga la página. Obtiene la imagen del caché.

2- Tanto Cloudinary como imgix utilizan CDN amplio y rápido. Por lo tanto, el usuario que necesita descargar una imagen, puede obtener el archivo desde el borde CDN que está más cerca de su ubicación. Por lo tanto, la latencia se caerá y se descargará más rápido.

3- Servir las dimensiones de imagen correctas para un dispositivo determinado (o lo más cerca posible) es la mejor manera de asegurarse de que las imágenes no afecten de manera adversa los tiempos de carga de su página. Incluso pequeñas diferencias entre el tamaño real y el deseado de una imagen pueden aumentar considerablemente el tamaño del archivo. La característica más básica de los servicios de alojamiento de imágenes es la capacidad de cambiar el tamaño de las imágenes sobre la marcha para adaptarse a cualquier dispositivo, según sea necesario.

Además del alto rendimiento de estos servicios, también he visto algunos otros beneficios que menciono aquí:

Imágenes responsivas

Hoy en día, muchos propietarios de sitios web, ejecutivos de ventas y marketing y ... se preocupan por muchos aspectos del marketing. Eligen las imágenes cuidadosamente para convertir a un usuario en comprador o para alcanzar un determinado objetivo en su sitio web. Cambiar el tamaño de una imagen para diferentes pantallas tal vez sea suficiente para un diseño receptivo, pero no es suficiente para aumentar la tasa de conversión de su sitio web. A veces necesitas recortar la imagen para redimensionarla. Con los servicios de alojamiento de imágenes, puede elegir exactamente dónde recortar, qué parte de la imagen es esencial para los propósitos de marketing y qué parte puede recortarse. puede tener todos estos controles sobre la marcha con estos servicios sin usar Photoshop y preparar varias fotos sin conexión.

Soporte Retina

La mayoría de las imágenes pueden verse bien en las pantallas normales, pero cuando las ves en pantallas de alta densidad como Apple Retina o algunos dispositivos Android, no son buenas en absoluto. La relación de píxeles del dispositivo se utiliza para convertir fácilmente entre píxeles independientes del dispositivo y píxeles del dispositivo. Esto hace que sea posible mostrar imágenes con la densidad de píxeles correcta en una variedad de dispositivos, como las pantallas Apple Retina y dispositivos Android. En imgix puede elegir cargar imágenes con un DPR más alto si la pantalla puede admitir imágenes de alta densidad. Puedes hacerlo con las etiquetas srcset. Leer más aquí

Manipulación de imágenes sobre la marcha.

Todo lo que quieras hacer en una foto se puede hacer sobre la marcha. No es necesario utilizar Photoshop para manipulaciones de imágenes pequeñas. Eso es reducir significativamente la velocidad de diseño.

Mejor posicionamiento SEO

El tamaño de la imagen contribuye en gran medida a la velocidad de carga de la página, que a su vez es una métrica clave para determinar las clasificaciones de los resultados de búsqueda para sus páginas. Reducir el tamaño de la imagen puede contribuir en gran medida a mejorar su clasificación, especialmente si puede obtener la carga completa de la página por debajo del umbral donde muchos usuarios comienzan a abandonar la impaciencia.

Para que sus imágenes se carguen rápido, desea que su tamaño sea lo más pequeño posible, y desea una buena arquitectura de almacenamiento y entrega.

Cuando utiliza un servicio para entregar sus imágenes, se sirven utilizando un CDN, por lo que se resuelve la parte de almacenamiento y entrega en caché.

Hay varios servicios CDN fuertes como Cloudinary o Imagix. Cada servicio tiene sus propias ventajas y desventajas, lo que plantea varias preguntas:

  • ¿Qué servicio CDN tiene el mejor alcance para sus geografías objetivo?
  • ¿Existen funciones CDN específicas que su sitio o aplicación necesita, pero no están cubiertas por todos los servicios?
  • ¿Qué sucede cuando el servicio CDN que utiliza tiene interrupciones o desaceleraciones?
  • ¿Los picos de tráfico afectan a todos los CDN por igual?
  • ¿Es posible que pueda optimizar aún más la entrega utilizando diferentes servicios de CDN para diferentes áreas geográficas, horas del día u otras variables de rendimiento?

Las respuestas a estas preguntas son desafiantes y cambian constantemente. En un intento por optimizar la entrega en diferentes momentos y en diferentes regiones, Cloudinary habilita múltiples CDN.

Después de completar un proceso de configuración inicial, los clientes de Cloudinary pueden aprovechar una de las dos soluciones de optimización multi-CDN :

  • Cambio dinámico de CDN múltiple: utiliza datos en tiempo real para seleccionar automáticamente el mejor rendimiento o el servicio CDN más adecuado para cada solicitud de usuario y ubicación.

  • Selección inteligente de CDN: los ingenieros de soporte dedicado lo ayudan a determinar cuál de los servicios CDN admitidos es el que mejor se adapta a sus características requeridas y al público objetivo

En lo que respecta al problema de la optimización de la imagen, Cloudinary admite escalar las imágenes al tamaño de la pantalla, ajustar la calidad de la imagen, seleccionar automáticamente el formato de archivo según la detección del cliente, la conversión del formato de la imagen y más.

Descargo de responsabilidad: trabajo como ingeniero de software en Cloudinary.

en el trabajo utilizamos una combinación de

  • la optimización de imagen de canalización genérica, por ejemplo, complementos grunt
  • Lograr que los clientes diseñen equipos para usar aplicaciones para la optimización de imágenes.
  • También usamos Cloudinary en muchos de nuestros sitios.

La solución generalmente varía en función de los costos y presupuestos de los clientes, pero nos encontramos con que Cloudinary en realidad está resultando más barato, especialmente para los clientes que no quieren que nosotros o sus equipos internos dediquen tiempo a la optimización de la imagen y solo quieran centrarse en las funciones.

Al descargar las imágenes y los videos a cloudinary, nos está liberando el tiempo para que solo nos enfoquemos en mejorar el sitio, las pruebas AB y otras actividades generadoras de ingresos. La latencia de transferencia, que no parece ser un gran problema debido al almacenamiento en caché y los CDN, sería un pequeño precio a pagar, literalmente, por horas / días de tiempo liberado para centrarse en la creación de productos y el desarrollo del negocio.
Debe calcular cuánto vale su tiempo y cuánto dinero puede ganar si lo libera para hacer otras cosas. ¿Qué otras cosas intentarías?

(Descargo de responsabilidad: manejo las relaciones con los desarrolladores en imgix y responderé a esta publicación según corresponda a nuestra pila)

Es absolutamente correcto que para obtener una imagen completamente sin adjuntar, hay más "saltos" involucrados para servir una imagen. Para el primer usuario que vea una imagen, esto puede resultar en una latencia ligeramente mayor. Después de eso, sin embargo, la imagen se almacena en caché tanto por nuestro clúster de renderizado como por el CDN global, lo que hace que las solicitudes posteriores de cualquier imagen basada en el original sean mucho más rápidas. De cualquier manera, el ahorro en bytes por el servicio de imágenes de tamaño correcto en el navegador casi siempre superará cualquier latencia adicional de las solicitudes iniciales de una imagen.

Aquí hay un diagrama simple que muestra el flujo cuando una imagen aún no se ha almacenado en caché:

┌─────────────────┐ 4. Origin responds │ Your Origin │ with full-size │ (S3/web folder) │ `dogs.png` image. └─────────────────┘ ▲ │ │ │ │ │ │ ▼ 3. Image is not ┌─────────────────┐ 5. imgix caches the cached at imgix, send │ imgix │ full-size image, then request to origin for │ │ resizes it to 300px `dogs.png` └─────────────────┘ wide and caches that ▲ │ derivative. │ │ │ ▼ 2. Image is not ┌─────────────────┐ 6. The imgix CDN cached at CDN, │ imgix CDN (edge │ caches the 300px wide forward to imgix │nodes worldwide) │ variant and serves it rendering cluster. └─────────────────┘ to the browser. ▲ │ │ │ │ │ │ ▼ 1. Browser requests ┌─────────────────┐ 7. The browser `dogs.png?w=300` │ User''s Browser │ receives and renders │ │ 300px wide `dogs.png`. └─────────────────┘

Una vez que la imagen se ha almacenado en caché (después de que un solo usuario la solicite), el bucle se vuelve mucho más cerrado:

2. The imgix CDN has ┌─────────────────┐ this variant cached, │ imgix CDN (edge │ and serves it to the │nodes worldwide) │ browser. └─────────────────┘ ▲ │ │ │ │ │ │ ▼ 1. Browser requests ┌─────────────────┐ 3. The browser `dogs.png?w=300` │ User''s Browser │ receives and renders │ │ 300px wide `dogs.png`. └─────────────────┘

Una vez que la imagen original se almacena en la memoria caché en nuestro clúster de representación, la generación de derivados también es mucho más rápida (en este caso, una versión de 600px), ya que no requieren un viaje adicional a su servidor de origen:

3. Full-size image is ┌─────────────────┐ 4. imgix resizes the already cached at │ imgix │ cached full-size image imgix, no origin │ │ to 600px wide and request needed. └─────────────────┘ caches that ▲ │ derivative. │ │ │ ▼ 2. Image is not ┌─────────────────┐ 5. The imgix CDN cached at CDN, │ imgix CDN (edge │ caches the 600px wide forward to imgix │nodes worldwide) │ variant and serves it rendering cluster. └─────────────────┘ to the browser. ▲ │ │ │ │ │ │ ▼ 1. Browser requests ┌─────────────────┐ 6. The browser `dogs.png?w=600` │ User''s Browser │ receives and renders │ │ 600px wide `dogs.png`. └─────────────────┘

[Divulgación, soy el CTO de la compañía que ofrece ImageEngine]

La mención de nuestro propio ImageEngine está en orden aquí. ImageEngine se encuentra exactamente en el mismo espacio que las otras soluciones mencionadas por el OP con algunas ventajas adicionales: su CDN se construyó desde cero con la optimización móvil en mente. Además de los navegadores de escritorio, los servidores Edge de ImageEngine pueden detectar con precisión características como el tamaño de la pantalla, la resolución y los códecs de imagen admitidos, y optimizar las imágenes en consecuencia. Esto sucede gracias a WURFL, la misma solución de detección de dispositivos adoptada por Facebook y Google, y representa una optimización adicional (hasta un 80% de ahorro de ancho de banda) y una reducción de las facturas de CDN. Llamamos a este concepto "Smart Bytes".

Otra gran diferencia es la facilidad de integración. ImageEngine no requiere que las organizaciones carguen imágenes en cualquier lugar. Esto es genial para empresas con imágenes heredadas para manejar. Si bien ImageEngine permite que las directivas (a través de los parámetros de URL) especifiquen cómo se debe optimizar una imagen dada, también admite el "modo automático", es decir, ImageEngine recuperará imágenes del sitio web de origen (no es necesario alojar imágenes en el servidor de otra persona) y automáticamente optimice la imagen al mejor formato según lo determinado por el componente de Detección del dispositivo y las sugerencias del cliente. Por ejemplo, los dispositivos y navegadores que admiten .webp obtendrán .webp . Los clientes simplemente activan ImageEngine frente a su sitio existente y la magia ocurre sin necesidad de ajustes adicionales. Los clientes actuales (especialmente el comercio electrónico) adoran esta función.