Next.js Image Gallery Demo
Comparing different image loading strategies with blur placeholders
Scenario 1
NEWExternal Blur URLs
Images loaded from BigCommerce CDN with 10px external blur placeholders
✓Instant blur effect
✓CDN-hosted images
✓No image bundling
⚠Requires custom Next.js
View demo →
Scenario 2
No Placeholders
Images loaded from CDN with no blur effect - empty space until loaded
✓CDN-hosted images
✓No image bundling
✓Standard Next.js
✗No blur effect
View demo →
Scenario 3
Local Images
Images served from repository via Vercel (auto-generated blur placeholders)
✓Auto blur generation
✓Standard Next.js
✗Images in repository
✗Larger bundle size
View demo →
Technical Implementation
Scenario 1: External Blur URLs (Custom Next.js)
This uses a modified version of Next.js that allows blurDataURL to accept external URLs instead of only Data URLs.
<Image
src="https://cdn.example.com/1200w/image.jpg"
placeholder="blur"
blurDataURL="https://cdn.example.com/10w/image.jpg"
/>Scenario 2: No Placeholders (Standard Next.js)
Standard Next.js Image component without any blur placeholder configuration.
<Image
src="https://cdn.example.com/1200w/image.jpg"
/>Scenario 3: Local Images (Standard Next.js)
Images stored in the repository. Next.js automatically generates blur placeholders at build time.
<Image
src="/images/local-image.jpg"
placeholder="blur"
/>Custom Next.js fork: github:bookernath/next.js#15.5-blurdata-restriction-removed