Image hosting for Next.js next/image with external sources.
Next.js's next/image optimizer is world-class — but only for images you serve. For user uploads, marketing pages, or content pulled from a headless CMS, you need an external CDN that plays nicely with remote patterns.
Upload an image →Why hosting matters on Next.js
next/image remote patterns
Add imagetourl.cloud to next.config.js images.remotePatterns and next/image will auto-optimize, resize, and serve WebP/AVIF variants from our URLs.
Separation of concerns
Keep uploads and assets out of your git repo. Edge deployments (Vercel, Netlify, Cloudflare Pages) shouldn't slow-sync gigabytes of images on every deploy.
Static export support
If you next build + next export, next/image can't optimize at runtime. External URLs served by a real CDN are the pragmatic replacement.
User-generated content
UGC uploads from authenticated users can POST to our API and return a CDN URL — store the URL in your DB, ref it from next/image.
How to embed
Upload image
Via the UI or POST to /api/upload — receive a JSON response with the URL.
Configure next.config.js
Add { protocol: 'https', hostname: 'imagetourl.cloud' } to images.remotePatterns. Restart dev server.
Use <Image src={url} />
Pass the URL into next/image. Widths, srcset, lazy-loading, and format auto-swap all work.
FAQ
Do I really need remote patterns configured?
Yes — Next.js refuses to optimize images from unknown hostnames for security. Add imagetourl.cloud to remotePatterns in next.config.js and you're done.
Does next/image still optimize external URLs?
Yes. Next.js fetches the source from our CDN once, resizes/converts to WebP/AVIF, and caches the variants. Subsequent users hit the Next.js cache, not our CDN.
Vercel vs Cloudflare Pages?
Vercel's image optimizer is the default behind next/image. Cloudflare Pages uses its own image-resizing service — both work with external URLs.
Does static export break this?
next export can't optimize images at runtime. Options: pre-generate sizes with the image resizer, or switch to the Cloudflare Pages image service via @cloudflare/next-on-pages.
CORS concerns?
ImageToURL serves images with Access-Control-Allow-Origin: *, so any frontend can fetch and display. No CORS errors in canvas or drawImage contexts.
Upload via API from Next.js server?
Yes. POST multipart form to /api/upload with your Pro/Business API key. Store the returned URL in your database.
Pricing concerns with heavy next/image cache hits?
Your bandwidth bill lives with your Next.js host (Vercel, Cloudflare). ImageToURL serves the original once, not on every render.
What if I use Tanstack Start / Remix / SvelteKit?
Same idea — any framework that accepts remote image URLs works. Remix uses whatever img optimizer you configure; SvelteKit does similar.