About This Project
In a headless EC setup — where the commerce platform such as Shopify and the pages people actually look at are built separately — transforming and delivering product images becomes the job of your own hosting server (Vercel, AWS, and the like). A product listing page can easily carry dozens of images at once, so as traffic grows, image processing turns into real load on that server, and the overage fees charged per transformation grow along with it. Left alone, this is the kind of problem that quietly turns into an unexpected bill of several hundred dollars a month.
To solve it, we built a flow that delivers Shopify product images through Cloudinary, a cloud service that specialises in transforming, optimising, and delivering images. Register a product and its images are carried over to Cloudinary automatically; resizing, compression, and delivery all happen on the Cloudinary side. Our own server stops touching images entirely, which took the load to zero and turned an unpredictable overage bill into a flat, plannable plan fee.
For the person managing products, nothing about the daily routine changed — you still just register the product in Shopify. Only the machinery underneath was swapped out. Improving both page speed and cost without adding a single step to anyone's workflow is what this project actually delivered.
Learn More
Three articles cover this setup in detail. Reading them in order — the problem, the solution, then how it was built — makes the whole picture click.
Why Image Delivery Becomes a Problem
Why load and cost climb in a headless setup, and what the real-world impact looks like.
Cloudinary as an Option
What Cloudinary is, why teams choose it, and how it compares to Shopify CDN and Vercel image optimization.
Building the Flow
The full picture: syncing Shopify to Cloudinary, rewriting image URLs, and displaying them in Next.js.
Architecture
Original images
Image processing and CDN delivery
Fast display
In one sentence, the two diagrams say this: the image work our own server used to carry was handed over to Cloudinary in full. Images sync from Shopify to Cloudinary on their own, and reach users straight from Cloudinary's delivery points.
Main Results
- Server load: image processing load reduced to zero
- Cost: Vercel image optimization overage fees eliminated, replaced by a predictable plan fee
- Display speed: served from CDN locations worldwide, close to wherever the user is
- Transformation features: automatic format selection, automatic quality optimization, face-aware cropping and more now available
Tech Stack
- Cloudinary (image transformation and CDN delivery)
- Shopify Storefront API
- Next.js (custom image loader)
- Webhook (image sync)