logo
La gestión de activos y la optimización del rendimiento del sitio web son dos de esos dolores de cabeza inevitables que 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 los activos. Por otro lado, una CDN de imagen puede ayudarlo a deshacerse de esa sintaxis receptiva desordenada y proporcionar una optimización dinámica de activos con grandes aumentos 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 quedarse cortos. Por otro lado, las CDN de imágenes especializadas no resuelven los problemas asociados con la gestión de imágenes, particularmente dentro de las organizaciones.
Con eso en mente, propongo resolver estos problemas para siempre juntando la gestión de imágenes y la pila de optimización usando ImageEngine y Cloudinary. En lugar de ser una comparación entre estas 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 activos de imagen y video. De esa manera, no es muy diferente de cualquier otro software de administración de imágenes profesional como Adobe Bridge, excepto que es un servicio en línea basado en un navegador.
Con la biblioteca de medios, puede cargar, eliminar y organizar imágenes en carpetas, por ejemplo. El editor de imágenes visual le permite realizar transformaciones avanzadas y retoques de imagen y ver los resultados instantáneamente utilizando herramientas como controles deslizantes, menús desplegables, etc. Incluso puede encadenar transformaciones para obtener 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 funciones auxiliares adicionales que facilitan la gestión de activos (especialmente en organizaciones), como copias de seguridad, administración multiusuario basada en roles y extensiones de funciones a través de integraciones y complementos de terceros.
Esto es algo que la mayoría de las CDN de imágenes no proporcionan. En cambio, le permiten acceder y transformar imágenes mediante la manipulación de URL. Las transformaciones generalmente se realizan utilizando parámetros o directivas basados en cadenas. Un DAM sin servidor y sin cabeza, por así decirlo.
Sin embargo, la ventaja de utilizar una CDN de imagen dedicada como ImageEngine es que, por lo general, puede proporcionar una optimización de activos mejorada. ImageEngine, por ejemplo, es una 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 una imagen (modelo de dispositivo, PPI, sistema operativo, navegador, resolución, etc.) y luego elige la imagen óptima para esa 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 ofrece específicamente tasas de aciertos de caché cercanas al 100%. La siguiente sección de rendimiento ilustrará la diferencia que esto puede marcar en la práctica.
Mira la clave diferencias entre ImageEngine y Cloudinary. Y, para una visión más profunda, vea la comparación con otros CDN similares, como imgix y Cloudflare
Actuación
Solo para cubrir nuestras bases y demostrar que se trata de una pila de optimización y gestión de activos eficaz, también lo afirmaré mediante una auditoría de rendimiento de Lighthouse. Aquí hay un resumen rápido de los resultados:
Para esta prueba, construí una página web con una tonelada de imágenes con tamaños de archivo demasiado grandes. En esta primera auditoría de Lighthouse, no apliqué ninguna optimización a las imágenes. Aquí está el resultado:
Como puede ver, tuvimos algunos problemas importantes en lo que respecta al tiempo de carga de nuestros activos. En general, la página tardó más de 10 segundos en cargarse. Una de las métricas de rendimiento centradas en el usuario cruciales de Google, LCP, obtuvo un miserable 7,5. Lighthouse sugirió que algunos de los principales problemas encontrados fueron el tamaño del archivo de activos, políticas de caché ineficientes, uso de formatos de imagen no óptimos e imágenes de tamaño incorrecto.
Se supone que tanto Cloudinary como ImageEngine abordan todos estos factores con su optimización automática de imágenes. En la siguiente auditoría, usé la misma página y contenido, pero entregué mis imágenes a través de Cloudinary:
Como puede ver, hay una mejora en la mayoría de los factores. FCP ahora está en verde, y tanto el índice de velocidad como los tiempos de LCP se han reducido casi a la mitad. Incluso TTI y CLS mejoraron ligeramente. Dicho esto, todavía no es ni mucho menos óptimo, y todavía estamos por debajo del importantísimo límite de tiempo de carga de 3 segundos.
Entonces, finalmente, hagamos otra auditoría de Lighthouse, esta vez usando ImageEngine sobre Cloudinary. Aquí están los resultados:
Con ImageEngine, finalmente obtuve una puntuación en verde con 95. Todas las métricas que tienen que ver con la velocidad a la que se carga el contenido de la imagen mejoraron. El índice de velocidad y el LCP, que es el más importante, mejoraron drásticamente. CLS puntuó peor, pero esto generalmente varía de una prueba a otra.
Puede encontrar otro desglose más extenso de la comparación de precios y rendimiento. aquí.
Transformaciones, utilización del ancho de banda y costo
Los planes de precios de Cloudinary funcionan en un sistema basado en créditos. Comenzando con la cuenta gratuita, obtienes 25 créditos / mes. Cada crédito se puede utilizar para 1000 transformaciones, 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 generar un mínimo de 5 transformaciones por imagen. En efecto, eso lo limita a alrededor de 200 imágenes con el plan gratuito, excluyendo las transformaciones manuales que realice.
El plan básico de ImageEngine cuesta $ 49 y le proporciona 100 GB de Smart Bytes. Los Smart Bytes se basan en contenido de imagen optimizado y se traducen en aproximadamente 400-500 GB de imágenes sin procesar.
Entonces, con Cloudinary, debe comprometerse entre el ancho de banda y el uso del almacenamiento, así como la cantidad de transformaciones que puede realizar. Las transformaciones para Cloudinary se cuentan ya que se generan dinámicamente a pedido.
Sin embargo, si usa ImageEngine para la optimización, puede desactivar la optimización automática de Cloudinary. Cuando se necesita una nueva variante de imagen, se generará y entregará a través de ImageEngine. Teniendo en cuenta que el recuento de variantes no está limitado por ImageEngine, esto reducirá drásticamente la cantidad de créditos que necesitará gastar en transformaciones.
Efectivamente, eso significa que puede usar la mayor parte de sus créditos de Cloudinary únicamente para almacenamiento y transformaciones específicas. Por ejemplo, recorte avanzado, aplicación de efectos o ajustes de color. Después de todo, estas son las principales funciones de un DAM.
Con esta configuración, el plan básico de ImageEngine y el plan gratuito de Cloudinary deberían ser adecuados para la mayoría de los sitios web, ahorrando alrededor de $ 50 al mes.
Cómo implementar Cloudinary con ImageEngine
Registrarse para ambos servicios
Como albergará todos sus activos de imagen, el lugar lógico para comenzar sería registrarse en Cloudinary.
Cree una cuenta (gratuita) y asegúrese de tomar nota de 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 distorsionada como di2zgnxh0 por defecto. Sin embargo, puede cambiar esto por algo más significativo.
Una vez que se haya registrado, puede comenzar a cargar sus activos de imagen y crear diferentes versiones / transformaciones de ellos. Configurar la integración de Cloudinary en un CMS, como WordPress, suele ser sencillo. Simplemente indique el CMS que utilizará, copie la clave API, instale el complemento y actívelo.
A continuación, regístrese para prueba gratuita con ImageEngine. También habrá un breve asistente de configuración durante el cual:
- Proporcione a ImageEngine el sitio web donde se entregarán sus imágenes.
- Proporcione el origen de su imagen (en este caso, su carpeta web Cloudinary). Por ahora, solo puede agregar Cloudinary, por ejemplo, res.cloudinary.com.
- Obtenga su dominio de servicio de imágenes ImageEngine, por ejemplo, {randomstring} .cdn.imgeng.in
Cuando esté en su panel de ImageEngine, verá este dominio en la lista de «Motores», así como una entrada para Cloudinary en «Orígenes». Edite este último y en «Avanzado», agregue su carpeta Cloudinary al campo «RUTA».
Eso es todo, ahora debería poder almacenar y administrar imágenes a través de Cloudinary y servirlas a través de ImageEngine CDN.
Carga dinámica de variantes de imagen específicas
Echemos un vistazo a un caso de uso para cargar diferentes transformaciones de imágenes individuales en su sitio. Este ejemplo mostrará cómo puede usar las herramientas avanzadas de edición de imágenes de Cloudinary para transformar imágenes mientras sigue cosechando las recompensas de optimización de usar ImageEngine como su imagen CDN.
Una práctica popular hoy en día es usar imágenes redondeadas para retratos de equipo, cliente o perfil. Con Cloudinary, puede cargar 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.jpgEsto cambiará el tamaño de la imagen a 400 por 400 px, se enfocará en la cara y aplicará la cantidad máxima de recorte radial a su alrededor, a un ancho de 200 px.
Luego se puede acceder a la misma imagen a través de su motor de entrega ImageEngine simplemente intercambiando el dominio:
https://images.myimageengine.com.imgeng.in/image/upload/w_400,h_400,c_crop,g_face,r_max/w_200/profile.jpgNOTA: Agregué la designación de mi carpeta Cloudinary («myimages») como la ruta al origen de mi imagen. Con esa configuración, no necesito incluirla cada vez que uso la URL de la imagen.
Por ejemplo, puede configurar el origen de esta manera:
Y luego en avanzado:
Si quisiera específicamente cargar la imagen de perfil en formato WebP (para soporte de transparencia, por ejemplo), 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.jpgImageEngine y Cloudinary: el resumen
Tanto ImageEngine como Cloudinary son plataformas excelentes que pueden facilitar la administración de activos de imagen y video y mejorar el mantenimiento de su sitio web. Sin embargo, ambos servicios tienen su especialidad en la que se superan entre sí.
Para ImageEngine, ofrece tiempos de carga de imágenes increíblemente rápidos en formatos de próxima generación y con una pérdida mínima de calidad visual.
Para Cloudinary, proporciona una interfaz visual para organizar, almacenar y editar sus activos de imagen y video.
Como incentivo adicional, dejar que cada uno de estos servicios se encargue de lo que mejor hacen puede llevar a reducir sus costos operativos a largo plazo.
