¿Por qué usar una CDN de imágenes?
Las redes de distribución de contenidos de imágenes (CDN) son excelentes para optimizar imágenes. Cambiar a una CDN de imágenes puede generar ahorros entre el 40% y el 80% en el tamaño del archivo de imagen. En teoría, es posible obtener los mismos resultados usando solo secuencias de comandos de compilación, pero es poco frecuente en la práctica.
¿Qué es una CDN de imágenes?
Las CDN de imágenes se especializan en la transformación, la optimización y la entrega de imágenes. También puedes considerarlas como APIs para acceder a las imágenes que se usan en tu sitio y manipularlas. En el caso de las imágenes cargadas desde una CDN de imágenes, la URL de una imagen indica no solo qué imagen cargar, sino también parámetros como el tamaño, el formato y la calidad. Esto facilita la creación de variaciones de una imagen para diferentes casos de uso.
Las CDN de imágenes son diferentes de las secuencias de comandos de optimización de imágenes en el tiempo de compilación, ya que crean versiones nuevas de imágenes a medida que son necesarias. Como resultado, las CDN suelen ser más adecuadas que las secuencias de comandos de compilación para crear imágenes muy personalizadas para cada cliente.
Cómo utilizan las CDN de imágenes las URLs para indicar las opciones de optimización
Las URLs de imágenes que usan las CDN de imágenes transmiten información importante sobre una imagen y las transformaciones y optimizaciones que se le deben aplicar. Los formatos de las URLs varían según la CDN de imágenes, pero, en términos generales, todos tienen características similares. Veamos algunas de las funciones más comunes.
Origen
Una CDN de imágenes puede alojarse en tu propio dominio o en el dominio de la CDN de imágenes. Las CDN de imágenes de terceros suelen ofrecer la opción de usar un dominio personalizado por una tarifa. Si usas tu propio dominio, será más fácil cambiar las CDN de imágenes en el futuro, ya que no será necesario que realices ningún cambio en la URL.
En el ejemplo anterior, se usa el dominio de la CDN de la imagen (“example-cdn.com”) con un subdominio personalizado, en lugar de un dominio personalizado.
De imagen
Por lo general, las CDN de imágenes se pueden configurar para que recuperen automáticamente imágenes de sus ubicaciones existentes cuando las necesites. A menudo, esta función se logra incluyendo la URL completa de la imagen existente en la URL de la imagen generada por la CDN de imágenes. Por ejemplo, es posible que veas una URL como la siguiente: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto. Esta URL recuperará y optimizará la imagen que existe en https://flowers.com/daisy.jpg.
Otra forma ampliamente admitida de subir imágenes a una CDN de imágenes es enviarlas a través de una solicitud HTTP POST a la API de la CDN de imágenes.
Llave de seguridad
Una llave de seguridad impide que otras personas creen versiones nuevas de tus imágenes. Si se habilita esta función, cada versión nueva de una imagen requerirá una llave de seguridad única. Si alguien intenta cambiar los parámetros de la URL de la imagen, pero no proporciona una llave de seguridad válida, no podrá crear una versión nueva. Tu CDN de imágenes se encargará de los detalles para generar las llaves de seguridad y hacerles un seguimiento.
Transformaciones
Las CDN de imágenes ofrecen decenas, y en algunos casos cientos, de transformaciones de imágenes diferentes. Estas transformaciones se especifican a través de la string de URL y no hay restricciones para usar varias transformaciones al mismo tiempo. En el contexto del rendimiento web, las transformaciones de imagen más importantes son el tamaño, la densidad de píxeles, el formato y la compresión. Estas transformaciones son la razón por la que cambiar a una CDN de imágenes suele generar una reducción significativa en el tamaño de la imagen.
Suele haber una mejor configuración objetiva para las transformaciones de rendimiento, por lo que algunas CDN de imágenes admiten un modo “automático” para estas transformaciones. Por ejemplo, en lugar de especificar que las imágenes se transformarán al formato WebP, puedes permitir que la CDN seleccione y entregue automáticamente el formato óptimo. Entre los indicadores que una CDN de imágenes puede utilizar para determinar la mejor manera de transformar una imagen, se incluyen los siguientes:
- Sugerencias de clientes (por ejemplo, ancho de viewport, DPR y ancho de la imagen)
- El encabezado
Save-Data - El encabezado de la solicitud User-Agent
- La API de Network Information
Por ejemplo, la CDN de imágenes podría entregar AVIF a un navegador Chrome, WebP a un navegador Edge y JPEG a un navegador muy antiguo. Las configuraciones automáticas son populares porque te permiten aprovechar la experiencia significativa de las CDN de imágenes para optimizar imágenes sin la necesidad de realizar cambios en el código para adoptar nuevas tecnologías una vez que sean compatibles con la CDN de imágenes.
Tipos de CDN de imágenes
Las CDN de imágenes se pueden dividir en dos categorías: autoadministradas y administradas por terceros.
CDN de imágenes autoadministradas
Las CDN autoadministradas pueden ser una buena opción para los sitios con personal de ingeniería que se sienta cómodo manteniendo su propia infraestructura.
- Thumbor es la CDN de imágenes autoadministrada más popular. Si bien es de código abierto y de uso gratuito, generalmente tiene menos funciones que la mayoría de las CDN comerciales, y su documentación es un poco limitada. Wikipedia, Square y 99designs son tres sitios que utilizan Thumbor. Consulta la publicación Cómo instalar la CDN de imágenes de Thumbor para obtener instrucciones sobre cómo configurarla.
- Imaginario
- Imagor
CDN de imágenes de terceros
Las CDN de imágenes de terceros proporcionan CDN de imágenes como servicio. Así como los proveedores de la nube proporcionan servidores y otra infraestructura por una tarifa adicional, las CDN de imágenes ofrecen optimización y entrega de imágenes por una tarifa. Debido a que las CDN de imágenes de terceros mantienen la tecnología subyacente, comenzar es bastante simple y, por lo general, se puede realizar en 10 a 15 minutos, aunque la migración completa de un sitio grande podría demorar mucho más. Las CDN de imágenes de terceros suelen tener precios según los niveles de uso. La mayoría de las CDN de imágenes proporcionan un nivel gratuito o una prueba gratuita para darte la oportunidad de probar el producto.
Elige una CDN de imágenes
Hay muchas opciones buenas para las CDN de imágenes. Algunas tendrán más funciones que otras, pero es probable que todas te ayuden a ahorrar bytes en tus imágenes y, por lo tanto, cargar tus páginas más rápido. Además de los conjuntos de atributos, otros factores que se deben considerar a la hora de elegir una CDN de imágenes son el costo, la asistencia, la documentación y la facilidad de configuración o migración.
También puede ser útil probarlas tú mismo antes de tomar una decisión. A continuación, encontrarás codelabs con instrucciones para comenzar a usar rápidamente varias CDN de imágenes.
Efectos en el procesamiento de imagen con contenido más grande (LCP)
Las imágenes son una parte vital de la experiencia del usuario en muchos sitios web y, por lo tanto, influyen en el rendimiento de los sitios cuando se trata de la métrica Largest Contentful Paint. A continuación, se incluyen algunos aspectos que debes tener en cuenta si decides usar una CDN de imágenes:
- Las imágenes entregadas desde CDN pueden provenir de un servidor de origen cruzado, lo que implica un tiempo adicional de configuración de la conexión. Cuando sea posible, intenta usar una CDN de imágenes que funcione como proxy a través del origen principal, de modo que no agregues orígenes adicionales para que el navegador se conecte. Esto tiene el mismo efecto que las imágenes que se alojan automáticamente en el origen principal.
- Te recomendamos que uses un valor del atributo
fetchpriorityde"high"en el elemento de imagen LCP para que el navegador pueda comenzar a cargar esa imagen lo antes posible. - Si una imagen no es detectable de inmediato en el HTML inicial, considera usar una sugerencia
rel=preloadpara la imagen candidata para LCP, de modo que el navegador pueda cargar esa imagen con anticipación. - Si no es posible establecer una conexión proxy a través de tu origen y no se sabrá la imagen exacta que se cargará hasta más adelante durante la carga de la página, debes configurar una conexión a la CDN de imágenes de origen cruzado lo antes posible para acortar la fase de carga de recursos de lo que podría ser la imagen candidata para LCP de tu página.
Las CDN de imágenes son herramientas indispensables que eliminan el trabajo repetitivo de optimizar las imágenes de forma manual, por lo que debes considerarlas. Sin embargo, como siempre, hay compensaciones que considerar. Debes estar atento a las imágenes candidatas para LCP de tu sitio web y agregar sugerencias según corresponda para mitigar cualquier latencia adicional a esas solicitudes clave.