Das Wichtigste in Kürze
- Die meisten Shops brauchen kein Third-Party Image CDN. Das integrierte Shopify CDN übernimmt bereits das Skalieren, Zuschneiden, Komprimieren und die Formataushandlung (AVIF, WebP oder JPEG) pro Request – ohne zusätzliche Kosten.
- Der Liquid
image_url-Filter verarbeitet Width, Height, Crop, Format und pad_color bis zu 5760px, undimage_taggeneriert standardmäßig ein responsivessrcsetmitloading="lazy".- Ein Third-Party Image CDN lohnt sich erst, wenn die Auslieferung (Delivery) nicht das eigentliche Problem ist. Digital Asset Management (DAM), Video, Art Direction at scale, außerhalb von Shopify gehostete Bilder und Multi-Channel-Wiederverwendung sind die wahren Gründe dafür.
- Cloudinary ist die Lösung für DAM plus Transformationen und rechnet über Credits ab. Bunny Optimizer ist der günstige Transformation Layer für 9,50 $ pro Monat und Website, plus Bandbreite.
- Keines von beiden kann
cdn.shopify.comfür native Produktbilder ersetzen. Beide laufen parallel dazu, was einen Wartungsaufwand bedeutet, den viele bei der Kostenkalkulation vergessen.
Ein Shopify Image CDN Vergleich geht oft von der falschen Annahme aus: dass die Bildauslieferung von Shopify eine Lücke ist, die man füllen muss. Das ist nicht der Fall. Jeder Shopify-Plan enthält ein globales CDN, das Bilder on the fly skaliert, komprimiert und das beste Format aushandelt – und dafür zahlst du keinen Cent extra.
Die eigentlich nützliche Frage ist also etwas spezifischer. Was macht das integrierte CDN genau, wo sind seine Grenzen, und lösen Cloudinary oder Bunny Optimizer ein Problem, das du wirklich hast? Dieser Guide beleuchtet den Shopify-Standard im Detail und vergleicht dann alle drei in Bezug auf Kosten, Transformation API, Formatsupport, Theme-Integration, Core Web Vitals und Lock-in-Effekt.
Warum du uns vertrauen kannst
Wir sind seit über vier Jahren im Shopify-Umfeld tätig und haben mit hunderten Shopify-Brands an ihren Storefronts gearbeitet. Jacques hat über 15 Jahre Entwicklererfahrung. Wir bauen Fudge, einen AI Storefront Editor mit einer 5,0-Bewertung im Shopify App Store und “Built for Shopify”-Status – wir arbeiten also auf der Theme-Ebene, wo die Bildauslieferung entweder gewonnen oder verloren wird.
Die kurze Antwort: Die meisten Shops sollten beim Shopify-CDN bleiben
Wenn deine Bilder in Shopify liegen, dein Theme image_url und image_tag richtig verwendet und du vernünftige Quelldateien hochlädst, wirst du durch ein Drittanbieter-Image-CDN keinen nennenswerten Geschwindigkeitsvorteil erzielen. Du bekommst lediglich einen weiteren Anbieter, eine weitere Rechnung und einen weiteren Point of Failure.
Die Shops, die davon profitieren, haben ein ganz anderes Problem. Sie verwalten eine riesige Medienbibliothek über mehrere Kanäle, liefern Videos im großen Stil aus, betreiben zielgruppenspezifische Art Direction oder hosten Bilder irgendwo außerhalb von Shopify. Das sind Asset-Management-Probleme, keine Delivery-Probleme.
Wenn dein Bild-Problem lautet “mein Hero-Bild hat 1,4 MB”, dann liegt die Lösung in deinen Quelldateien und deinem Liquid-Code, nicht in einem neuen CDN.
Was Shopifys integriertes Image-CDN eigentlich macht
Das CDN von Shopify basiert auf Cloudflare, liefert über HTTP/3 mit TLS 1.3 aus und komprimiert Text-Assets mit Brotli und gzip.1 Es ist in jedem Plan enthalten, mit unlimitiertem Hosting und unbegrenzter Bandbreite.2 Es gibt kein Bandbreitenlimit, auf das du achten musst, und keine Kosten pro Request.
Hier ist der Teil, den viele unterschätzen.
Automatische Format-Aushandlung: AVIF, WebP und JPEG
Shopify prüft jeden Request und wählt das beste kompatible Format für den jeweiligen Client. Dabei wird basierend auf Qualität und Dateigröße zwischen AVIF, WebP und JPEG gewählt.3 Du musst das nicht konfigurieren und zahlst auch nicht extra dafür. Das ist bereits seit 2022 das Standardverhalten.
Das ist genau das Feature, mit dem die meisten Drittanbieter-Image-CDNs verkauft werden. Shopify macht das bereits.
Der image_url-Filter und seine Parameter
image_url ist der aktuelle Liquid-Filter zum Erstellen von Bild-URLs. img_url ist veraltet und wurde dadurch ersetzt.
Er akzeptiert:
widthundheight, bis zu maximal 5760px jeweils. Du musst mindestens eines davon übergeben, sonst wirft der Filter einen Fehler.4crop, mit den Wertentop,center,bottom,left,rightundregion.format, akzeptiertjpgoderpjpg. Gültige Konvertierungen sind PNG zu JPG, PNG zu PJPG und JPG zu PJPG.pad_color, als hex3- oder hex6-Wert.
Eine Regel, über die viele stolpern: Ein Bild wird niemals größer als seine Originalmaße skaliert. Wenn du 3000px von einem 1200px-Upload anforderst, bekommst du 1200px zurück.
Beachte die bewusste Trennung. Der format-Parameter ist für die Quellkonvertierung gedacht, nicht um dem Besucher AVIF oder WebP aufzuzwingen. Die Format-Aushandlung passiert automatisch an der Edge, pro Request.
Responsives srcset mit image_tag
image_tag generiert das <img>-Element und nimmt dir die nervigen Teile ab. Es setzt die width- und height-Attribute anhand des echten Seitenverhältnisses des Bildes, was Layout Shifts verhindert, und baut ein srcset aus einem Standard-Set von Breiten bis zum Maximum in der URL auf.
Es akzeptiert widths, sizes, srcset, preload, alt, class und jedes andere HTML-Attribut. Zwei Defaults sind besonders wichtig:
- Bilder erhalten automatisch
loading="lazy", es sei denn, du übergibstpreload: true. Das ist der richtige Standard für Bilder Below-the-Fold und der falsche für deinen Hero. In unserem Guide Bilder in Shopify lazy loaden zeigen wir, wo genau die Grenze verläuft. preload: truesendet einenLinkResource Hint als HTTP-Header, was genau das ist, was du für das LCP-Bild willst. Wenn dein Hero zu spät lädt, erklärt unser Fix für Shopify Hero Banner Eager Loading genau diese Änderung.
Ein korrekter Hero sieht in etwa so aus:
{{ section.settings.image
| image_url: width: 2400
| image_tag:
widths: '600, 900, 1200, 1600, 2000, 2400',
sizes: '100vw',
preload: true,
loading: 'eager',
alt: section.settings.image.alt
}}
Die meisten “Wir brauchen ein Image-CDN”-Gespräche enden genau hier, sobald jemand in den Theme-Code schaut und ein <img> mit fester Breite ohne srcset findet.
Größenlimits und unterstützte Quellformate
Produkt- und Kategoriebilder müssen unter 20 MB groß sein und dürfen maximal 5000 x 5000 px oder 25 Megapixel haben. Akzeptierte Formate sind PNG, JPEG, PSD, TIFF, BMP, GIF, SVG, HEIC und WebP, wobei animierte GIFs und WebPs unterstützt werden. Shopify empfiehlt 2048 x 2048 px als die Größe, die für quadratische Produktfotos meist am besten aussieht.5
Shopify komprimiert beim Upload, kann aber eine schlecht exportierte Quelldatei nicht retten. Für die Vorbereitung vor dem Upload, siehe unseren Guide zum Thema Bilder in Shopify komprimieren.
Wann ein Drittanbieter-Image-CDN seine Daseinsberechtigung hat
Es gibt echte Anwendungsfälle. Diese sind aber enger gefasst, als das Marketing oft suggeriert.
- Schwere On-the-fly-Transformationen. Overlays, eingebrannter Text, Hintergrundentfernung, Composites pro Variante, generierte Social-Crops. Shopify bietet dir Resize, Crop und Pad. Das war’s.
- Digital Asset Management. Versionierung, Freigaben, Tagging, Suche und eine Single Source of Truth, mit der dein Creative-Team arbeitet. Shopify Files ist reiner Speicherplatz, kein DAM.
- Video. Adaptive Bitrate Delivery, gerätespezifische Renditions, Thumbnail-Generierung.
- Art Direction at Scale. Verschiedene Crops pro Breakpoint oder Zielgruppe, regelbasiert statt manuell.
- Bilder, die außerhalb von Shopify gehostet werden. Ein PIM, ein Headless-Setup oder ein Marktplatz-Feed, der nie in Shopify Files landet.
- Multi-Channel-Nutzung. Dasselbe Asset, das Shopify, eine Marketing-Seite, eine App und ein Wholesale-Portal über eine URL und ein Set von Transformationen versorgt.
Das Muster: Du kaufst Asset-Management und tiefgehende Transformationen, keine schnelleren Bytes. Wenn nichts davon auf dich zutrifft, kannst du hier aufhören.
Shopify Standard vs. Cloudinary vs. Bunny Optimizer
Kostenmodell
Das Shopify-CDN ist inklusive. Unlimitiertes Hosting, unbegrenzte Bandbreite, kein separater Posten auf der Rechnung.2
Cloudinary rechnet in Credits ab. Laut aktueller Pricing-Seite: Free (0 $ pro Monat mit 25 monatlichen Credits), Plus (99 $ pro Monat oder 89 $ bei jährlicher Zahlung mit 225 Credits) und Advanced (249 $ pro Monat oder 224 $ bei jährlicher Zahlung mit 600 Credits). Enterprise auf Anfrage. Ein Credit entspricht 1.000 Transformationen, 1 GB verwaltetem Speicher oder 1 GB Viewing-Bandbreite.6
Die Cloudinary AssetLink App im Shopify App Store listet ihre eigenen Pläne separat auf: ein kostenloser Tarif (setzt einen externen Cloudinary-Plan voraus), Pro für 999 $ pro Monat und Pro Plus für 999 $ pro Monat zzgl. 0,30 $ pro GB CDN-Delivery. Das Listing zeigt eine 5,0-Bewertung aus 3 Reviews. Prüfe das Live-Listing vor der Budgetplanung, da sich App-Pläne ändern können.
Bunny teilt die Rechnung auf. Bunny Optimizer kostet 9,50 $ pro Monat und Website, mit unbegrenzten Requests, Optimierungen und Transformationen. Die CDN-Bandbreite wird on top abgerechnet: im Standard-Netzwerk 0,01 $/GB für Europa und Nordamerika, 0,03 $/GB für Asien und Ozeanien, 0,045 $/GB für Südamerika, 0,06 $/GB für den Nahen Osten und Afrika, mit einem Minimum von 1 $ im Monat.
Bunny ist mit großem Abstand am günstigsten. Cloudinary ist wie eine Medienplattform bepreist, weil es genau das ist.
Transformation-API
Shopify: width, height, crop, format, pad_color. Bewusst überschaubar gehalten.
Cloudinary: Das mächtigste der drei. Verkettete Transformationen (Chained Transformations) in der URL, f_auto für die Formatauswahl und q_auto für die Qualitätsauswahl, plus Overlays, Effekte, Cropping-Modi und Video.
Bunny Optimizer: Die goldene Mitte. Die Image-Processing-Docs listen width, height, crop, aspect_ratio, crop_gravity, face_crop, focus_crop, blur, sharpen, brightness, contrast, saturation, hue, tint, sepia, gamma, flip, flop, rotate, quality und format. Mehr als Shopify, aber lange nicht so umfangreich wie Cloudinary.
Formatunterstützung
| Shopify CDN | Cloudinary | Bunny Optimizer | |
|---|---|---|---|
| Automatische Aushandlung pro Request | Ja, AVIF / WebP / JPEG | Ja, via f_auto | WebP über eine Einstellung |
| AVIF Output | Ja, automatisch | Ja | In den Optimizer Image Docs nicht dokumentiert |
| Akzeptierte Quellformate | PNG, JPEG, PSD, TIFF, BMP, GIF, SVG, HEIC, WebP | Viele, inklusive PDF und Video | Standard-Webformate |
Shopifys Format-Support ist hier wirklich wettbewerbsfähig. Die Bildverarbeitungs-Doku von Bunny Optimizer listet die Konvertierung zwischen JPEG, PNG, WebP und GIF auf, beschreibt WebP Auto-Serve als Einstellung und dokumentiert keinen AVIF Output. Betrachte AVIF bei Bunny also als unbestätigt, bis du deine eigene Pull Zone getestet hast.
Integration in ein Shopify-Theme
Hier wendet sich das Blatt im Vergleich.
Shopify: Null Aufwand. Es ist ohnehin der Weg, wie dein Theme Bilder rendert.
Cloudinary: Die Shopify-App fügt deinem Theme Liquid-Snippets hinzu und gibt dir eine eingebettete Medienbibliothek im Admin-Bereich, um Cloudinary-Assets mit Produkten, Collections und Blogposts zu verknüpfen. Machbar, aber es erfordert Theme-Anpassungen und einen parallelen Asset-Workflow neben dem von Shopify.
Bunny: Keine offizielle Shopify-Integration für native Produktbilder. Eine Pull Zone ist einem Origin-Server vorgeschaltet, und Shopify bietet dir keine Möglichkeit, das Storefront-CDN für Produktmedien auszutauschen, die über cdn.shopify.com ausgeliefert werden. In der Praxis wird Bunny für Assets außerhalb der Shopify-Bilder-Pipeline genutzt: Landingpage-Medien, Downloads, extern gehostete Dateien. Das ist ein echter Use Case, aber es bedeutet nicht “das Shopify Image-CDN ersetzen”.
Klartext: Du kannst dich bei nativen Produktbildern nicht komplett vom Shopify Image-CDN verabschieden. Jede Drittanbieter-Option kommt on top dazu.
Auswirkungen auf die Core Web Vitals
Sei skeptisch gegenüber CDN-getriebenen LCP-Versprechungen. Wenn Bilder bereits AVIF oder WebP sind, die richtige Größe haben und von einer Edge nahe am Besucher ausgeliefert werden, ändert ein zweites CDN daran herzlich wenig.
Was das LCP in einem Shopify-Store wirklich beeinflusst:
- Ein Hero-Bild, das per Lazy-Loading statt Preload geladen wird.
- Fehlendes
srcset, sodass Mobilgeräte eine Desktop-Dateigröße herunterladen. - Fehlende
widthundheightAttribute, was zu Layout Shifts und einem schlechteren CLS-Score führt. - Ein Quellbild, das viel größer ist als die gerenderte Darstellungsgröße.
- App-Scripte und renderblockierende Ressourcen, die den Image-Request überhaupt erst verzögern.
Ein dritter CDN-Hop kann beim ersten Request einen DNS-Lookup, einen TLS-Handshake und einen Cold-Cache-Miss hinzufügen. Das ist ein kleiner Rückschritt, keine Verbesserung – bis deine Transformations-Bedürfnisse es rechtfertigen. Um zu sehen, wo Shopify-Stores bei diesen Metriken tatsächlich stehen, lies unseren Artikel über den Stand der Shopify-Performance in 2026 und speziell für Mobile unseren Guide zur Shopify Mobile Speed.
Wartung und Lock-in
Shopify: Nichts zu warten, nichts rückgängig zu machen. Bild-URLs werden durch Liquid-Filter generiert, die direkt zur Plattform gehören.
Cloudinary: Deine Bild-URLs zeigen auf Cloudinary. Deine Transformations-Logik liegt in der Cloudinary-URL-Syntax, eingebettet in Theme-Snippets. Eine Migration weg von dort bedeutet, diese URLs umzuschreiben und die Assets neu umzuziehen. Der Mehrwert durch das DAM ist real, aber die Exit-Kosten sind es auch.
Bunny: Leichterer Lock-in. Die Transform-Syntax läuft über Query-Parameter, und den Hostnamen wieder zurückzutauschen ist unkompliziert. Du musst trotzdem eine Pull Zone, Cache-Regeln und eine zweite Rechnung managen.
Jede Drittanbieter-Option fügt außerdem einen zweiten Ort hinzu, an dem ein Bild fehlerhaft sein kann: ein veralteter Cache, ein falsch zugeschnittener Crop, ein Asset, das in einem System aktualisiert wurde, aber im anderen nicht.
Entscheidungstabelle
| Kriterium | Shopify CDN | Cloudinary | Bunny Optimizer |
|---|---|---|---|
| Kosten | In jedem Plan enthalten | Credit-basiert: Free, Plus 99 $/Monat, Advanced 249 $/Monat | 9,50 $/Monat pro Website plus Bandbreite ab 0,01 $/GB |
| Transformationen | Skalieren (Resize), Zuschneiden (Crop), Pad, JPG/PJPG | Tiefgreifend, verkettet, plus Video | Mid-Range, basierend auf Query-Parametern |
| Automatische Format-Aushandlung | AVIF / WebP / JPEG | Ja, f_auto | WebP; AVIF unbestätigt |
| DAM-Features | Nein | Ja | Nein |
| Video | Nur Shopify-natives Hosting | Ja | Separates Bunny Stream Produkt |
| Theme-Integration | Native Liquid Filter | App plus Theme Snippets | Manuell, nur für Nicht-Shopify-Assets |
| Wahrscheinlicher CWV-Gewinn | Baseline | Geringfügig | Geringfügig |
| Lock-in | Keiner | Hoch | Gering |
Fazit nach Shop-Profil
Kleine bis mittelgroße Shops, Bilder liegen in Shopify. Bleib beim Shopify-CDN. Stecke die Arbeit lieber in Quelldateien, srcset und das Preloading deines LCP-Bildes. Unser Guide zum Thema Shopify Theme schneller machen deckt in diesem Bereich mehr ab, als jeder CDN-Wechsel es tun wird.
High-Volume-Shop mit einem Creative-Team und einer großen Medienbibliothek. Cloudinary. Kauf es dir aber eher wegen des DAMs und der Transformationstiefe, nicht wegen der reinen Geschwindigkeit. Gleiche den Preis der Credits im Vorfeld unbedingt mit deinem echten Transformations- und Bandbreitenvolumen ab.
Shop mit signifikanten Assets außerhalb von Shopify. Bunny Optimizer, aber nur für genau diese Assets. Mit 9,50 $ pro Monat pro Website plus einen Cent pro Gigabyte in Europa und Nordamerika ist es günstig genug, dass es sich für eine medienlastige Microsite oder eine Download-Bibliothek lohnt. Lass die Produktbilder bei Shopify.
Headless- oder Multi-Channel-Setup. Cloudinary, wenn du eine einzige Asset-Quelle für Storefront, App und Marketing-Website brauchst. Bunny, wenn du nur Transformation und Auslieferung benötigst.
Alle, deren eigentliches Problem ein langsames Hero-Bild ist. Keine der oben genannten Optionen. Fixe dein Liquid.
Wo Fudge ins Spiel kommt
Fudge ist ein AI Storefront Editor, der nativen Theme-Code schreibt: Liquid, CSS und JavaScript, direkt in deinem Theme.
Die meisten Bild-Performance-Probleme bei Shopify sind Theme-Probleme. Ein Hero-Bild ohne preload, ein Produktraster ohne srcset, eine Section, die eine 2000px-Quelldatei in einen 400px-Slot zwingt. Du kannst den Fix einfach umgangssprachlich beschreiben, und Fudge schreibt die image_url und image_tag Aufrufe sauber in die Section.
Da der Output nativer Theme-Code ist, gibt es keine extra Scripte und keinen Widget-Layer, und die Anpassungen bleiben auch nach einer Deinstallation erhalten. Dasselbe gilt für alles andere, was du mit dem Shopify Store Editor baust.
Das ist in der Regel der günstigere Fix. Ein CDN kann kein Theme korrigieren, das das falsche Bild anfordert.
FAQ
Ja. Jeder Shopify-Plan enthält ein globales CDN (bereitgestellt von Cloudflare) mit unlimitiertem Hosting und unbegrenzter Bandbreite ohne zusätzliche Kosten. Es skaliert, schneidet und komprimiert Bilder auf Request und wählt automatisch das beste Format für jeden Client aus.
Ja. Shopify prüft jeden Request und wählt zwischen AVIF, WebP und JPEG basierend auf Client-Support, Qualität und komprimierter Größe. Das funktioniert seit 2022 automatisch und erfordert keine Konfiguration oder Theme-Änderungen von dir.
Nicht für native Produktbilder. Shopify bietet keine Einstellung, um Storefront-Produktmedien auf ein anderes CDN umzuleiten. Third-Party Image CDNs laufen also parallel zu cdn.shopify.com, anstatt es zu ersetzen. Cloudinary hostet eigene Kopien der Assets und verlinkt sie über eine Shopify-App in den Produkten, und Bunny wird in der Regel für Assets außerhalb von Shopifys Image-Pipeline genutzt.
Es lohnt sich, wenn du Digital Asset Management, tiefgreifende Transformationen oder Video-Inhalte über mehrere Kanäle hinweg benötigst. Es lohnt sich nicht rein für die Auslieferungsgeschwindigkeit, da Shopify die Format-Aushandlung und Edge Delivery bereits übernimmt. Cloudinary rechnet in Credits ab, mit einem kostenlosen Tarif und bezahlten Plänen (zum Zeitpunkt des Schreibens bei 99 $ und 249 $ pro Monat).
Bunny Optimizer kostet 9,50 $ pro Monat und Website mit unbegrenzten Requests, Optimierungen und Transformationen. Die CDN-Bandbreite wird separat berechnet, beginnend bei 0,01 $ pro GB für Europa und Nordamerika im Standardnetzwerk, mit einem Minimum von 1 $ pro Monat. Checke am besten bunny.net für die aktuellen Preise, bevor du dich festlegst.
Produkt- und Kategoriebilder (Collections) müssen unter 20 MB groß sein und dürfen 5000 x 5000 px bzw. 25 Megapixel nicht überschreiten. Akzeptierte Formate sind PNG, JPEG, PSD, TIFF, BMP, GIF, SVG, HEIC und WebP, wobei animierte GIFs und WebPs unterstützt werden. Shopify empfiehlt 2048 x 2048 px für quadratische Produktbilder.
Bei Shopify nur selten wirklich spürbar. Sobald das Format der Bilder ausgehandelt wurde und sie von einer nahegelegenen Edge ausgeliefert werden, liegen die verbleibenden LCP-Probleme meist auf Theme-Seite: ein lazy-loaded Hero-Image, ein fehlendes srcset oder fehlende Width- und Height-Attribute. Ein zweites CDN hinzuzufügen, kann dich beim ersten Request sogar einen DNS-Lookup und einen TLS-Handshake kosten.
Footnotes
-
Shopify Dev, “The Shopify platform” - Das Shopify CDN wird von Cloudflare bereitgestellt, inklusive Brotli- und gzip-Komprimierung, HTTP/3 und TLS 1.3. https://shopify.dev/docs/storefronts/themes/best-practices/performance/platform ↩
-
Shopify, “Unlimited web hosting, worldwide” - “Jeder Plan enthält schnelles, zuverlässiges und unlimitiertes Hosting für dein Online-Business.” https://shopify.com/website/hosting ↩ ↩2
-
Shopify Dev Changelog, “Automatic image delivery in AVIF”, 29. August 2022 - Shopify prüft den Request und bestimmt das am besten kompatible Dateiformat, wie AVIF, WebP oder JPEG. https://shopify.dev/changelog/automatic-image-delivery-in-avif ↩
-
Shopify Dev, “image_url” Liquid Filter - Width und Height akzeptieren Werte bis zu 5760px, mindestens einer ist erforderlich, und Bilder werden niemals über ihre Originalgröße hinaus hochskaliert. https://shopify.dev/docs/api/liquid/filters/image_url ↩
-
Shopify Help Center, “Product media types” - Bilder müssen unter 20 MB groß sein und bis zu 5000 x 5000 px bzw. 25 Megapixel haben. https://help.shopify.com/en/manual/products/product-media/product-media-types ↩
-
Cloudinary, “Pricing” - ein Credit entspricht 1.000 Transformationen, 1 GB verwaltetem Speicherplatz oder 1 GB Viewing-Bandbreite. Planpreise von der Live-Seite abgelesen. https://cloudinary.com/pricing ↩