Comience con Smart DAM y la pila de optimización de imágenes – Usabilidad web y seo

Comience con Smart DAM y la pila de optimización de imágenes

Vistas: 116
0 0
Tiempo de lectura:8 Minutos, 54 Segundos

La gestión de activos y la optimización del rendimiento del sitio web son dos de esos dolores de cabeza inevitables a los que se enfrenta todo propietario de un sitio web.

Una plataforma de gestión de activos digitales (DAM) puede proporcionar repositorios de activos centralizados con paneles intuitivos para ayudarlo a administrar sus activos. Por otro lado, una imagen CDN puede ayudarlo a deshacerse de esta sintaxis receptiva desordenada y permitir la optimización dinámica de recursos con enormes ganancias de rendimiento.

El problema es que el rendimiento del sitio web se ha convertido en un factor tan competitivo que los DAM con otras prioridades tienden a fallar. Por otro lado, las CDN de imágenes especializadas no resuelven los problemas de gestión de imágenes, especialmente dentro de las organizaciones.

Con esto en mente, propongo finalmente resolver estos problemas combinando una pila de optimización y administración de imágenes usando ImageEngine y Cloudinary. En lugar de comparar las dos herramientas, este artículo describe los beneficios de usarlas para complementarse entre sí.

Funciones y capacidades de gestión de activos

Como DAM, Cloudinary le proporciona una interfaz visual para almacenar, administrar y editar sus imágenes y activos de video. Como tal, no es muy diferente de cualquier otro software de gestión de imágenes profesional como Adobe Bridge, excepto que es un servicio en línea basado en navegador.

Con la biblioteca de medios, puede, por ejemplo, cargar, eliminar y organizar imágenes en carpetas. El Editor de imágenes visual le permite realizar transformaciones y correcciones avanzadas en las imágenes y ver los resultados al instante con herramientas como controles deslizantes, listas desplegables y más. Incluso puede encadenar transformaciones para efectos de varias capas.

Cloudinary también le permite manipular imágenes y videos de esta manera utilizando su API basada en URL.

Cloudinary tiene características de soporte adicionales que simplifican la administración de activos (especialmente en organizaciones), como respaldo, administración multiusuario basada en roles y extensiones de características a través de integraciones y complementos de terceros.

Esto es algo que la mayoría de las imágenes CDN no proporcionan. En cambio, le permiten acceder y transformar imágenes mediante la manipulación de URL. Las conversiones generalmente se realizan utilizando parámetros de cadena o directivas. DAM sin servidor, sin cabeza, por así decirlo.

Sin embargo, la ventaja de usar una CDN de imagen dedicada como ImageEngine es que generalmente proporciona una mejor optimización de recursos. ImageEngine, por ejemplo, es un CDN de imagen inteligente que utiliza la detección de dispositivos WURFL para leer con precisión el contexto desde el que se accede a la imagen (modelo de dispositivo, PPI, SO, navegador, resolución, etc.), y luego selecciona la imagen óptima para esto. configuración.

Esto libera a los propietarios de sitios web de tener que realizar una optimización adicional. Esta lógica empresarial también está integrada en todos sus servidores PoP globales, e ImageEngine aplica específicamente tasas de aciertos de caché cercanas al 100%. La siguiente sección sobre rendimiento demostrará la diferencia que esto puede tener en la práctica.

Consulte las diferencias clave entre ImageEngine y Cloudinary. Y para una comprensión más profunda, consulte la comparación con otras CDN similares como imgix y Cloudflare.

Representación

Para cubrir nuestra base y demostrar que se trata de una pila de optimización y gestión de activos eficaz, también lo confirmaré con una auditoría de rendimiento de Lighthouse. A continuación, se muestra un resumen de los resultados:

Para esta prueba, creé una página web con muchas imágenes con tamaños de archivo excesivamente grandes. En esta primera auditoría de Lighthouse, no apliqué optimización a las imágenes. Aquí está el resultado:

Como puede ver, estábamos teniendo serios problemas con el tiempo de carga de nuestros recursos. En general, la página tardó más de 10 segundos en cargarse. Una de las métricas de rendimiento centradas en el usuario más importantes de Google, LCP, obtuvo un mísero 7,5. Lighthouse sugirió que algunos de los principales problemas encontrados fueron el tamaño del archivo de recursos, políticas de almacenamiento en caché ineficaces, el uso de formatos de imagen subóptimos y el tamaño de imagen incorrecto.

Tanto Cloudinary como ImageEngine deben tener en cuenta todos estos factores a través de la optimización automática de imágenes. En la siguiente auditoría, usé la misma página y contenido, pero envié mis imágenes a través de Cloudinary:

Como puede ver, hay una mejora en la mayoría de los factores. FCP está ahora en la zona verde, y el índice de velocidad y el tiempo LCP se han reducido casi a la mitad. Incluso TTI y CLS han mejorado ligeramente. Sin embargo, todavía está lejos de ser óptimo, y todavía no estamos alcanzando el límite de tiempo de carga de 3 segundos tan importante.

Entonces, finalmente, hagamos otra auditoría de Lighthouse, esta vez usando ImageEngine sobre Cloudinary. Aquí están los resultados:

Con ImageEngine, finalmente obtuve 95 puntos. Se han mejorado todas las métricas relacionadas con la velocidad absoluta de descarga de contenido gráfico. El índice de velocidad y, lo más importante, el LCP han mejorado significativamente. CLS obtuvo el peor puntaje, pero esto generalmente varía de una prueba a otra.

Puede encontrar otro análisis de rendimiento y una comparación de precios más detallados aquí.

Conversiones, uso de ancho de banda y costo

Las tarifas de Cloudinary se basan en un sistema de crédito. Comenzando con una cuenta gratuita, obtiene 25 créditos por mes. Cada crédito se puede utilizar para 1000 conversiones, 1 GB de almacenamiento o 1 GB de ancho de banda de visualización neto. Los otros dos paquetes cuestan $ 99 por 225 créditos y $ 249 por 600 créditos, respectivamente.

Debe planear crear al menos 5 transformaciones para cada imagen. De hecho, esto lo limita a aproximadamente 200 imágenes de planes gratuitos, sin contar las conversiones manuales que realice.

El plan Basic ImageEngine cuesta $ 49 y le brinda 100GB de Smart Bytes. Los Smart Bytes se basan en contenido de imagen optimizado y se convierten en aproximadamente 400-500 GB de imágenes sin procesar.

Por lo tanto, con Cloudinary, debe encontrar una compensación entre el ancho de banda y el uso de almacenamiento y la cantidad de conversiones que puede realizar. Las conversiones para Cloudinary cuentan ya que se generan dinámicamente a pedido.

Sin embargo, si está utilizando ImageEngine para la optimización, puede desactivar la optimización automática de Cloudinary. Siempre que se requiera una nueva versión de la imagen, se generará y entregará a través de ImageEngine. Dado que la cantidad de opciones no se limita a ImageEngine, esto reducirá drásticamente la cantidad de créditos que necesitará gastar en conversiones.

Esto significa efectivamente que puede usar la mayoría de sus préstamos de Cloudinary únicamente para almacenamiento y conversiones específicas. Por ejemplo, recorte avanzado, aplicación de efectos o ajustes de color. Después de todo, estas son las funciones centrales de DAM.

Con esta configuración, el plan ImageEngine básico y el plan Cloudinary gratuito deberían funcionar bien para la mayoría de los sitios web, ahorrando alrededor de $ 50 por mes.

Cómo implementar Cloudinary con ImageEngine

Suscripción a ambos servicios

Dado que albergará todas sus imágenes, registrarse en Cloudinary es un lugar lógico para comenzar.

Cree una cuenta (gratuita) y asegúrese de escribir su “nombre de nube” durante el asistente de configuración. Este será el nombre de su ubicación de almacenamiento designada en la plataforma Cloudinary y generalmente es una cadena con formato incorrecto como di2zgnxh0 defecto. Sin embargo, puede cambiar esto por algo más significativo.

Después de registrarse, puede comenzar a cargar sus imágenes y crear diferentes versiones / transformaciones de ellas. Configurar una integración de Cloudinary en un CMS como WordPress suele ser sencillo. Simplemente especifique el CMS que utilizará, copie la clave API, instale el complemento y actívelo.

Luego, regístrese para una prueba gratuita de ImageEngine. También habrá un pequeño asistente de configuración, durante el cual:

  1. Proporcione a ImageEngine un sitio web que albergue sus imágenes.
  2. Especifique la fuente de su imagen (en este caso, su carpeta web Cloudinary). Por ahora, solo puede agregar Cloudinary, por ejemplo res.cloudinary.com.
  3. Obtenga el dominio de servicio de imágenes ImageEngine, por ejemplo {randomstring} .cdn.imgeng.in

En el panel de ImageEngine, verá este dominio en Motores, así como una entrada para Cloudinary en Orígenes. Edite este último y en la sección Avanzado agregue la carpeta Cloudinary al campo PATH.

Eso es todo, ahora puede almacenar y administrar imágenes a través de Cloudinary y servirlas a través de ImageEngine CDN.

Cargar dinámicamente ciertas variantes de una imagen

Echemos un vistazo a un caso de uso para cargar diferentes transformaciones de imágenes individuales en su sitio. Este ejemplo demostrará cómo puede utilizar las herramientas avanzadas de edición de imágenes de Cloudinary para transformar imágenes, sin dejar de beneficiarse de la optimización del uso de ImageEngine como una CDN de imágenes.

Una práctica popular hoy en día es utilizar imágenes redondeadas para retratos de equipo, cliente o perfil. Con Cloudinary, puede descargar esta transformación utilizando la siguiente URL:

https://res.cloudinary.com/myimages/image/upload/w_400,h_400,c_crop,g_face,r_max/w_200/profile.jpg

Esto cambiará el tamaño de la imagen a 400 por 400 píxeles, se enfocará en la cara y aplicará la cantidad máxima de recorte radial a su alrededor, a un ancho de 200 píxeles.

Luego, se puede acceder a la misma imagen a través del mecanismo de entrega de ImageEngine simplemente reemplazando el dominio:

https://images.myimageengine.com.imgeng.in/image/upload/w_400,h_400,c_crop,g_face,r_max/w_200/profile.jpg

NOTA. Agregué la designación de la carpeta Cloudinary (“myimages”) como la ruta a la fuente de mi imagen. Con esta configuración, no necesito habilitarla cada vez que uso la URL de la imagen.

Por ejemplo, puede personalizar el origen de esta manera:

Y luego, debajo de los extendidos:

Si quisiera específicamente cargar una imagen de perfil en formato WebP (por ejemplo, para admitir transparencia), podría agregar la directiva ImageEngine f_webp:

https://images.myimageengine.com.imgeng.in/image/upload/w_400,h_400,c_crop,g_face,r_max/w_200/?imgeng=/f_webp/profile.jpg

ImageEngine y Cloudinary – Conclusión

Tanto ImageEngine como Cloudinary son plataformas excelentes que pueden facilitar la gestión de activos de imágenes y videos y brindar un mejor servicio a su sitio web. Sin embargo, ambos servicios tienen su propia especialización, en la que destacan.

Para ImageEngine, ofrece tiempos de carga increíblemente rápidos para imágenes de próxima generación con una pérdida mínima de calidad visual.

Para Cloudinary, proporciona una interfaz visual para organizar, almacenar y editar sus imágenes y activos de video.

Como incentivo adicional, permitir que cada uno de estos servicios haga lo que mejor saben hacer puede reducir sus costos operativos a largo plazo.

[– This is a sponsored post on behalf of ImageEngine –]

Happy
Happy
0
Sad
Sad
0
Excited
Excited
0
Sleepy
Sleepy
0
Angry
Angry
0
Surprise
Surprise
0
Previous post Por qué la mensajería social es el futuro de la experiencia del cliente
Next post ¿Enmascarar o no enmascarar? Ésta es una pregunta que las empresas deberán responder.

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Deja una respuesta