Was ist die Zwischenspeicherung von Bildern?

Bei der Zwischenspeicherung von Bildern werden abgerufene oder erzeugte Bildantworten gespeichert, damit spätere Anfragen sie wiederverwenden können, meist in einem Browser oder an einem CDN-Edge nahe dem Betrachter. Eine wiederholte Anfrage vermeidet dann die Übertragung vom Origin-Server oder die Transformationsarbeit, solange der Eintrag weder verdrängt noch invalidiert wurde und seine Aktualitätsrichtlinie die Wiederverwendung weiterhin erlaubt.

So funktioniert die Zwischenspeicherung von Bildern

Bilder können in einem Browser, einer Anwendung, einem Transformationsdienst, einem CDN oder auf mehreren Ebenen gleichzeitig zwischengespeichert werden. Das wiederverwendbare Objekt kann eine Originaldatei oder eine abgeleitete Bildvariante sein, die anhand von Abmessungen, Zuschnitt, Pixeldichte, Qualität und ausgehandeltem Format ausgewählt wird. Ein klar definierter Cache-Schlüssel mit einer Aktualitätsrichtlinie ermöglicht identischen Transformationsanfragen, dasselbe Ergebnis zu nutzen. Validierung oder Invalidierung stellen dabei sicher, dass Änderungen an der Quelldatei für dieses Ergebnis berücksichtigt werden.

Wichtige Fakten

  1. Was gehört in den Cache-Schlüssel? Jeder Anfragewert, der die Antwort verändert, und keiner, der sie nicht verändert. Bei einem Transformationsendpunkt sind das mindestens alle Eingaben, die die ausgegebenen Bytes verändern: Werden Zuschnittmodus, Fokuspunkt, Ausrichtung oder Qualität weggelassen, kann eine gültige, aber falsche Bildvariante zurückgegeben werden. Werte ohne Einfluss auf die Antwort erzeugen dagegen doppelte Cache-Einträge und senken die Trefferquote. Prüfen Sie, wo Ihre Parameter übermittelt werden, denn die CDN-Standardeinstellungen unterscheiden sich: Der Standard-Cache-Schlüssel von Amazon CloudFront besteht aus dem Domainnamen der Distribution und dem URL-Pfad. Daher nutzen ?w=300 und ?w=600 dasselbe zwischengespeicherte Objekt, bis eine Cache-Richtlinie den Query-String zum Schlüssel hinzufügt. Der Standardschlüssel von Cloudflare enthält den vollständigen Query-String. Backend-Buckets von Google Cloud CDN berücksichtigen standardmäßig nur Anfrageparameter, die Cloud Storage bekannt sind; weitere werden über eine Einschlussliste hinzugefügt.
  2. Bei der Formataushandlung anhand von Accept muss jeder Cache seine Einträge danach aufteilen. Wenn eine URL je nach Header Accept der Anfrage AVIF, WebP oder JPEG zurückgibt, senden Sie Vary: Accept, damit jeder Cache auf dem Weg weiß, dass die Antwort von diesem Header abhängt. Vergewissern Sie sich außerdem, dass Ihr CDN die Formate tatsächlich getrennt hält, entweder durch seine Verarbeitung von Vary oder durch einen expliziten Formatschlüssel. Andernfalls kann ein Cache einem Client ein Encoding ausliefern, das für einen anderen Client gewählt wurde. Ein Schlüssel allein auf CDN-Seite informiert nachgelagerte Caches nicht. Die Unterstützung ist unterschiedlich. Cloudflare berücksichtigt Vary standardmäßig nur für Accept-Encoding und bietet eine separate Einstellung Vary for Images an. Google Cloud CDN berücksichtigt Vary: Accept und hält für jeden unterschiedlichen Wert von Accept einen eigenen Eintrag vor. Es erlaubt jedoch nicht, Accept als Header für den Cache-Schlüssel zu konfigurieren, da dieser so viele Werte hat. Das Format in der URL vermeidet diese Abhängigkeit. Der Browser kann dann beispielsweise zwischen den Quellen eines Elements vom Typ picture wählen, die jeweils type angeben.
  3. Wird ein Original unter demselben Pfad ersetzt, ändert das keine URL seiner abgeleiteten Varianten. Jeder Cache, der eine davon enthält, kann sie daher weiter ausliefern, bis der Eintrag gezielt entfernt wird oder abläuft und revalidiert wird. Eine Richtlinie zur Auslieferung veralteter Inhalte wie stale-while-revalidate verlängert diesen Zeitraum zusätzlich. Ob das Entfernen des Originals aus dem Cache auch dessen Varianten entfernt, hängt vom Anbieter ab: Fastly Image Optimizer entfernt das Original und alle Varianten mit einer Anfrage. Bei den Bildtransformationen von Cloudflare werden die optimierten Versionen eines Bildes entfernt, wenn die URL des Originals aus dem Cache entfernt wird, und nicht einzeln. Werden abgeleitete Varianten ohne eine solche Verknüpfung unter eigenständigen URLs zwischengespeichert, nutzen Sie die vom Anbieter unterstützte Entfernung anhand von Tags, Präfixen oder expliziten URLs. Das Entfernen aus einem CDN-Cache erreicht keine Browser-Caches. Eine neue URL für eine abgeleitete Variante umgeht jeden Cache, auch den des Browsers: Nehmen Sie eine Version oder einen Inhalts-Hash der Quelle in den Pfad oder in einen Anfrageparameter auf, der Teil des Cache-Schlüssels ist, und lassen Sie Seiten auf die neue URL verweisen. Wenn die Transformationsschicht wie bei Cloudflare auch das Original zwischenspeichert, entfernen Sie auch die Quelle aus dem Cache oder versionieren Sie sie. Andernfalls kann die neue Variante aus dem alten Bild erzeugt werden.
  4. Eine zwischengespeicherte Variante ist keine dauerhaft gespeicherte Datei. Ein Browser-Cache bedient nur denselben Nutzer erneut. Ein Transformationsdienst, der keine Kopie seiner Ausgabe behält, ist daher auf einen vorgeschalteten gemeinsam genutzten Cache angewiesen, meist ein CDN, damit die Verarbeitung für weitere Betrachter entfällt. Ein CDN kann einen Eintrag vor Ablauf seiner Gültigkeit verdrängen, um Platz für andere Inhalte zu schaffen. Außerdem füllt jeder Edge-Standort seinen eigenen Cache. Der Origin-Server oder Transformationsdienst muss deshalb jede Variante jederzeit erneut erzeugen können, und das Original muss verfügbar bleiben. Bei einer Anfrage, die keine Cache-Ebene beantworten kann, fallen die Kosten für Abruf und Transformation erneut an. Jede Variante ist zudem ein eigener Eintrag: Cloudflare speichert beispielsweise jede eindeutige Kombination aus Quellbild und Parametern separat. Eine vorgelagerte Cache-Ebene kann dies abfedern, sofern das CDN eine solche bietet. Fastly Image Optimizer speichert das transformierte Bild sowohl in seinem Shield-Cache als auch am Edge.

Wann die Zwischenspeicherung von Bildern wichtig ist

Speichern Sie transformierte Varianten zwischen, um bei wiederholt angefragten Abmessungen und Formaten Latenz, Verarbeitungslast und Bandbreitenverbrauch zu senken. Nehmen Sie die Transformationseingaben in den Cache-Schlüssel auf, sonst wird möglicherweise eine Variante für eine andere Anfrage ausgeliefert.

So hilft Transloadit bei der Zwischenspeicherung von Bildern

Transloadits Smart CDN ist eine Schicht zur Bildtransformation mit integrierter Zwischenspeicherung dieser Art. Eine URL für tlcdn.com benennt den Workspace, das Template, den Pfad der Quelldatei und die Transformationsparameter. Bei einem Cache-Miss wird die Assembly des Templates ausgeführt und das Ergebnis zwischengespeichert. Bei einem Cache-Treffer antwortet der Edge, ohne sie erneut auszuführen. Jede Parameterauswahl ergibt eine andere URL und damit eine separat zwischengespeicherte Bildvariante. Der Robot /file/serve legt fest, wie lange Browser und CDN ein Ergebnis behalten.

Smart CDN ist als Schicht für Transformation und Auslieferung dokumentiert, nicht als Speicher: Behalten Sie die Originale in Ihrem eigenen Speicher. Die verlinkten Seiten beschreiben weder einen Vorgang zum Entfernen von Cache-Einträgen noch, was mit einem zwischengespeicherten Ergebnis passiert, wenn ein Original unter unverändertem Pfad ersetzt wird. Testen Sie diesen Fall in Ihrem eigenen Workspace, bevor Sie sich darauf verlassen.

Entdecken Sie Transloadits Möglichkeiten zur Auslieferung

Quellen

Machen Sie aus Medienwissen eine funktionierende Pipeline

Verbinden Sie Uploads, Verarbeitung, KI, Storage und Auslieferung über eine deklarative API – um Encoding-Stack, Skalierung und ständig wechselnde Formate müssen Sie sich nicht selbst kümmern.

Transloadit kostenlos ausprobieren