Wichtigste Erkenntnisse
- Die meisten Shops brauchen kein Image-CDN von Drittanbietern. Das integrierte CDN von Shopify übernimmt bereits Skalierung, Zuschnitt, Komprimierung und Format-Aushandlung (AVIF, WebP oder JPEG) pro Anfrage, ganz ohne zusätzliche Kosten.
- Der Liquid-Filter
image_urlverarbeitet Breite, Höhe, Zuschnitt, Format undpad_colorbis zu 5760px, undimage_taggeneriert standardmäßig ein responsivessrcsetmitloading="lazy".- Ein Image-CDN von Drittanbietern lohnt sich erst, wenn das Problem nicht die Auslieferung ist. Digital Asset Management, Video, Art Direction in großem Maßstab, außerhalb von Shopify gehostete Bilder und Multi-Channel-Wiederverwendung sind die echten Auslöser.
- Cloudinary ist die Option für DAM plus Transformation und rechnet in Credits ab. Bunny Optimizer ist die günstige Transformationsschicht für 9,50 $ pro Monat und Website zuzüglich Bandbreite.
- Keines von beiden kann
cdn.shopify.comfür native Produktbilder ersetzen. Beide laufen parallel dazu, was oft Wartungskosten verursacht, die die Leute vergessen einzukalkulieren.
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 sie nicht. Jeder Shopify-Plan enthält ein globales CDN, das Bilder on-the-fly skaliert, komprimiert und das Format aushandelt, und man zahlt dafür keinen Cent extra.
Die nützlichere Frage ist also spezifischer. Was genau macht das integrierte CDN, wo sind seine Grenzen, und lösen Cloudinary oder Bunny Optimizer wirklich ein Problem, das du hast? Dieser Guide behandelt den Shopify-Standard im Detail und vergleicht dann alle drei Optionen 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-Bereich tätig und haben mit hunderten von Shopify-Brands an ihren Storefronts gearbeitet. Jacques bringt über 15 Jahre Entwicklungserfahrung mit. Wir entwickeln Fudge, einen KI-Storefront-Editor mit einer Bewertung von 4.9 im Shopify App Store und “Built for Shopify”-Status. Wir arbeiten also genau in der Theme-Ebene, wo sich die Bildauslieferung entscheidet.
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, das von Cloudflare unterstützt wird, mit unbegrenztem Hosting und unbegrenzter Bandbreite ohne zusätzliche Kosten. Es skaliert, beschneidet und komprimiert Bilder auf Anfrage und wählt automatisch das beste Format für jeden Client aus.
Ja. Shopify prüft jede Anfrage und wählt basierend auf Client-Unterstützung, Qualität und komprimierter Größe zwischen AVIF, WebP und JPEG. Das geschieht seit 2022 automatisch und erfordert keine Konfiguration oder Theme-Anpassungen von deiner Seite.
Nicht für native Produktbilder. Shopify bietet keine Einstellung, um Produktmedien der Storefront auf ein anderes CDN zu verweisen. Daher laufen Image-CDNs von Drittanbietern parallel zu cdn.shopify.com, anstatt es zu ersetzen. Cloudinary hostet eigene Kopien von Assets und verknüpft sie über eine Shopify-App mit Produkten, und Bunny wird in der Regel für Assets außerhalb der Bildpipeline von Shopify verwendet.
Es lohnt sich, wenn du Digital Asset Management (DAM), komplexe Transformationen oder Video über mehrere Kanäle hinweg benötigst. Es lohnt sich nicht rein für die Auslieferungsgeschwindigkeit, da Shopify Format-Aushandlung und Edge-Delivery bereits übernimmt. Cloudinary rechnet in Credits ab, mit einem kostenlosen Tarif und kostenpflichtigen Plänen ab 99 $ bzw. 249 $ pro Monat zum Zeitpunkt der Recherche.
Bunny Optimizer wird mit 9,50 $ pro Monat und Website angegeben, mit unbegrenzten Anfragen, Optimierungen und Transformationen. CDN-Bandbreite wird separat berechnet, beginnend bei 0,01 $ pro GB für Europa und Nordamerika im Standardnetzwerk, mit einem monatlichen Minimum von 1 $. Überprüfe die aktuellen Preise auf bunny.net, bevor du dich festlegst.
Produkt- und Kategoriebilder müssen unter 20 MB groß sein und dürfen 5000 x 5000 px bzw. 25 Megapixel nicht überschreiten. Zu den akzeptierten Formaten gehören PNG, JPEG, PSD, TIFF, BMP, GIF, SVG, HEIC und WebP, wobei animierte GIFs und WebP unterstützt werden. Shopify empfiehlt 2048 x 2048 px für quadratische Produktbilder.
Bei Shopify selten deutlich. Sobald das Format für Bilder ausgehandelt wurde und sie von einer nahegelegenen Edge ausgeliefert werden, liegen die verbleibenden LCP-Probleme meistens auf der Theme-Seite: ein lazy-loaded Hero-Bild, ein fehlendes srcset oder fehlende Breiten- und Höhenattribute (width/height). Das Hinzufügen eines zweiten CDNs kann beim ersten Request sogar Zeit für einen DNS-Lookup und einen TLS-Handshake kosten.
Footnotes
-
Shopify Dev, „The Shopify platform“ – Shopifys CDN wird von Cloudflare unterstützt, 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 umfasst schnelles, zuverlässiges und ungemessenes Hosting für dein Online-Geschäft.“ https://shopify.com/website/hosting ↩ ↩2
-
Shopify Dev Changelog, „Automatic image delivery in AVIF“, 29. August 2022 – Shopify prüft die Anfrage und bestimmt das beste kompatible Dateiformat, wie z. B. AVIF, WebP oder JPEG. https://shopify.dev/changelog/automatic-image-delivery-in-avif ↩
-
Shopify Dev, Liquid-Filter „image_url“ – Breite und Höhe akzeptieren Werte bis zu 5760 px, mindestens ein Wert ist erforderlich, und Bilder werden niemals über ihre ursprünglichen Abmessungen hinaus hochskaliert. https://shopify.dev/docs/api/liquid/filters/image_url ↩
-
Shopify Help Center, „Product media types“ – Bilder müssen kleiner als 20 MB sein 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. Planpreise der Live-Seite entnommen. https://cloudinary.com/pricing ↩