Wichtigste Erkenntnisse
- Die meisten Shops brauchen kein Drittanbieter-Image-CDN. Shopifys integriertes CDN skaliert, schneidet, komprimiert und formatiert (AVIF, WebP oder JPEG) bereits pro Request, ohne zusätzliche Kosten.
- Der Liquid-Filter
image_urlkümmert sich um width, height, crop, format und pad_color bis zu 5760px, undimage_taggeneriert standardmäßig ein responsivessrcsetmitloading="lazy".- Ein Drittanbieter-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-Nutzung sind die wahren Gründe.
- Cloudinary ist die Option für DAM-plus-Transformation und rechnet in 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 ein Wartungsaufwand ist, 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. Ist sie nicht. Jeder Shopify-Plan enthält ein globales CDN, das Bilder on-the-fly skaliert, komprimiert und das Format aushandelt, ohne dass du extra dafür zahlst.
Die wirklich nützliche Frage ist also enger gefasst. Was macht das integrierte CDN eigentlich, wo sind seine Grenzen und lösen Cloudinary oder Bunny Optimizer ein Problem, das du tatsächlich hast? Dieser Guide behandelt den Shopify-Standard im Detail und vergleicht dann alle drei hinsichtlich Kosten, Transformation-API, Formatunterstützung, Theme-Integration, Core Web Vitals und Lock-in.
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 einen Einstellungs-Toggle |
| AVIF-Output | Ja, automatisch | Ja | In den Optimizer-Docs nicht dokumentiert |
| Akzeptierte Quellformate | PNG, JPEG, PSD, TIFF, BMP, GIF, SVG, HEIC, WebP | Sehr breit, inkl. PDF und Video | Standard-Webformate |
Shopifys Format-Handling ist hier absolut konkurrenzfähig. Die Bunny Optimizer Doku zur Bildverarbeitung listet Konvertierungen zwischen JPEG, PNG, WebP und GIF auf, beschreibt WebP Auto-Serve als Einstellung und dokumentiert keinen AVIF-Output. Behandle AVIF bei Bunny als unbestätigt, bis du es mit deiner eigenen 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 inklusive | Credit-basiert: Free, Plus 99 $/Monat, Advanced 249 $/Monat | 9,50 $/Monat pro Website plus Bandbreite ab 0,01 $/GB |
| Transformationen | Resize, crop, pad, JPG/PJPG | Tiefgehend, chained, plus Video | Mittelfeld, via Query-Parameter |
| Auto-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 Non-Shopify-Assets |
| Wahrscheinlicher CWV-Gewinn | Baseline | Marginal | Marginal |
| Lock-in | Keiner | Hoch | Niedrig |
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 beinhaltet ein globales CDN, das auf Cloudflare basiert, mit unlimitiertem Hosting und unbegrenzter Bandbreite ohne zusätzliche Kosten. Es skaliert, schneidet und komprimiert Bilder auf Anfrage und wählt automatisch das beste Format für jeden Client.
Ja. Shopify prüft jeden Request und wählt basierend auf Client-Support, Qualität und Dateigröße zwischen AVIF, WebP und JPEG. Dies geschieht seit 2022 völlig automatisch und erfordert von deiner Seite keine Konfiguration oder Theme-Anpassung.
Nicht bei nativen Produktbildern. Shopify bietet keine Einstellung, um Produktmedien der Storefront auf ein anderes CDN umzuleiten. Drittanbieter-Image-CDNs laufen daher parallel zu cdn.shopify.com, statt es zu ersetzen. Cloudinary hostet eigene Kopien der Assets und verknüpft sie über eine Shopify-App mit Produkten, und Bunny wird in der Regel für Assets außerhalb der Shopify-Bilder-Pipeline verwendet.
Es lohnt sich, wenn du Digital Asset Management, tiefgehende Transformationen oder kanalübergreifendes Video brauchst. Es lohnt sich nicht rein für die Auslieferungsgeschwindigkeit, da Shopify die Format-Aushandlung und Edge-Delivery bereits abdeckt. Cloudinary rechnet in Credits ab, mit einem kostenlosen Tarif und bezahlten Plänen ab 99 $ und 249 $ pro Monat (zum Zeitpunkt des Schreibens).
Bunny Optimizer wird für 9,50 $ pro Monat und Website gelistet, inklusive unbegrenzter Requests, Optimierungen und Transformationen. Die CDN-Bandbreite wird separat berechnet, beginnend bei 0,01 $ pro GB für Europa und Nordamerika im Standard-Netzwerk, mit einem Minimum von 1 $ pro Monat. Prüfe die aktuellen Preise auf bunny.net, bevor du dich festlegst.
Produkt- und Kategoriebilder müssen unter 20 MB groß und maximal 5000 x 5000 px oder 25 Megapixel groß sein. Akzeptierte Formate sind PNG, JPEG, PSD, TIFF, BMP, GIF, SVG, HEIC und WebP, inklusive animierter GIFs und WebPs. Shopify empfiehlt 2048 x 2048 px für quadratische Produktbilder.
Bei Shopify selten signifikant. Wenn Bilder im Format optimiert sind und von einer Edge in der Nähe ausgeliefert werden, liegen die verbleibenden LCP-Probleme meist beim Theme: ein lazy-geladenes Hero-Bild, ein fehlendes srcset oder fehlende width- und height-Attribute. Ein zweites CDN kann beim ersten Request sogar einen zusätzlichen DNS-Lookup und TLS-Handshake kosten.
Footnotes
-
Shopify Dev, “The Shopify platform” - Das Shopify-CDN basiert auf Cloudflare, mit 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 beinhaltet 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 ermittelt das beste 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 nie über ihre ursprünglichen Abmessungen hinaus skaliert (upscaled). https://shopify.dev/docs/api/liquid/filters/image_url ↩
-
Shopify Help Center, “Product media types” - Bilder müssen unter 20 MB und bis zu 5000 x 5000 px oder 25 Megapixel groß sein. https://help.shopify.com/en/manual/products/product-media/product-media-types ↩
-
Cloudinary, “Pricing” - Ein Credit entspricht 1.000 Transformationen, 1 GB verwaltetem Speicher oder 1 GB Viewing-Bandbreite. Die Preise stammen von der Live-Seite. https://cloudinary.com/pricing ↩