PortfolioNew Problems Emerge After Going Headless
While headless commerce brings design freedom and improved performance, it can also create new challenges around image delivery.
Especially when hosting your Next.js frontend on Vercel, AWS, or your own servers, image delivery methods can lead to unexpected costs and server load.
Why Does This Happen?
With Traditional Shopify Themes
In traditional Shopify themes, product images are served directly from Shopify's CDN.
Customer's Browser → Shopify CDN → Return Image
Shopify's CDN has servers worldwide and automatically handles image transformations (resizing, WebP conversion, etc.). All this load is handled by Shopify.
With Headless Architecture
In headless setups, the situation changes based on how you host your frontend.
Pattern A: Images Through Your Hosting Server
Customer's Browser → Your Server → Fetch from Shopify → Transform → Return
(CPU & Memory Consumption)
With this setup, your server handles all image fetching, transformation, and delivery.
Pattern B: Using Next.js Image
Customer's Browser → Vercel (Next.js Image) → Transform → Cache & Return
Next.js Image is convenient, but every transformation consumes server resources.
What Problems Actually Occur?
1. Increased Server Load
Product pages display many images—20-50 on a product list page, sometimes more.
For each image:
- Fetch original image
- Resize processing
- Format conversion (WebP, AVIF, etc.)
- Compression
All of these consume server CPU and memory. During sales periods with traffic spikes, image processing alone can overwhelm your server.
2. Rising Hosting Costs
On Vercel
Vercel provides image optimization, but charges based on transformation count.
- Pro Plan: 5,000 image optimizations included monthly
- Overage: $5 per 1,000 transformations
EC sites with many products can blow through this limit quickly. A site with 100K monthly PVs and 20 images per page averages 2 million image requests. Even with caching, costs add up significantly.
On AWS
When using Lambda@Edge or CloudFront Functions for image transformation, you're charged based on execution time and request count.
3. Slower Display Speed
When image transformation happens server-side, response time increases by that processing time.
- First request: Slow due to transformation (hundreds of ms to seconds)
- Subsequent requests: Fast if cached
The problem is that cache hit rates drop with many products. Cache invalidates with every new product addition or image update.
4. Complex Cache Management
Image caches vary by:
- Image size (1x, 2x, 3x, etc.)
- Format (WebP, AVIF, JPEG, etc.)
- Quality settings
- Crop settings
The same product image needs cache entries for all these combinations. Management becomes complex, and storage costs increase.
Real Numbers
Case Study: EC Site with 500 Products
Assumptions:
- Products: 500
- Images per product: 5 (1 main + 4 sub)
- Total images: 2,500
- Variations per image: 6 (size × format combinations)
- Total cached images: 15,000
Monthly Traffic:
- Page views: 100,000
- Image requests: ~2,000,000
Estimated Vercel Cost Increase:
- Image optimization overage: ~$10,000/month (!)
Of course, caching helps, but costs can still be significant.
Which Sites Face This Problem?
Sites with these characteristics are most likely to encounter image delivery issues:
- Many products (hundreds to thousands)
- Frequent product turnover (apparel, general goods)
- High-resolution images (fashion, interior design)
- High traffic (spikes during sales)
- Global presence (caching needed in each region)
Is There a Solution?
Yes! Using an external image delivery service (CDN) solves these problems.
A leading option is "Cloudinary." By routing Shopify images through Cloudinary for transformation and delivery, you can dramatically reduce your server's load and costs.
Next Steps
Let's look at how Cloudinary can solve these problems. We'll explain why Cloudinary is chosen and what benefits it offers.