Cómo servir imágenes responsivas desde una sola URL

Servir imágenes responsivas consiste principalmente en decidir dónde reside la lista de variantes. Generar todos los tamaños con antelación vincula la factura de almacenamiento con la cantidad de puntos de quiebre, mientras que derivar tamaños bajo demanda traslada el costo a la primera solicitud de cada variante y coloca una caché delante de todas las solicitudes posteriores.

Lo más importante

• AVIF y WebP pueden seleccionarse a partir del encabezado Accept del navegador mediante la variable ${browser.wanted_image_format}.
• Restringe los anchos que una URL puede solicitar, porque cada combinación diferente requiere una codificación independiente.
• Una URL firmada vence, y el tiempo restante de esa firma también limita durante cuánto tiempo el resultado puede permanecer en caché.

{
  "steps": {
    "imported": {
      "robot": "/s3/import",
      "credentials": "my_s3_credentials",
      "path": "/images/${fields.input}"
    },
    "resized": {
      "use": "imported",
      "robot": "/image/resize",
      "resize_strategy": "fit",
      "width": "${fields.w}"
    },
    "served": {
      "use": "resized",
      "robot": "/file/serve",
      "cache_duration": 604800
    }
  }
}

import { Transloadit } from 'transloadit'

const transloadit = new Transloadit({
  authKey: process.env.TL_KEY,
  authSecret: process.env.TL_SECRET,
})

const url = transloadit.getSignedSmartCDNUrl({
  workspace: 'my-workspace',
  template: 'responsive-image',
  input: 'canoe.jpg',
  urlParams: { w: 640 },
})

{
  "steps": {
    "resized": {
      "use": ":original",
      "robot": "/image/resize",
      "width": 800,
      "format": "${browser.wanted_image_format === 'jpg' ? null : browser.wanted_image_format}"
    },
    "served": {
      "use": "resized",
      "robot": "/file/serve"
    }
  }
}

Detalles técnicos que conviene conocer

• Una URL de Smart CDN se compone de un subdominio de Workspace en tlcdn.com seguido del nombre del Template y la ruta del archivo; sus parámetros de consulta llegan al Template como Assembly Variables, por ejemplo, ${fields.w}.
• La respuesta servida indica a los navegadores que almacenen en caché durante 72 horas y a las CDN durante 24 horas de forma predeterminada, y el parámetro cache_duration de /file/serve sobrescribe ambos valores de una sola vez.
• /file/serve solo genera un cargo cuando la CDN no tiene una copia en caché y solicita que se vuelva a producir el contenido, lo que vincula el costo de codificación con la tasa de aciertos de caché y no con el tráfico.
• La entrega global está a cargo de /tlcdn/deliver, que está implícito en el dominio tlcdn.com en lugar de estar escrito en las Assembly Instructions, y factura el ancho de banda con un cargo mínimo de 102.400 bytes.
• La firma es un HMAC SHA256 calculado sobre el Workspace, el nombre del Template, la ruta del archivo y los parámetros de consulta ordenados de forma ascendente según sus claves; se envía como un parámetro sig con el prefijo sha256 seguido de dos puntos.
• El parámetro exp es una marca de tiempo UNIX en milisegundos y, dado que la duración efectiva en caché de una respuesta firmada está limitada por el tiempo restante de la firma, su vencimiento es tanto una decisión de caché como de seguridad.
• La Assembly Variable ${browser.wanted_image_format} se resuelve como avif cuando AVIF se acepta explícitamente, como webp cuando WebP es el mejor formato moderno aceptado explícitamente y como jpg cuando el encabezado Accept está ausente o solo contiene comodines, respetando las ponderaciones de calidad.
• Un rango de medios comodín deliberadamente no hace que un cliente use un formato moderno, lo que mantiene las solicitudes de curl, SDK y servidor a servidor en el valor jpg; en cambio, asignar ese valor a null hace que /image/resize conserve el formato de entrada.
• Las respuestas de Smart CDN incluyen el encabezado Vary: Accept, por lo que las cachés mantienen una entrada separada por cada formato negociado y la cantidad de formatos en uso multiplica la cantidad de variantes almacenadas en caché.

Un enfoque práctico

Cuándo resulta útil Transloadit

Usa un Template que importe el original desde tu propio almacenamiento, lo transforme con /image/resize y termine en /file/serve. Solicítalo mediante una URL de tlcdn.com cuyos parámetros de consulta proporcionen las Assembly Variables que lee el Template.

Límite de la arquitectura

La negociación de formatos se ofrece al Template en lugar de aplicarse automáticamente, por lo que un Template que nunca lea ${browser.wanted_image_format} seguirá sirviendo exactamente lo mismo que antes. La variable también se resuelve como jpg cuando faltan los encabezados Accept o estos solo contienen comodines. Esto describe al cliente, no al archivo, por lo que pasar ese respaldo directamente a un parámetro de formato elimina la transparencia y la animación en todas las solicitudes que no provienen de navegadores.