Responsive Bilder über eine einzige URL ausliefern

Bei der Auslieferung responsiver Bilder geht es vor allem darum, wo die Variantenliste verwaltet wird. Werden alle Größen vorab erzeugt, richten sich die Speicherkosten nach der Anzahl der Breakpoints. Werden die Größen bei Bedarf abgeleitet, entstehen die Kosten bei der ersten Anfrage jeder Variante; alle weiteren Anfragen werden aus einem vorgeschalteten Cache bedient.

Worauf es besonders ankommt

• AVIF und WebP können über die Variable ${browser.wanted_image_format} anhand des Accept-Headers des Browsers ausgewählt werden.
• Begrenzen Sie die Breiten, die über eine URL angefordert werden können, da jede einzelne Kombination ein separates Encoding auslöst.
• Eine signierte URL läuft ab. Die verbleibende Gültigkeitsdauer ihrer Signatur begrenzt zugleich, wie lange das Ergebnis cachefähig bleibt.

{
  "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"
    }
  }
}

Wissenswerte technische Details

• Eine Smart-CDN-URL hat die Form einer Workspace-Subdomain auf tlcdn.com, gefolgt vom Template-Namen und dem Dateipfad. Ihre Abfrageparameter gelangen als Assembly Variables wie ${fields.w} in das Template.
• Die ausgelieferte Antwort weist Browser standardmäßig an, Inhalte 72 Stunden und CDNs 24 Stunden lang zwischenzuspeichern. Der Parameter cache_duration für /file/serve überschreibt beide mit einer einzigen Einstellung.
• /file/serve wird nur berechnet, wenn im CDN keine Kopie im Cache vorliegt und der Inhalt erneut erzeugt werden muss. Dadurch hängen die Encoding-Kosten von der Cache-Hit-Rate statt vom Datenverkehr ab.
• Die globale Auslieferung übernimmt /tlcdn/deliver. Dies wird durch die Domain tlcdn.com vorgegeben und nicht in die Assembly Instructions geschrieben. Die Bandbreite wird mit einer Mindestberechnung von 102.400 Byte abgerechnet.
• Die Signatur ist ein HMAC SHA256 über den Workspace, den Template-Namen, den Dateipfad und die Abfrageparameter, die in aufsteigender Reihenfolge ihrer Schlüssel sortiert werden. Sie wird als Parameter sig übermittelt, dem sha256 und ein Doppelpunkt vorangestellt sind.
• Der Parameter exp ist ein UNIX-Zeitstempel in Millisekunden. Da die effektive Cache-Lebensdauer einer signierten Antwort durch die verbleibende Gültigkeitsdauer der Signatur begrenzt ist, betrifft deren Ablauf das Caching ebenso wie die Sicherheit.
• Die Assembly Variable ${browser.wanted_image_format} wird zu avif aufgelöst, wenn AVIF ausdrücklich akzeptiert wird, zu webp, wenn WebP das beste ausdrücklich akzeptierte moderne Format ist, und zu jpg, wenn der Header Accept fehlt oder nur Wildcards enthält. Qualitätsgewichtungen werden dabei berücksichtigt.
• Ein Wildcard-Medienbereich aktiviert für einen Client bewusst kein modernes Format. Dadurch bleibt für Aufrufe mit curl, über ein SDK oder zwischen Servern der Wert jpg erhalten. Wird dieser Wert stattdessen null zugeordnet, behält /image/resize das Eingabeformat bei.
• Smart-CDN-Antworten enthalten den Header Vary: Accept. Daher speichern Caches für jedes ausgehandelte Format einen separaten Eintrag, und die Anzahl der verwendeten Formate vervielfacht die Anzahl der gecachten Varianten entsprechend.

Ein praxisnaher Ansatz

Wann Transloadit hilfreich ist

Verwenden Sie ein Template, das das Original aus Ihrem eigenen Speicher importiert, es mit /image/resize transformiert und mit /file/serve endet. Fordern Sie es über eine tlcdn.com-URL an, deren Abfrageparameter die Assembly Variables bereitstellen, die das Template ausliest.

Architekturgrenze

Die Formatverhandlung wird dem Template angeboten und nicht automatisch angewendet. Ein Template, das ${browser.wanted_image_format} nie ausliest, liefert daher weiterhin genau das aus, was es zuvor ausgeliefert hat. Bei fehlenden Accept-Headern oder solchen, die nur einen Platzhalter enthalten, wird die Variable ebenfalls zu jpg aufgelöst. Dies ist eine Aussage über den Client und nicht über die Datei. Wird dieser Fallback direkt an einen Formatparameter übergeben, gehen Transparenz und Animation bei jeder Anfrage verloren, die nicht von einem Browser stammt.