Las redes de distribución de contenidos de imágenes (CDN) son excelentes para optimizar imágenes para la Web. Cambiar tu sitio web a una CDN de imágenes puede producir un ahorro entre un 40% y un 80% en tamaño de archivo de imagen y, en la mayoría de los casos, pueden optimizar mejor tus imágenes que con una secuencia de comandos de optimización de imágenes en el tiempo de 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 se 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 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 según se necesiten. Como resultado, las CDN suelen ser más adecuadas que las secuencias de comandos de compilación a fin de crear imágenes muy personalizadas para clientes individuales.
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 deben aplicar. Los formatos de URL varían según la CDN de imágenes que utilices, pero, en términos generales, 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 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 adicional. Usar tu propio dominio facilita el cambio de las CDN de imágenes más adelante, ya que no será necesario realizar cambios 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 recuperar imágenes de forma automática de sus ubicaciones existentes cuando las necesites. A menudo, esta función se logra incluyendo la URL completa de la imagen existente dentro de la URL de la imagen que generó 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.
El formato de archivo solicitado (JPG, en el ejemplo) podría no ser 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 el formato en el que se encuentra la URL para poder procesarla de forma adecuada. 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.
Otra forma admitida para subir imágenes a una CDN de imágenes es enviarlas en una solicitud HTTP POST a la API de 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 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 encarga de los detalles para generar las claves 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 en la string 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 la razón por la que cambiar a una CDN de imágenes suele reducir los archivos de imagen de tu sitio.
Debido a que, por lo general, hay una mejor configuración objetiva para las transformaciones de rendimiento, algunas CDN de imágenes admiten un modo "automático" en el caso de 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 publique 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:
- Sugerencias de cliente (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. La configuración automática es popular porque te permite aprovechar la experiencia de las CDN de imágenes para optimizar imágenes sin necesidad de cambiar tu código para adoptar tecnologías nuevas 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: las autoadministradas y las 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 sientan cómodos manteniendo su propia infraestructura.
- Thumbor es la CDN de imágenes autoadministrada más popular. Es de código abierto y gratuito, pero tiene menos funciones que la mayoría de las CDN comerciales y su documentación es un poco limitada. Algunos de los sitios que usan miniaturas son 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 los CDN de imagen de terceros mantienen la tecnología subyacente, por lo general, puedes comenzar a usar una con bastante rapidez, aunque la migración completa de un sitio grande puede llevar más tiempo. 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 que puedas probar su producto.
Elige una CDN de imágenes
Hay muchas opciones buenas para las CDN de imágenes. Algunas tienen más funciones que otras, pero todas pueden ayudarte a ahorrar bytes en las imágenes y, por lo tanto, cargar las páginas más rápido. Además de los conjuntos de atributos, otros factores que se deben considerar 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 procesamiento de imagen con contenido más grande (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 imagen que haga un 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 de
rel=preloadpara la imagen candidata para LCP, de modo que el navegador pueda cargar esa imagen con anticipación. - Si no puedes usar un proxy en el origen y el navegador no sabrá qué imagen cargar hasta más adelante cuando se cargue 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 de las posibles imágenes candidatas para LCP.