Bild mit Text erstellen: Text-Overlays mit Cloudflare Images

Bild mit Text erstellen: der kürzeste funktionierende Workflow

Am Anfang steht ein reproduzierbares Layout. Das folgende Beispiel erzeugt eine Produktkarte im Format 1200 mal 630, übernimmt die Überschrift aus ?text=, verwendet eine fest definierte Markenschrift und liefert WebP aus. Die beiden Asset-URLs unter example.com müssen durch eigene URLs ersetzt werden.

Zuerst das Images-Binding hinzufügen und Workers Cache in der Wrangler-Konfiguration aktivieren:

{
  "images": {
    "binding": "IMAGES"
  },
  "cache": {
    "enabled": true
  }
}

Anschließend kommt das Binding im Worker zum Einsatz:

const CARD_IMAGE = "https://assets.example.com/product-card.jpg";
const BRAND_FONT = "https://assets.example.com/fonts/Brand-Bold.woff2";

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const headline = (url.searchParams.get("text") || "AUTUMN DROP").trim();

    // This is a layout limit for this card, not Cloudflare's 1,000-character ceiling.
    if (!headline || [...headline].length > 120) {
      return new Response("Text must contain 1 to 120 characters", { status: 400 });
    }

    const source = await fetch(CARD_IMAGE);
    if (!source.ok || !source.body) {
      return new Response("Source image unavailable", { status: 502 });
    }

    const textLayer = env.IMAGES.text(headline, {
      font: { url: BRAND_FONT },
      size: 72,
      color: "#FFFFFF"
    });

    const result = await env.IMAGES
      .input(source.body)
      .transform({ width: 1200, height: 630, fit: "cover" })
      .draw(textLayer, { left: 72, bottom: 72 })
      .output({ format: "image/webp" });

    return result.response({
      headers: {
        "Cache-Control": "public, max-age=86400, stale-while-revalidate=604800"
      }
    });
  }
};

Der Aufruf von /card?text=Autumn%20Drop liefert ein WebP im Format 1200 mal 630, bei dem die übergebene Formulierung jeweils 72 Pixel vom linken und unteren Rand entfernt steht. Weil die Bild-URL den wechselnden Text enthält, erhält in diesem Beispiel jede Beschriftung automatisch eine eigene URL. In der Produktion sind stabile Kampagnen- oder Produkt-IDs vorzuziehen, sofern das möglich ist. Frei eingegebener Text in einem öffentlichen Query-String kann unbegrenzt viele Varianten erzeugen – ein Kosten- und Missbrauchsrisiko zugleich.

Die Origins für Quellbild und Schrift sollten fest vorgegeben oder per Allowlist beschränkt sein. Im Beispiel können Besucher kein beliebiges Abrufziel auswählen. Diese Grenze ist immer dann wichtig, wenn ein öffentlicher Worker entfernte Assets laden darf.

Was Cloudflare im Hintergrund tatsächlich macht

Beim Rastern von Text werden Buchstaben zu Pixeln. Als Denkmodell hilft eine kleine Setzmaschine: .text() druckt einen transparenten Aufkleber, .draw() legt ihn auf das Foto und .output() versiegelt beides in der fertigen Datei.

Dieses Bild erklärt zugleich die API. Der Text schwebt im Browser nicht als HTML-Element über dem Motiv. Sobald er gerendert ist, gehört er zu den Bildpixeln.

Das Basisbild bestimmt die Größe der finalen Zeichenfläche. Die Textebene wird mit den Pixelabständen top, left, bottom oder right positioniert; ohne Positionsangabe sitzt sie mittig. Für dasselbe Overlay lassen sich weder left und right noch top und bottom gleichzeitig festlegen. Die Deckkraft reicht von 0 bis 1, als Composite-Modus gilt standardmäßig over.

Mehrere .draw()-Aufrufe lassen sich verketten. Ihre Reihenfolge bestimmt die Ebenenfolge, der letzte Aufruf liegt also ganz oben. Cloudflare hat für URL-basierte Transformationen außerdem einen text-Eintrag im cf.image.draw-Array ergänzt. Das Binding ist jedoch die passendere Wahl, wenn das Basisbild bereits als Rohdaten aus R2, Cloudflare Images, einem Request-Body oder einem anderen Abruf vorliegt.

Was fehlt, ist Layout-Intelligenz. Für die Textgestaltung dokumentiert Cloudflare derzeit font, size und color. Nicht dokumentiert sind Textfelder, Zeilenumbruch, automatische Größenanpassung, Zeilenhöhe, Laufweite, Ausrichtung, Kontur, Schatten oder Ersatzschriften. Die Anwendung muss daher selbst über Zeilenumbrüche und Sicherheitszonen entscheiden – und darüber, was mit einem zu langen Produktnamen geschieht.

Die fertige Karte cachen, nicht nur die Quelle

Antworten des Images-Bindings werden nicht automatisch gecacht. Ohne Workers Cache führt jede wiederholte Anfrage den Worker erneut aus und dekodiert sowie kodiert das Quellbild noch einmal. Wird der Cache aktiviert und Cache-Control gesetzt, kann Cloudflare die fertige Antwort ausliefern, ohne diese Arbeit zu wiederholen.

Caching und Images-Abrechnung lösen unterschiedliche Probleme. Cloudflare rechnet das Binding nach eindeutigen Transformationen ab: Jede einmalige Kombination aus Quellbild und Parametern zählt pro Kalendermonat genau einmal. Wiederholungen derselben Transformation erhöhen die Images-Nutzung im selben Monat nicht. Cache-Treffer bleiben trotzdem relevant, weil sie weitere Worker-Ausführungen und Latenz durch die Bildverarbeitung vermeiden.

Wie Textzeichenfolgen innerhalb dieser Eindeutigkeitsberechnung normalisiert werden, erläutert Cloudflare nicht gesondert. Für die Planung ist deshalb die sichere Annahme sinnvoll, dass jede Kombination aus Basisbild, Beschriftung, Stil und Ausgabe als neue Transformation zählt, bis eigene Nutzungsdaten das Gegenteil zeigen. Ein Katalog mit 2,000 Produkten und fünf Kartengrößen kann sich somit wie 10,000 Varianten verhalten, selbst wenn jede Karte tausendfach aufgerufen wird.

Wenn das Layout bereits steht, verschiebt sich die Kalkulation

Cloudflare Images Free umfasst monatlich 5,000 eindeutige Transformationen. Im kostenpflichtigen Tarif bleiben die ersten 5,000 inklusive; jede weitere Einheit von 1,000 kostet $0.50. Cloudflares eigenes Beispiel mit 10,000 Transformationen beziffert die Images-Kosten für den Monat auf $2.50.

Bannerbear nennt derzeit $49 pro Monat für den Automate-Tarif mit 1,000 API-Credits und $149 pro Monat für Scale mit 10,000 Credits. Ein gewöhnliches Bild-Rendering verbraucht einen Credit, bevor Multiplikatoren für zusätzliche Formate, Skalierung oder KI-Ebenen hinzukommen.

Die Differenz von $146.50 ist keine sofort realisierte Ersparnis. Bannerbear verkauft ein einsatzfertiges Designprodukt mit Vorlageneditor, Integrationen und Team-Workflow. Cloudflare liefert Rendering-Bausteine, die erst entworfen, programmiert, validiert, überwacht und gepflegt werden müssen. Zum Preis der Images-Transformation können Speicher- und Entwicklungskosten hinzukommen; auch die Speicherung innerhalb von Cloudflare Images hat ihren eigenen Preis.

Die Entscheidung bleibt dennoch klar. Wenn ein Team die Gestaltungsregeln bereits besitzt und die Bildanfrage über Cloudflare läuft, kann ein separates Rendering-Abonnement optional werden. Müssen Marketingteams dagegen jede Woche Ebenen visuell verschieben, bezahlt das Abo den Editor und das Betriebsmodell – nicht teure Pixel.

Die sieben lohnendsten Workflows im Ranking

1. Produktkarten für Kataloge

Ein Händler mit Hunderten SKUs kann ein freigegebenes Hintergrundlayout beibehalten und aktuellen Produktnamen, Preis, Bestandshinweis oder Aktion in jede Karte einzeichnen. Bestands- oder Kampagnendaten stoßen den Worker an, der das fertige Marketplace- oder Social-Media-Motiv zurückliefert. Das zahlt sich aus, weil eine Preisänderung keine manuelle Exportwarteschlange mehr auslöst und sich dasselbe freigegebene Layout neu erzeugen lässt, ohne das Quellfoto anzufassen.

Am besten funktionieren klar begrenzte Texte. Ein zweizeiliger Produktname und ein Preisschild sind berechenbar, ein Absatz mit Werbetext ist es nicht.

2. Social-Media-Karten für Publisher und CMS

Eine Redaktion kann beim Veröffentlichen eines Artikels einen Endpunkt aufrufen und dabei die Überschrift oder eine stabile Artikel-ID übergeben. Der Worker lädt das Hero-Bild, rendert den Titel und gibt die Open-Graph- oder Social-Media-Karte zurück. So fehlen weniger Vorschaubilder, veraltete Varianten werden vermieden und im Veröffentlichungsprozess muss kein Screenshot-Browser abgewartet werden.

Besonders attraktiv ist das, wenn das CMS ohnehin hinter Cloudflare läuft. Das Bild lässt sich auf derselben Edge-Ebene erzeugen, die es ausliefert; die fertige URL wird für wiederholtes Teilen gecacht.

3. Statusbilder für Marktplätze

Ein Marktplatz kann Angebotskarten mit NEW, RESERVED, SOLD, dem Zustand oder dem Ort kennzeichnen. Der Listing-Dienst ändert einen kleinen Textwert, woraufhin der Bild-Endpunkt den neuen visuellen Status erzeugt. Verkäufer müssen ihre Originalfotos nicht bearbeiten, während Käufer den Status überall dort im Bild sehen, wo die Karte eingebettet ist.

Der wirtschaftliche Nutzen liegt in der Genauigkeit. Eine veraltete Statuskarte verursacht Supportaufwand und enttäuschte Klicks. Ein deterministisches Overlay kann sich gemeinsam mit dem Datensatz ändern.

4. Werbemittel für Franchisebetriebe und lokale Angebote

Ein Restaurant- oder Dienstleistungsfranchise kann die Markenkomposition unverändert lassen und je nach Standort Stadt, Angebot, Datum oder Preis austauschen. Aus einer Kampagnendefinition entstehen viele lokale Varianten. Das reduziert repetitive Produktionsarbeit und entzieht zugleich die riskanten Elemente – etwa Schrift, Farbe und Positionierung – dem Zugriff der lokalen Betreiber.

Lange Ortsnamen sind die Falle. Bevor sich dieser Ablauf sicher automatisieren lässt, braucht er gemessene Textbreiten, Ausweichgrößen oder vorab freigegebene Abkürzungen.

5. Veranstaltungs- und Terminpläne

Eine Eventplattform kann Namen von Vortragenden, Sitzungszeiten, Raumnummern oder einen kurzfristigen CANCELLED-Status auf ein festes Plakat rendern. Der Quellterminplan bleibt der maßgebliche Datensatz, die Kartenerstellung wird zum Ausgabeschritt. Ändern sich kurz vor der Veranstaltung noch Details, liegt der Vorteil in der Geschwindigkeit: Niemand muss Dutzende Dateien erneut im Design öffnen.

6. Momentaufnahmen aus Kundenberichten

Ein Reporting-Produkt kann Zeitraum, Kundenname und wichtigste Kennzahl auf einem markenkonformen Diagrammbild für E-Mail oder Messaging platzieren. Der Worker übernimmt das bereits gerenderte Diagramm als Basis, ergänzt die wenigen wechselnden Beschriftungen und liefert ein kompaktes Endformat. Das ist hilfreich, wenn das Zielsystem das Dashboard selbst nicht ausführen kann.

Die Textebene sollte kein vollständiges Dashboard zeichnen. Ihre Stärke liegt im letzten, deterministischen Beschriftungsschritt.

7. Interne Betriebskennzeichnungen

Ein Lager, ein Außendienstteam oder eine Moderationswarteschlange kann kurze Statusangaben auf Objektfotos rendern: Prüfzustand, Charge, Route oder Bewertungsergebnis. Diese Darstellung bleibt auch in Systemen verständlich, die begleitende Metadaten entfernen. So sind weniger Nachschlagevorgänge nötig, wenn ein Bild ohne Kontext ankommt.

Das ist eine Arbeitserleichterung, kein Ersatz für den zugrunde liegenden Datensatz. Der Status gehört weiterhin in die Datenbank, das Bild bleibt lediglich eine Ansicht.

Drei Produkte, deren Entwicklung sich lohnt

Beste Chance: ein branchenspezifischer Endpunkt für Social-Media-Karten

Ein markensicherer Kartendienst eignet sich für Publisher, Agenturen oder Unternehmen mit vielen Standorten, die bereits feste Layouts haben, aber keinen eigenen Browser-Rendering-Stack betreiben möchten. Der Kunde liefert ein Hero-Bild und freigegebene Textfelder; der Dienst gibt stabile URLs für wenige Seitenverhältnisse zurück.

US-Keyword-Daten schätzen für social media post maker 480 Suchanfragen pro Monat bei einem Klickpreis von $19.95. Die exakte Suchphrase ist weiter gefasst als die Zielgruppe für eine API, doch der ungewöhnlich hohe CPC zeigt den Wettbewerb der Anbieter um diesen Produktionsauftrag. Die Monatstarife von Bannerbear mit $49 und $149 liefern einen aktuellen Budgetanker für Teams, die bereits für automatisiertes Rendering bezahlen.

Die kleinste verkaufsfähige Version besteht aus einem Worker, drei gesperrten Kartenlayouts, einer Admin-Vorschau, einem CMS-Webhook, strikten Allowlists für Quell-URLs, stabilen Cache-Schlüsseln und einer Fehlerwarteschlange für Texte, die nicht passen. Verkauft wird die Zuverlässigkeit der Publishing-Anbindung, nicht der rohe .text()-Aufruf.

Der Haken ist die Verantwortung für die Vorlagen. Cloudflare stellt dem Kunden keinen visuellen Editor bereit, und jedes neue Layout kann zum Serviceauftrag werden. Trotzdem ist dies die stärkste Chance: Der neue Baustein entfernt den Renderer aus einem wiederkehrenden, wirtschaftlich wertvollen Workflow, während Integration und Markenkontrolle als Produkt bestehen bleiben.

Eine Engine für Aktionskennzeichnungen im Katalog

Eine feedgesteuerte Compositing-Lösung für E-Commerce-Teams kann Preise, Angebotsstatus, Lieferzusagen oder Kollektionsnamen in Produktbilder einfügen. Eine CSV-Datei, ein PIM oder ein Commerce-Webhook aktualisiert die Daten; der Dienst erzeugt nur geänderte Varianten neu.

Product label maker kommt auf geschätzte 320 US-Suchanfragen pro Monat, signalisiert kommerzielle Absicht und weist bei starkem Werbewettbewerb einen CPC von $6.03 auf. Das belegt bezahlte Nachfrage rund um die Erstellung von Kennzeichnungen, auch wenn die Suchanfrage vielfach gedruckte Etiketten statt Kataloggrafiken meint.

Ein MVP braucht einen Produktfeed-Connector, eine Handvoll fester Badges, Vorgaben für Seitenverhältnisse, eine Vorschau und Regeln für lange Namen sowie fehlende Preise. Der Haken ist der Umfang. Physische Verpackungen bringen Anforderungen an Druckauflösung, Beschnitt, Barcodes und regulatorische Prüfung mit, die dieses Raster-Overlay allein nicht erfüllt. Solange diese Systeme nicht zum Produkt gehören, sollte der Fokus auf Aktionskennzeichnungen für Bilder bleiben.

Ein eingebettetes Tool zum Beschriften von Bildern

Eine kleine Editor-Komponente kann ein bestehendes Creator-, Marketplace- oder Community-Produkt ergänzen: Bild auswählen, kurzen Text eingeben, eine freigegebene Schrift und Farbe wählen, innerhalb eines sicheren Bereichs positionieren und anschließend exportieren. Cloudflare übernimmt die finale Rasterung hinter der eigenen Oberfläche des Produkts.

Add text to image erreicht geschätzte 6,600 US-Suchanfragen pro Monat. Die stärker transaktionale Suchphrase add text to image app kommt auf rund 320 Suchanfragen und ist im selben Datensatz gegenüber dem Vorjahr um 23 Prozent gewachsen. Die Nachfrage ist real, ein großer Teil davon erwartet allerdings einen kostenlosen Allzweckeditor.

Das MVP umfasst eine eingeschränkte Vorschau, vier bis sechs Textvorgaben, einen Export-Endpunkt und Speicherplatz für die fertige URL. Der Haken ist die geringe Differenzierung. Ein eigenständiges generisches Tool tritt gegen ausgereifte kostenlose Editoren an. Mehr Sinn ergibt es als kostenpflichtiges Feature in einem Produkt, das Bild, Nutzer und Veröffentlichungsziel bereits besitzt.

Wann dieses Tool die falsche Wahl ist

Cloudflare Images kann Text rendern und mit einem Bild zusammensetzen. Es entscheidet weder über den Inhalt noch passt es die Typografie responsiv an, genehmigt ein Markenlayout oder stellt einen Vorlageneditor für Marketingteams bereit. Liegt genau dort die eigentliche Schwierigkeit, kann ein vollständiges Designautomatisierungsprodukt weiterhin günstiger sein als der Eigenbetrieb. Einen breiteren Blick auf die Veränderung ganzer Markensysteme bietet der Test des Marken-Refreshs mit Canva AI 2.0.

Fünf Warnsignale sprechen in der Praxis dagegen:

• Der Text erfordert anspruchsvolle Zeilenumbrüche, automatische Größenanpassung, Rich Text oder eine schriftspezifische Formung, die mit der gewählten Schrift noch nicht getestet wurde.
• Redakteure müssen Ebenen visuell verschieben und ohne Entwickler neue Vorlagen veröffentlichen können.
• Ein öffentlicher Endpunkt würde beliebige Quell- oder Schrift-URLs ohne Allowlist akzeptieren.
• Die Zahl der Varianten lässt sich nicht begrenzen, sodass zufällige Query-Strings das kostenlose Kontingent von 5,000 Transformationen aufbrauchen könnten und neue Anfragen mit Fehler 9422 scheitern.
• Der lokale Test ist auf Text-Rendering angewiesen. Die vereinfachte lokale Images-Implementierung unterstützt lediglich width, height, rotate und format. Für dieses Feature ist daher npx wrangler dev --remote erforderlich.

Die Grenzen für Schrift und Text sind hart: Eine benutzerdefinierte Schrift darf höchstens 20 MB groß sein, der gerenderte Inhalt höchstens 1,000 Zeichen lang und seine Rasterebene höchstens 4096 mal 4096 Pixel groß. Für Beschriftungen und Überschriften sind diese Obergrenzen großzügig. Sie sind jedoch keine Einladung, die Bild-API als Seitenlayout-Engine einzusetzen.

Wenn ein zuverlässiger Bild-Endpunkt für das eigene Katalog- oder Publishing-System gefragt ist, sind KI-Produktionssysteme der passende Ausgangspunkt.