Cloudflare Image Transformations - Bilder Spontan Verkleinern Und Optimieren

Wenn Cloudflare Images der Ort ist, an dem Ihre Bilder leben, dann sind Cloudflare Image Transformations der Motor, der sie schnell macht. Sie verkleinern, komprimieren und konvertieren Ihre Bilder in dem Moment, in dem sie angefordert werden, in moderne Formate, und nutzen dabei nur das Original, das Sie bereits haben. Kein Build-Schritt, keine vorab erzeugten Thumbnails, keine separaten Kopien, die Ihren Speicher verstopfen. Sie fordern die gewünschte Größe und das gewünschte Format in der URL an, und Cloudflare erzeugt es am Edge und legt es im Cache ab.

Dieser Leitfaden ist die praktische Ergänzung zu meiner Übersicht über das Hosten von Bildern auf Cloudflare. Er erklärt die zwei Möglichkeiten, Transformationen auszuführen, die wichtigen Parameter, was es 2026 kostet und wie Sie das Ganze auf WordPress und PrestaShop automatisieren.

Kurzfassung

• Transformationen verkleinern, komprimieren und konvertieren Bilder bei Bedarf aus einem einzigen Original zu WebP/AVIF
• Zwei Methoden: ein einfaches URL-Format (/cdn-cgi/image/...) und ein Cloudflare Worker für volle Kontrolle
• format=auto liefert automatisch AVIF oder WebP, je nachdem, was der Browser unterstützt
• Die Preise sind großzügig: die ersten 5.000 einzigartigen Transformationen pro Monat sind kostenlos, danach 0,50 $ pro 1.000
• Transformationen erfordern keinen Pro-Tarif mehr, eine bedeutsame Änderung gegenüber früheren Jahren
• Sie können Bilder aus Ihrem Ursprung oder aus Cloudflare R2 transformieren und alles mit meinem kostenlosen Plugin und Worker automatisieren

Wie Cloudflare Image Transformations funktionieren

Traditionell bedeutete das Ausliefern responsiver Bilder, jede Größe im Voraus zu erzeugen. Sie laden ein Foto hoch, und Ihr CMS erstellt ein Thumbnail, eine mittlere Version, eine große Version und so weiter, jeweils als separate Datei gespeichert. Das verschwendet Speicher, verlangsamt Uploads und trifft trotzdem nie ganz genau die Größe, die ein bestimmtes Gerät benötigt.

Image Transformations drehen das um. Sie speichern ein Original. Wenn der Browser eines Besuchers eine bestimmte Größe anfordert, erzeugt Cloudflare diese Größe spontan, optimiert sie und legt das Ergebnis am Edge im Cache ab. Der nächste Besucher, der dieselbe Version benötigt, erhält die Cache-Kopie sofort. Sie erzeugen oder speichern selbst nie ein Derivat, und doch erhält jedes Gerät ein Bild, das auf seinen Bildschirm und seine Formatunterstützung zugeschnitten ist.

Das Ergebnis für Ihre Besucher: ein 1 MB großes Foto kommt als 100 bis 200 KB großes AVIF an, exakt für ihren Viewport dimensioniert und von einem nahegelegenen Edge-Standort ausgeliefert.

Methode 1: Image Transformations über das URL-Format

Der einfachste Weg, ein Bild zu transformieren, besteht darin, seine URL in einen speziellen Pfad auf Ihrer eigenen Zone zu verpacken:

1https://example.com/cdn-cgi/image/<options>/<source-image-url>

Ein echtes Beispiel, das auf 800 px Breite verkleinert, die Qualität auf 75 setzt und das beste Format automatisch wählt:

1https://example.com/cdn-cgi/image/width=800,quality=75,format=auto/https://example.com/uploads/photo.jpg

Um dies zu nutzen, aktivieren Sie Transformations für Ihre Zone im Cloudflare-Dashboard (unter Images). Nach der Aktivierung kann jedes Bild dieser Zone einfach durch Konstruieren der URL transformiert werden. Es ist der schnellste Einstieg und erfordert keinen Code.

Die nützlichsten Optionen sind:

Methode 2: Image Transformations über einen Cloudflare Worker

Für echte Kontrolle transformieren Sie innerhalb eines Cloudflare Workers mithilfe der Eigenschaft cf.image bei einer fetch-Anfrage. So können Sie Logik anwenden: Maße je nach Gerät wählen, einschränken, welche Bilder transformiert werden dürfen, oder die Bildlinks einer ganzen Seite umschreiben.

 1export default {
 2  async fetch(request) {
 3    const options = {
 4      cf: {
 5        image: {
 6          width: 800,
 7          quality: 75,
 8          format: "auto",
 9          fit: "scale-down",
10        },
11      },
12    };
13
14    // The image you want to transform
15    const imageURL = "https://example.com/uploads/photo.jpg";
16    return fetch(imageURL, options);
17  },
18};

Der Worker-Ansatz treibt meine eigenen Tools an, weil er die endgültige HTML-Ausgabe einer Website umschreiben kann, einschließlich der von Themes, Plugins und sogar Inline-CSS eingefügten Bilder, die ein reiner URL-Ansatz allein nicht erreichen kann. Wenn Sie Workers grundlegender lernen möchten, sind die offiziellen Workers-Dokumente ein hervorragender Ausgangspunkt.

Bilder aus R2 oder einer entfernten Quelle transformieren

Sie sind nicht auf Bilder derselben Zone beschränkt. Transformationen können von einem entfernten Ursprung abrufen, was sie zu einem perfekten Partner für den Objektspeicher Cloudflare R2 macht. Bewahren Sie Ihre Originale in einem R2-Bucket auf, transformieren Sie sie bei der Auslieferung und zahlen Sie nichts für Egress, weil R2 keine Egress-Gebühren berechnet. Dieses spezielle Muster behandle ich ausführlich in meinem Leitfaden zum Hosten von Bildern auf Cloudflare R2 .

Wenn Sie Bilder transformieren, die nicht auf Ihrer eigenen Zone liegen, denken Sie daran, die Quelldomain in Ihren Transformationseinstellungen zu erlauben, sonst weigert sich Cloudflare, sie abzurufen.

Cloudflare Image Transformations Preise

Die Wirtschaftlichkeit ist hier freundlich, besonders für kleine und mittlere Websites. Basierend auf den offiziellen Images-Preisen für 2026:

Eine „einzigartige Transformation" ist eine bestimmte Kombination von Optionen, die in einem Monat auf ein Originalbild angewendet wird. Tausendmal dieselbe width=800,format=auto-Version eines Fotos anzufordern, zählt weiterhin als eine einzige einzigartige Transformation, weil die anderen 999 aus dem Cache geliefert werden. Deshalb bleiben die tatsächlichen Transformationszahlen selbst auf stark frequentierten Websites niedrig: Sie haben weit weniger unterschiedliche Bild-und-Größe-Kombinationen als Seitenaufrufe.

Die große Änderung, die eine Wiederholung wert ist: Transformationen lagen früher hinter einem kostenpflichtigen Pro-Tarif. Sie sind jetzt im kostenlosen Tarif verfügbar, bis zu jenem monatlichen Kontingent von 5.000. Für einen kleinen Blog oder ein Portfolio ist die spontane Bildoptimierung jetzt praktisch kostenlos.

Automatisierung auf WordPress und PrestaShop

Transformations-URLs von Hand zu konstruieren ist für ein paar Bilder in Ordnung, aber eine echte Website hat Hunderte, und sie werden dynamisch erzeugt. Das ist der schwierige Teil, und genau das lösen meine kostenlosen Tools.

• WordPress-Plugin. Mein Cloudflare Image Resizing Plugin (GitHub ) schreibt Ihre Bildlinks um, sodass sie automatisch durch Transformationen laufen.
• Cloudflare Worker. Mein Cloudflare Image Resizing Worker schreibt das endgültige HTML für vollständige Abdeckung um, einschließlich der von Plugins und Themes eingefügten Bilder und der in CSS referenzierten Bilder.

Für vollständige Anleitungen zum Kopieren und Einfügen lesen Sie Cloudflare Image Resizing für WordPress und Cloudflare Image Resizing für PrestaShop . Zwischen dem Plugin und dem Worker wird jedes Bild auf Ihrer Website optimiert, ohne dass Sie ein einziges Template anfassen.

Wenn Sie es vorziehen, Ihre Bildbibliothek direkt über das Produkt Cloudflare Images zu speichern und zu verwalten, ist Easy Cloudflare Images meine kostenlose Desktop-App zum Hochladen und Optimieren von Bildern unter Windows, macOS und Linux.

Ein schneller Vorher-Nachher-Test

Der ehrliche Weg, eine Optimierung zu beurteilen, ist, sie zu messen.

1. Wählen Sie eine bildlastige Seite und lassen Sie sie durch PageSpeed Insights laufen. Notieren Sie den Largest Contentful Paint und das gesamte Bildgewicht.
2. Aktivieren Sie Transformationen und wenden Sie width und format=auto auf die Bilder dieser Seite an (über die URL-Methode, den Worker oder mein Plugin).
3. Führen Sie den Test erneut aus. Sie sollten sehen, wie die Bilddatenmenge stark sinkt und sich der LCP verbessert, was eine durchgefallene Bewertung oft ins Grüne bringt.

Diese messbare Verbesserung bewegt in der Regel sowohl bei der Nutzererfahrung als auch beim Suchranking etwas.

Wichtigste Erkenntnisse

• Cloudflare Image Transformations erzeugen bei Bedarf optimierte, korrekt dimensionierte Bilder aus einem einzigen Original
• Die URL-Methode (/cdn-cgi/image/...) ist der schnellste Einstieg; ein Worker gibt Ihnen volle programmatische Kontrolle
• format=auto übernimmt für Sie die AVIF/WebP-Aushandlung, mit einem sicheren Fallback für ältere Browser
• Die ersten 5.000 einzigartigen Transformationen pro Monat sind kostenlos, danach 0,50 $ pro 1.000, ohne Egress-Gebühren
• Transformationen funktionieren jetzt im kostenlosen Tarif, kein Pro-Abonnement erforderlich
• Kombinieren Sie Transformationen mit R2 für eine Egress-freie Medienbibliothek und automatisieren Sie alles mit meinem Plugin und Worker

Häufig gestellte Fragen

Was ist der Unterschied zwischen Cloudflare Images und Image Transformations? Cloudflare Images ist das umfassendere Produkt, das Bilder speichert, optimiert und ausliefert. Image Transformations ist die darin enthaltene Funktion zum Verkleinern und Optimieren. Sie können Transformationen auf Bilder anwenden, die in Cloudflare Images, in R2 oder auf Ihrem eigenen Ursprung gespeichert sind, ohne sie zwingend im Images-Produkt zu speichern.

Benötige ich einen kostenpflichtigen Tarif, um Image Transformations zu nutzen? Nein, nicht mehr. Transformationen sind im kostenlosen Tarif bis zu 5.000 einzigartige Transformationen pro Monat verfügbar. Darüber hinaus zahlen Sie 0,50 $ pro 1.000, und es fallen keine Egress-Gebühren an.

Was bewirkt format=auto? Es weist Cloudflare an, den Accept-Header des Browsers zu prüfen und das effizienteste unterstützte Format auszuliefern, in der Regel AVIF oder WebP, und für Browser, die moderne Formate nicht unterstützen, auf das Originalformat (etwa JPEG oder PNG) zurückzufallen.

Kann ich Bilder transformieren, die nicht bei Cloudflare gehostet werden? Ja. Transformationen können von einem entfernten Ursprung abrufen, einschließlich eines Cloudflare-R2-Buckets oder eines externen Servers, solange Sie diese Quelle in Ihren Transformationseinstellungen erlauben.

Was zählt für die Abrechnung als einzigartige Transformation? Eine bestimmte Kombination von Optionen, die innerhalb eines Abrechnungsmonats auf ein Originalbild angewendet wird. Wiederholte Anfragen nach derselben transformierten Version werden aus dem Cache geliefert und nur einmal gezählt, was die tatsächlichen Kosten niedrig hält.

Wie wende ich das auf einer ganzen WordPress- oder PrestaShop-Website an? Nutzen Sie mein kostenloses WordPress-Plugin für eine schnelle automatisierte Einrichtung oder stellen Sie meinen Cloudflare Worker für vollständige Abdeckung bereit, der jeden Bildlink umschreibt, auch die in CSS. Beides ist in meinen Schritt-für-Schritt-Plattformanleitungen dokumentiert.