BilderCDNPerformance

Cloudinary: Bilder und Videos automatisch optimieren und per CDN ausliefern

21.05.2026 8 Min. Lesezeit

Bilder und Videos machen den Großteil des Datenvolumens einer durchschnittlichen Website aus. Schlecht optimierte Medien sind einer der häufigsten Gründe für schlechte Core Web Vitals, hohe Ladezeiten und damit einhergehend schlechtere Suchmaschinenplatzierungen. Cloudinary ist eine Cloud-Plattform, die genau dieses Problem löst: Medien werden automatisch transformiert, optimiert und über ein globales CDN ausgeliefert – ohne dass Entwickler eigene Bildverarbeitungs-Pipelines aufbauen müssen.

Was ist Cloudinary?

Cloudinary ist eine Media-as-a-Service-Plattform, die 2012 gegründet wurde und heute von Hunderttausenden Entwicklern und Unternehmen genutzt wird. Der Dienst übernimmt Upload, Speicherung, Transformation und Auslieferung von Bildern und Videos. Das Besondere: Transformationen werden nicht beim Upload, sondern on-the-fly per URL-Parameter definiert. Ein einmal hochgeladenes Bild kann in beliebig vielen Varianten ausgeliefert werden, ohne dass das Original angetastet wird.

Die Grundidee lässt sich in einer einzigen URL zusammenfassen:

https://res.cloudinary.com/{cloud-name}/image/upload/w_800,h_600,c_fill,f_auto,q_auto/sample.jpg

Diese URL liefert das Bild sample.jpg in 800 × 600 Pixel, zugeschnitten auf das Bildformat, im optimalen Format (WebP, AVIF oder JPEG je nach Browser) und mit automatisch berechneter Qualitätsstufe – alles ohne eine einzige Zeile Backend-Code.

Bild-Transformationen per URL-Parameter

Cloudinary bietet über 100 Transformationsparameter. Die wichtigsten im Überblick:

Größe und Zuschnitt

w_800 – Breite auf 800 Pixel setzen
h_600 – Höhe auf 600 Pixel setzen
c_fill – Bild füllt die Zielgröße, überschüssige Bereiche werden abgeschnitten
c_fit – Bild passt in die Zielgröße, ohne Beschnitt
c_thumb,g_face – Automatischer Zuschnitt auf erkannte Gesichter (KI-gestützt)
ar_16:9 – Seitenverhältnis erzwingen

Format und Qualität

Die zwei leistungsstärksten Parameter für automatische Optimierung sind f_auto und q_auto:

f_auto – Cloudinary wählt automatisch das beste Format: WebP für Chrome, AVIF für unterstützte Browser, JPEG/PNG als Fallback. Das allein kann die Dateigröße um 25–50 % reduzieren.
q_auto – Die Qualitätsstufe wird algorithmisch so gewählt, dass das Bild visuell akzeptabel bleibt, aber so klein wie möglich ist. Weitere Stufen: q_auto:low, q_auto:good, q_auto:best.

Tipp: Kombinieren Sie immer f_auto und q_auto in der Produktion. In Benchmarks erreichen diese beiden Parameter zusammen oft eine Dateigrößenreduzierung von 60–80 % gegenüber einem unkomprimierten Original – bei kaum wahrnehmbarem Qualitätsverlust für den Nutzer.

Wasserzeichen und Textoverlay

Cloudinary unterstützt dynamische Overlays: Logos, Wasserzeichen und sogar dynamischer Text können per URL-Parameter auf ein Bild gelegt werden. Das ist besonders nützlich für automatisch generierte Social-Media-Vorschaubilder (Open Graph Images) ohne eigenen Rendering-Server.

Video-Transcoding und -Optimierung

Nicht nur Bilder – auch Videos profitieren von Cloudinary. Hochgeladene Videos können in verschiedene Formate und Auflösungen transcodiert werden. Wichtige Video-Parameter:

f_mp4 / f_webm – Ausgabeformat wählen
vc_h264 / vc_vp9 / vc_av1 – Video-Codec bestimmen
q_auto – Auch bei Videos verfügbar
so_2.5 – Video bei Sekunde 2,5 starten (für Vorschauclips)
du_5 – Video auf 5 Sekunden kürzen

Für Streaming-Anwendungen unterstützt Cloudinary auch adaptives Bit-Rate-Streaming (HLS/DASH), sodass Nutzer je nach Bandbreite automatisch die passende Qualitätsstufe erhalten.

Free-Tier-Limits

Cloudinary bietet einen dauerhaft kostenlosen Plan, der für viele kleine Projekte ausreicht. Die aktuellen Limits im Free-Tier:

25 monatliche Credits (1 Credit entspricht ca. 1.000 Transformationen, 1 GB Speicher oder 1 GB Bandbreite)
25 GB Speicher
25 GB monatliche CDN-Bandbreite
Maximal 25 MB pro Upload (Bilder), 100 MB (Videos)

Die Credit-basierte Abrechnung macht es schwieriger, den genauen Verbrauch vorab zu kalkulieren. Bei wachsenden Projekten empfiehlt sich ein regelmäßiger Blick auf das Nutzungs-Dashboard im Cloudinary Console.

Achtung: Cloudinary speichert Daten standardmäßig auf Servern in den USA. Wenn Sie DSGVO-Compliance benötigen und personenbezogene Bilder (z. B. Nutzerfotos) verarbeiten, prüfen Sie, ob ein Auftragsverarbeitungsvertrag (AVV) mit Cloudinary vorliegt und ob Sie die EU-Region als Speicherort konfigurieren können – das ist nur in kostenpflichtigen Enterprise-Plänen möglich.

Integration mit React und Next.js

Für React-Projekte stellt Cloudinary das Paket next-cloudinary bereit, das eine nahtlose Integration in Next.js bietet:

npm install next-cloudinary

Anschließend kann die CldImage-Komponente direkt verwendet werden:

import { CldImage } from 'next-cloudinary';

export default function Hero() {
  return (
    <CldImage
      src="samples/landscapes/nature-mountains"
      width={800}
      height={500}
      crop="fill"
      sizes="100vw"
      alt="Berglandschaft"
    />
  );
}

Die Komponente generiert automatisch ein srcset für responsive Bilder, wählt das optimale Format (via f_auto) und integriert sich in das native Next.js Image-Optimierungssystem. Für Videos gibt es die entsprechende CldVideoPlayer-Komponente.

Vergleich: Cloudinary vs. imgix vs. Cloudflare Images

Kriterium	Cloudinary	imgix	Cloudflare Images
Kostenloser Plan	Ja (25 GB/Monat)	Nein (nur Trial)	Nein (ab 5 USD/Monat)
Video-Support	Ja (inklusive)	Nein	Via Cloudflare Stream
URL-basierte Transformationen	Ja	Ja	Eingeschränkt
KI-Funktionen	Umfangreich (Gesichtserkennung, Hintergrundentfernung)	Gering	Keine
Eigener Speicher als Quelle	Ja (S3, GCS, etc.)	Ja	Nur eigener Upload
Preismodell	Credits-basiert	Bandbreiten-basiert	Flat per 100.000 Bilder
EU-Datenspeicherung	Enterprise only	Möglich (Enterprise)	Ja (Cloudflare-Netzwerk)
Next.js-Integration	Offizielles Paket	Offizielles Paket	Via next/image

Wann lohnt sich Cloudinary?

Cloudinary ist besonders attraktiv für Projekte, die eine Kombination aus Bild- und Video-Verwaltung, dynamischen Transformationen und KI-Features benötigen. E-Commerce-Plattformen profitieren von automatischen Produkt-Freisteller-Funktionen, Media-Seiten von der Video-Transcoding-Pipeline, und Content-Teams von der Möglichkeit, Open-Graph-Bilder dynamisch zu generieren.

Wer ausschließlich Bilder ohne Video-Anforderungen hat und eine EU-DSGVO-konforme Lösung sucht, könnte mit Cloudflare Images besser fahren – niedrigere Preise, einfacheres Modell, EU-Serverstandorte. Für komplexe Anforderungen mit KI-Features ist Cloudinary jedoch kaum zu schlagen.

FAQ

Werden transformierte Bilder gecacht?: Ja. Jede URL-Kombination wird nach der ersten Anfrage auf Cloudinarys CDN gecacht. Folgende Anfragen für dieselbe Transformation werden direkt aus dem CDN-Cache beantwortet und sind extrem schnell. Der Cache kann bei Bedarf über die API invalidiert werden.
Kann ich Cloudinary mit meinem eigenen S3-Bucket verbinden?: Ja, Cloudinary unterstützt „Fetch"-URLs und externe Quellen wie Amazon S3, Google Cloud Storage oder beliebige öffentliche URLs als Bildquellen. Das Bild wird von der Quelle abgerufen, transformiert und gecacht, ohne es dauerhaft in Cloudinary speichern zu müssen.
Wie funktioniert die Hintergrundentfernung in Cloudinary?: Mit dem Parameter e_background_removal in der URL entfernt Cloudinarys KI automatisch den Hintergrund eines Bildes. Das Ergebnis ist ein PNG mit Transparenz. Die Funktion ist besonders für Produktfotos im E-Commerce nützlich und kostet im Free-Plan zusätzliche Credits.
Gibt es eine Größenbeschränkung für ursprüngliche Uploads?: Im Free-Plan können Bilder bis zu 25 MB und Videos bis zu 100 MB hochgeladen werden. In kostenpflichtigen Plänen steigen diese Limits auf 300 MB für Bilder und bis zu mehrere GB für Videos. Die maximale Dateigröße für verarbeitete Bilder (nach Transformation) beträgt 100 MP (Megapixel) Auflösung.