¿Qué es el almacenamiento de imágenes en caché?
El almacenamiento de imágenes en caché guarda respuestas de imágenes obtenidas o generadas para que las solicitudes posteriores puedan reutilizarlas, normalmente en un navegador o en un nodo perimetral de una CDN cercano a quien las visualiza. Así, una solicitud repetida evita la transferencia desde el origen o el trabajo de transformación mientras la entrada no se haya expulsado ni invalidado y su política de vigencia siga permitiendo su reutilización.
Cómo funciona el almacenamiento de imágenes en caché
Las imágenes pueden almacenarse en caché en un navegador, una aplicación, un servicio de transformación, una CDN o varios niveles a la vez. El objeto reutilizable puede ser un archivo original o una variante derivada seleccionada según sus dimensiones, recorte, densidad, calidad y formato negociado. Una clave y una política de vigencia bien definidas permiten que las solicitudes de transformación idénticas converjan en un único resultado, mientras que la validación o invalidación vuelve a vincular ese resultado con los cambios en el activo de origen.
Datos clave
- ¿Qué debe incluirse en la clave de caché? Cada valor de la solicitud que cambie la respuesta y ninguno que no lo haga. Para un punto de conexión de transformación, esto incluye como mínimo todas las entradas que cambian los bytes de salida: omitir el modo de recorte, el punto focal, la orientación o la calidad puede devolver una variante válida pero incorrecta, mientras que incluir valores que no afectan a la respuesta almacena duplicados y reduce la tasa de aciertos. Revisa por dónde se envían tus parámetros, porque los valores predeterminados de las CDN difieren: la clave de caché predeterminada de Amazon CloudFront consta del nombre de dominio de la distribución y la ruta de la URL, por lo que
?w=300y?w=600comparten un objeto almacenado en caché hasta que una política de caché añade la cadena de consulta; la clave predeterminada de Cloudflare incluye toda la cadena de consulta; los buckets de backend de Google Cloud CDN incluyen de forma predeterminada solo los parámetros de consulta reconocidos por Cloud Storage, y los demás se añaden mediante una lista de inclusión. - La negociación de formato basada en
Acceptrequiere que cada caché diferencie las entradas según ese encabezado. Si una URL devuelve AVIF, WebP o JPEG según el encabezadoAcceptde la solicitud, envíaVary: Acceptpara que cada caché de la ruta sepa que la respuesta depende de ese encabezado y confirma que tu CDN realmente mantiene separados los formatos, mediante su gestión deVaryo una clave de formato explícita; de lo contrario, una caché puede entregar a un cliente un encoding elegido para otro cliente. Una clave definida únicamente en la CDN no informa de nada a las cachés posteriores a esta. El soporte no es uniforme. Cloudflare no tiene en cuentaVaryde forma predeterminada, salvo paraAccept-Encoding, y ofrece una configuración independiente llamada Vary for Images. Google Cloud CDN respetaVary: Accepty mantiene una entrada independiente por cada valor distinto deAccept, pero no permite configurarAcceptcomo encabezado de la clave de caché debido a su gran cantidad de valores. Incluir el formato en la URL evita esa dependencia; el navegador puede entonces elegir, por ejemplo, entre las fuentes de un elementopicture, cada una de las cuales declara untype. - Sustituir un original en la misma ruta no cambia la URL de ninguno de sus derivados, por lo que cada caché que contenga uno puede seguir sirviéndolo hasta que se purgue la entrada, o caduque y se revalide; una política que permite servir contenido caducado, como
stale-while-revalidate, prolonga aún más ese plazo. Que la purga del original también elimine sus variantes depende del proveedor: Fastly Image Optimizer purga el original y todas sus variantes en una sola solicitud, y las transformaciones de imágenes de Cloudflare purgan las versiones optimizadas de una imagen cuando se purga la URL del original, y no de forma individual. Si los derivados se almacenan en caché con URL independientes y sin ese vínculo, utiliza la purga por etiqueta, por prefijo o por URL explícita que admita el proveedor. Una purga de la CDN no afecta a las cachés de los navegadores. Una nueva URL para el derivado evita todas las cachés, incluida la del navegador: incluye una versión o un hash del contenido del archivo de origen en la ruta, o en un parámetro de consulta que forme parte de la clave de caché, y haz que las páginas hagan referencia a la nueva URL. Si la capa de transformación también almacena el original en caché, como hace la de Cloudflare, purga también el archivo de origen o asígnale una versión; de lo contrario, el nuevo derivado puede generarse a partir de la imagen anterior. - Una variante almacenada en caché no es un archivo almacenado. La caché de un navegador solo vuelve a servir contenido al mismo usuario, por lo que un servicio de transformación que no conserva ninguna copia de su salida depende de una caché compartida situada delante de él, normalmente una CDN, para no repetir ese trabajo para otros espectadores. Una CDN puede expulsar una entrada antes de que caduque para hacer espacio para otro contenido, y cada ubicación perimetral llena su propia caché, por lo que el origen o el servicio de transformación debe poder volver a producir cualquier variante en cualquier momento y el original debe seguir disponible. Una solicitud que ningún nivel de caché pueda responder vuelve a incurrir en el costo de obtención y transformación, y cada variante es una entrada independiente: Cloudflare, por ejemplo, almacena en caché por separado cada combinación única de imagen de origen y parámetros. Un nivel de caché previo puede mitigar esto cuando la CDN dispone de uno; Fastly Image Optimizer almacena la imagen transformada en caché tanto en su nodo de protección como en los nodos perimetrales.
Cuándo es importante el almacenamiento de imágenes en caché
Almacena en caché las variantes transformadas para reducir la latencia, la carga de procesamiento y el uso de ancho de banda cuando se repiten dimensiones y formatos. Incluye las entradas de la transformación en la clave o podría servirse una variante para otra solicitud.
Cómo ayuda Transloadit con el almacenamiento de imágenes en caché
Smart CDN de Transloadit es una capa de transformación de imágenes con este almacenamiento en caché integrado. Una URL tlcdn.com identifica el Workspace, el Template, la ruta del archivo de origen y los parámetros de transformación. Si el resultado no está en caché, se ejecuta la Assembly del Template y el resultado se almacena en caché; si está, el nodo perimetral responde sin volver a ejecutarla. Cada selección de parámetros corresponde a una URL diferente y, por lo tanto, a una variante independiente almacenada en caché, y el Robot /file/serve establece durante cuánto tiempo conservan el resultado los navegadores y la CDN.
Smart CDN se documenta como una capa de transformación y entrega, no de almacenamiento: conserva los originales en tu propio almacenamiento. Las páginas enlazadas no describen ninguna operación de purga ni qué ocurre con un resultado almacenado en caché cuando se sustituye un original sin cambiar su ruta; prueba ese caso en tu propio Workspace antes de depender de ese comportamiento.
Fuentes
- RFC 9111, sección 4.1: cálculo de claves de caché con el campo de encabezado Vary
- MDN: referencia del encabezado Vary
- Amazon CloudFront: comprende la clave de caché
- Cloudflare: claves de caché (clave predeterminada y claves personalizadas)
- Cloudflare: entrega de contenido adaptado (Vary for Images)
- Google Cloud CDN: descripción general del almacenamiento en caché (claves de caché, encabezados Vary, contenido caducado y expulsión de entradas)
- Referencia de Fastly Image Optimizer: almacenamiento en caché en el nodo de protección y purga de imágenes con sus variantes
- Cloudflare Images: almacenamiento en caché y purga de imágenes optimizadas
- MDN: almacenamiento en caché HTTP (elusión de caché para imágenes y otros subrecursos)
- MDN: el elemento picture (el atributo type de sus fuentes)