Las redes de distribución de contenidos (CDN) de imágenes son excelentes para optimizar imágenes para la Web. Cambiar tu sitio web a una CDN de imágenes puede generar un ahorro del 40% al 80% en el tamaño del archivo de imagen y, en la mayoría de los casos, puede optimizar tus imágenes mejor que una secuencia de comandos de optimización de imágenes en el momento de la compilación.
¿Qué es una CDN de imágenes?
Las CDN de imágenes se especializan en transformar, optimizar y entregar 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 te permite crear variaciones de una imagen para diferentes casos de uso.
Las CDN de imágenes se diferencian de las secuencias de comandos de optimización de imágenes en el momento de la compilación en que crean versiones nuevas de las imágenes a medida que se necesitan. Como resultado, las CDN suelen ser más adecuadas para crear imágenes muy personalizadas para clientes individuales que las secuencias de comandos de compilación.
Cómo las CDN de imágenes usan 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 deben aplicar a ella. Los formatos de URL varían según la CDN de imágenes que uses, pero, en un nivel alto, todos tienen características similares. Estas son algunas de las funciones más comunes.
Origen
Una CDN de imágenes puede alojarse en tu propio dominio o en el dominio de tu CDN de imágenes. Las CDN de imágenes de terceros suelen ofrecer la opción de usar un dominio personalizado por una tarifa. Usar tu propio dominio facilita el cambio de CDN de imágenes más adelante, ya que no se necesitarán cambios de URL.
En el ejemplo anterior, se usa el dominio de la CDN de imágenes ("example-cdn.com") con un subdominio personalizado, en lugar de un dominio personalizado.
Imagen
Por lo general, las CDN de imágenes se pueden configurar para recuperar automáticamente las imágenes de sus
ubicaciones existentes cuando se necesitan. Esta capacidad suele lograrse incluyendo la URL completa de la imagen existente dentro de la URL de la imagen generada por la CDN de imágenes. Por ejemplo, es posible que veas una URL como
esta: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto.
Esta URL recuperaría y optimizaría la imagen que existe en https://flowers.com/daisy.jpg.
Es posible que el formato de archivo solicitado (JPG, en el ejemplo) no sea el mismo que el formato de archivo de imagen que se muestra (WebP, en el ejemplo). El encabezado HTTP content-type
le indica al navegador en qué formato está la URL para que pueda procesarla
correctamente. Esto puede causar confusión si el archivo se guarda en el disco y lo usa
otro programa que espera que el formato coincida con la extensión de archivo.
Otra forma ampliamente admitida de subir imágenes a una CDN de imágenes es enviarlas en una solicitud POST HTTP 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. Con esta función habilitada, cada versión nueva de una imagen requiere una clave de seguridad única.
Si alguien intenta cambiar los parámetros de la URL de la imagen, pero no proporciona una clave de seguridad válida, no podrá crear una versión nueva. La CDN de imágenes se encarga de los detalles de generar y hacer un seguimiento de las claves de seguridad por ti.
Transformaciones
Las CDN de imágenes ofrecen decenas y, en algunos casos, cientos de transformaciones de imágenes diferentes. Estas transformaciones se especifican en la cadena de URL y no hay restricciones para usar varias transformaciones al mismo tiempo. Para el 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 el motivo por el que, por lo general, cambiar a una CDN de imágenes hace que los archivos de imagen de tu sitio sean más pequeños.
Debido a que, por lo general, existe una configuración objetivamente mejor para las transformaciones de rendimiento, algunas CDN de imágenes admiten un modo "automático" para estas transformaciones. Por ejemplo, en lugar de especificar que las imágenes se transformen al formato WebP, puedes permitir que la CDN seleccione y entregue automáticamente el formato óptimo. Una CDN de imágenes puede determinar la mejor manera de transformar una imagen con los siguientes indicadores, entre otros:
- Client hints (por ejemplo, ancho del viewport, DPR y ancho de la imagen)
- El encabezado
Save-Data - El encabezado de la solicitud usuario-agente
- La API de Network Information
Por ejemplo, la CDN de imágenes puede entregar AVIF a un navegador Chrome, WebP a un navegador Edge y JPEG a un navegador muy antiguo. La configuración automática es popular porque te permite aprovechar la experiencia de las CDN de imágenes para optimizarlas sin necesidad de cambiar el código para adoptar nuevas tecnologías cuando la CDN de imágenes comience a admitirlas.
Tipos de CDN de imágenes
Existen dos categorías principales de CDN de imágenes: autoadministradas y administradas por terceros.
CDNs 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. Es de código abierto y de uso gratuito, pero tiene menos funciones que la mayoría de las CDN comerciales, y su documentación es un poco limitada. Entre los sitios que usan thumbor, se incluyen Wikipedia, Square y 99designs. Consulta 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. De la misma manera que los proveedores de servicios en la nube proporcionan servidores y otra infraestructura por una tarifa, las CDN de imágenes proporcionan 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, por lo general, puedes comenzar a usar una con bastante rapidez, aunque una migración completa para un sitio grande puede llevar más tiempo. Las CDN de imágenes de terceros suelen tener un precio basado en niveles de uso, y la mayoría de ellas proporcionan un nivel gratuito o una prueba gratuita para que pruebes su producto.
Elige una CDN de imágenes
Existen muchas opciones buenas para las CDN de imágenes. Algunas tienen más funciones que otras, pero cualquiera de ellas puede ayudarte 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 funciones, otros factores que se deben tener en cuenta cuando se elige una CDN de imágenes son el costo, la asistencia, la documentación y la facilidad de configuración o migración.
Efectos en el Largest Contentful Paint (LCP)
Las imágenes son una parte fundamental de la experiencia del usuario en muchos sitios web, por lo que son un factor importante en el Largest Contentful Paint de un sitio. A continuación, se incluyen algunos aspectos que debes tener en cuenta si decides usar una CDN de imágenes:
- Las imágenes que se entregan desde las CDN pueden provenir de un servidor de origen cruzado, lo que puede aumentar el tiempo de configuración de la conexión de tu sitio. Cuando sea posible, intenta usar una CDN de imágenes que use un proxy a través del origen principal para no agregar orígenes adicionales a los que se conecte el navegador. Esto tiene el mismo efecto que alojar imágenes de forma autónoma en el origen principal.
- Considera usar un valor de atributo
fetchpriorityde"high"en el elemento de imagen de LCP para que el navegador pueda comenzar a cargar esa imagen lo antes posible. - Si una imagen no se puede descubrir de inmediato en el HTML inicial, considera usar una sugerencia de
rel=preloadpara la imagen candidata de LCP, de modo que el navegador pueda cargarla con anticipación. - Si no puedes usar un proxy a través de tu origen y el navegador no sabrá qué imagen cargar hasta más adelante en la carga de la página, configura una conexión a la CDN de imágenes de origen cruzado lo antes posible para acortar la fase de carga de recursos para las posibles imágenes candidatas de LCP.