Cloudinary: cómo optimizar el tiempo de carga de tus imágenes

Todo el mundo quiere un acceso a Internet más rápido. Pero la velocidad tiene más que ver con el ancho de banda entregado por los ISP, las compañías de cable y los operadores móviles. Los desarrolladores y diseñadores web también juegan un papel importante para garantizar que haya un retraso mínimo cuando alguien visita sus sitios web. El creciente número de imágenes, videos y gráficos en los sitios web de hoy en día son los principales factores que contribuyen a la lentitud de los tiempos de carga de la web. Y, dado que los desarrolladores utilizan cada vez más este tipo de medios, es importante que aprendan a administrar imágenes y videos de manera efectiva para mejorar el rendimiento y la experiencia del usuario. La solución de optimización y administración de imágenes de Cloudinary alivia estos problemas, ayudando a los desarrolladores a crear y entregar imágenes de la manera más eficiente posible, optimizando el tiempo de carga del sitio web. En este artículo, examinaremos las formas en que puede aprovechar Cloudinary para acelerar el rendimiento de sus sitios.

Imagen Servicio en la nube Cloudinary

Elija un formato de imagen eficiente

Una de las primeras decisiones que tendrá que tomar es qué formato de imagen se adapta mejor al diseño de su sitio. Además de JPEG, PNG y GIF, también puede elegir entre formatos como WebP (compatible con Google para los navegadores Chrome) y JPEG-XR (aprovechado por Microsoft para los navegadores Internet Explorer y Edge). En general, los desarrolladores usan JPEG para imágenes fotográficas de gran formato, mientras que PNG o GIF se usan para imágenes de formato pequeño y más esquemáticas. La mayoría de los desarrolladores no han adoptado estos formatos modernos y cómo pueden ayudar a optimizar el rendimiento del sitio.

Elección rápida de formatos de imagen

nublado le permite transformar rápidamente las imágenes cargadas en cualquier formato. Puede convertir imágenes a los formatos modernos WebP y JPEG-XR, al mismo tiempo que ajusta la calidad de compresión para equilibrar los formatos. Cloudinary también ayuda a detectar el navegador específico que accede a cada imagen y entrega la versión óptima de la imagen a cada navegador, para que pueda lograr una calidad visual óptima con un tamaño de archivo mínimo.

Definir un tamaño apropiado

Sin duda, su sitio web se ve en muchos dispositivos diferentes, desde computadoras de escritorio y portátiles hasta teléfonos inteligentes y tabletas, y está desarrollando un diseño receptivo para garantizar que su sitio pueda escalar para adaptarse a cada dispositivo. A menudo, los desarrolladores ofrecen las mismas imágenes en todos los dispositivos y resoluciones, utilizando el cambio de tamaño del lado del cliente para las imágenes. Las imágenes pueden verse muy bien, pero los visitantes pierden el tiempo cargando imágenes innecesariamente grandes en sus dispositivos y usted paga por el uso redundante de ancho de banda. Esto es particularmente injusto para los usuarios de 3G y roaming, que deben pagar más para descargar las imágenes más grandes de lo necesario. Para evitar estos problemas, debe identificar los dispositivos móviles y la resolución de los visitantes mediante su agente de usuario y, opcionalmente, un código Javascript adicional del lado del cliente.

Escalado simple a través de URL

Gracias a «” y el atributo “srcset”, HTML5 le brinda la opción de abordar diferentes diseños o tamaños de visualización y ventana, así como distribuir archivos individuales. Luego, Cloudinary ayuda a escalar fácilmente sus imágenes para que se ajusten a cualquier tamaño o resolución de dispositivo.

Tenga en cuenta la densidad de píxeles

Los dispositivos móviles y las computadoras portátiles de hoy en día tienen una alta proporción de píxeles del dispositivo (DPR). Sin duda, desea que su sitio se vea genial en estos dispositivos. Pero puede terminar entregando imágenes de mayor resolución a todos los usuarios, incluso a aquellos con pantallas normales (no Retina). Para aquellos usuarios con pantallas normales, la descarga de estas imágenes de doble resolución resulta en una pérdida de tiempo, esperando que se carguen las páginas y aumenta significativamente la cantidad y el costo del ancho de banda.

Definición de la densidad de doble píxel a través del parámetro de URL «dpr_2.0».

La combinación de diseño web receptivo y diferentes densidades de píxeles a menudo da como resultado una gran cantidad de archivos de imágenes diferentes que deben proporcionarse. Cloudinary le permite crear diferentes resoluciones para cada valor de DPR y luego detectar automáticamente el valor de DPR de la página web en el navegador del usuario actual. Esta característica le permitirá entregar imágenes regulares a usuarios con pantallas regulares e imágenes de resolución 2x ​​a usuarios con dispositivos de pantalla retina.

Almacenar imágenes en caché correctamente

Con la configuración de almacenamiento en caché adecuada, evita que las imágenes cargadas tengan que cargarse nuevamente. A través del encabezado «Control de caché», debe establecer el período más largo posible durante el cual un archivo de imagen se almacenará en caché en el navegador. Cloudinary predefine un valor que equivale a unos 30 días.

Cache-Control: public, max-age=2591907

Si el archivo de imagen cambia dentro del período de almacenamiento en caché, debe asegurarse de notificar al navegador de la modificación, utilizando el llamado «ETag». Este campo de encabezado transferirá un valor hash que cambia tan pronto como cambia el archivo en el servidor. Como el «ETag» siempre se activa, incluso dentro del período de almacenamiento en caché, el navegador reconocerá que el archivo en el servidor ha cambiado debido al valor hash alterado y lo descargará.

ETag: "07c35c9716cf1702b22cda61526a0c5a"

Cloudinary crea un «ETag» para cada recurso, creando una colaboración óptima con «Cache-Control», evitando descargas redundantes.

Encabezado «Cache-Control» y «ETag»

Usa sprites y evita demasiadas solicitudes

El tamaño de la imagen no es lo único que afecta el rendimiento del sitio web. Cuanto mayor sea la cantidad de archivos que deben descargarse, más lenta será la velocidad del sitio. Cada archivo y cada solicitud lleva tiempo y prolonga el tiempo de carga de la página, por lo que, cuando se usan muchas imágenes pequeñas, la mejor práctica es incluirlas todas en un solo archivo de imagen. Por ejemplo, puede colocar todos los logotipos utilizados en una página en un archivo PNG y crear un sprite CSS. A continuación, el sprite CSS se usa para mostrar solo un recorte de un archivo de imagen.

Creación Rápida de Sprites

Con Cloudinary, crear sprites CSS es rápido y fácil. Simplemente puede cargar todos los logotipos o archivos de imágenes que desee combinar en un sprite y asignarles una etiqueta idéntica, como «logotipo», a cada uno de ellos. Luego puede llamar a la URL: «http://res.cloudinary.com/demo/image/sprite/logo.png». La etiqueta asignada se utilizará como nombre de archivo y el final del archivo será el formato de imagen elegido. Cloudinary crea automáticamente un archivo de imagen que contiene todos los archivos cargados con la misma etiqueta. Con la URL, puede recibir el archivo CSS adecuado en el que se define el recorte de imagen respectivo para todos los logotipos.

Utilice una red de entrega de contenido

Además de la optimización y compresión de imágenes, el almacenamiento en caché adecuado y la prevención de demasiadas solicitudes, hay otro aspecto crucial que puede provocar tiempos de carga prolongados: el propio servidor. Los proveedores estándar generalmente solo tienen una ubicación de servidor y no están preparados para la entrega rápida de grandes cantidades de datos a ubicaciones en todo el mundo. Sin embargo, las CDN de redes de entrega de contenido suelen tener servidores desplegados estratégicamente en todo el mundo para acortar los tiempos de entrega de contenido. Las CDN permiten que las imágenes se sirvan más rápidamente a los usuarios y reducen la probabilidad de bloqueos, mejoran el rendimiento de SEO y mejoran la experiencia del usuario. Cuando elija una CDN, deberá considerar su nivel de cobertura global, la tasa de almacenamiento en caché, la capacidad de ejecutar operaciones lógicas en el perímetro, los tiempos de respuesta promedio y otras métricas, como los tiempos de invalidación promedio.

Las imágenes de Cloudinary se entregan a través de múltiples CDN en todo el mundo, incluido Akamai, lo que garantiza que las imágenes se transfieran rápidamente, donde sea que se necesiten.

Conclusión

Si desea que su sitio web sea rápido, para que los usuarios estén satisfechos con el rendimiento y el uso de ancho de banda y los costos se minimicen, debe administrar y optimizar mejor las imágenes y los videos en su sitio. Hay muchos factores a considerar, como hemos descrito anteriormente. Cloudinary puede ayudar en una variedad de aspectos, proporcionando las herramientas para automatizar el proceso de gestión y transformación de imágenes, al tiempo que ofrece un rendimiento óptimo del sitio web. Para obtener más información, visite www.cloudinary.com.

(dpe)

Esta publicación está patrocinada por Cloudinary.