Desource ImageDeployment-aware provider selection
Leave provider on auto. Desource Image detects Vercel, Netlify, or AWS Amplify and uses IPX elsewhere.
Optimized images for React, Angular, and Svelte
Ship the right image. Every time.
AI-assisted development moves ideas into working products quickly. Desource Image keeps image preparation inside that development loop. Add one suitable local or remote source, then control quality, format, crop, and responsive sizes with component props.
- Auto
- deployment provider
- 46
- provider modules
- 3
- native framework APIs
Angular 19-22 React 18-19 Svelte 5 Next.js SSR support
Built for fast product iterations
Change image quality, format, crop, or responsive sizes in code.
Keep /img/hero.jpg instead of exporting hero-480.webp, hero-960.webp, and hero-1600.webp. For MVPs and everyday product development, adjust the output in component code while
the source file and filename stay unchanged.
46 provider modules
Use Cloudinary, Imgix, ImageKit, Sanity, Contentful, Shopify, or another built-in provider.
Responsive images and modern formats
Generate width or density candidates, breakpoint-aware sizes, AVIF/WebP sources, and a fallback image.
Native framework APIs
Use Angular components, React components and hooks, or Svelte components, actions, and attachments.
Provider: auto
With Desource Image, the optimizer follows the deployment.
The same source can use Vercel Image Optimization on Vercel, Netlify Image CDN on Netlify, AWS Amplify Image Optimization on Amplify, and IPX during local development or on other hosts. An explicit provider always wins.
provider: 'ipx'provider: 'vercel'provider: 'netlifyImageCdn'provider: 'awsAmplify'Netlify Large Media is selected when its environment is present.
Explicit provider config always takes priority.
Powered by Desource Image
Change image settings. Inspect every generated candidate.
This page uses the published API. Each control updates the provider URL, dimensions, format, quality, srcset, and sizes through @desource/image.
960px 76% quality responsive
Change the request
liveGenerated URL
/_vercel/image?url=%2Fimg%2Fworkspace.jpg&w=1024&q=76React, Angular, and Svelte
Share image rules across framework-native APIs.
Use Angular components and directives, React components and hooks, or Svelte components, actions, and
attachments. Output remains native <img> and <picture> markup.
- ✓ Angular components and directives
- ✓ React components and hooks
- ✓ Svelte components, actions, and attachments
- ✓ Native image and picture markup
<script lang="ts">
import { Picture } from '@desource/image-svelte';
</script>
<Picture
src="/hero.jpg"
alt="Desert landscape"
width={1600}
height={1000}
sizes="100vw md:760px"
format="avif,webp"
quality={76}
/>Provider configuration is optional
Install the framework package. Render an image.
Leave provider unset. Local development uses IPX; supported deployments use their native image service. Add config only for shared presets, aliases, source rules, or an explicit provider.
npm install @desource/image-svelte- Add the framework package
- Render
Image,Picture, or a native-element integration - Set quality, format, crop, and responsive sizes in code
- Let
provider: 'auto'follow the deployment
46 built-in provider modules
Use the CDN, CMS, or image service already in your stack.
Desource Image handles provider selection, modifier translation, and URL generation. Provider subpath imports remain tree-shakable. Set a default provider or override it per image.
Drag to explore. Select a provider for setup, options, and examples.
Browse all 46 providers
- IPX
- Cloudinary
- Imgix
- Vercel
- Netlify Image CDN
- AWS Amplify
- ImageKit
- Cloudflare Transformations
- Contentful
- Directus
- Sanity
- Storyblok
- Shopify
- Supabase
- Uploadcare
- Unsplash
- Aliyun
- Bunny
- Builder.io
- Caisy
- Cloudflare Images
- Cloudimage
- EdgeOne Pages
- Fastly
- Filerobot
- Flyimg
- GitHub Avatars
- Glide
- Gumlet
- Hygraph
- ImageEngine
- imgproxy
- IPX Static
- Netlify
- Netlify Large Media
- Picsum
- Prepr
- None
- Prismic
- Strapi
- Strapi 5
- TwicPics
- Umbraco
- Wagtail
- Weserv
- Sirv
How it compares
Framework defaults solve images inside one framework.
Desource Image handles image rules that must work across runtimes, providers, and deployment targets.
| Option | Best fit | Provider choice | Use Desource Image when |
|---|---|---|---|
React <img> | Native browser images when the application owns its markup and URLs | The browser requests src unchanged; deploying to Vercel, Netlify, or Amplify does not rewrite
it | You want responsive sizes, format, and quality controlled in component code, plus picture output, placeholders, preloads, and an optimizer that follows the deployment. |
| next/image | Next-only applications using the Next.js image pipeline | Next.js optimizer by default. Vercel, Netlify, and AWS Amplify integrate next/image with their
hosting pipelines. Other image services use a custom loader. | You want broader built-in provider support without replacing the component, or provider policy, presets, aliases, and source rules must remain stable across frameworks and hosts. |
| NgOptimizedImage | Angular performance checks, loading hints, and responsive image output | A generic, built-in, or custom IMAGE_LOADER selected in Angular configuration | You want deployment auto-detection, local IPX, native picture output, per-image providers, or a broader provider catalog. |
| enhanced:img | Static local assets transformed during the Vite build | Images are processed at build time; the deployment does not switch them to its image service | You want local images transformed on demand, images from a CMS or API, or the deployment platform's optimizer in production. |
| Unpic | Cross-framework responsive images already hosted on recognizable CDN or CMS URLs | Detects the provider from each source URL; local or unknown sources need a fallback | Vercel, Netlify, or AWS Amplify should choose the optimizer for every source, including relative paths, with presets, aliases, source rules, picture output, or server adapters. |
Native framework APIs
Use components, native elements, or headless helpers.
Image / DsImage Responsive image components
Generate provider URLs, responsive candidates, placeholders, preloads, native attributes, and events.
Picture / DsPicture Ordered modern formats
Render AVIF and WebP sources with a controlled, transparent-safe fallback image.
useImage / DsImageService Callable URL helper
Generate provider URLs for CSS, canvas, metadata, headless UI, email, or custom rendering.
hook / action / attachment / directive Keep native markup
Apply the same provider and responsive behavior to image and picture elements owned by the application.
@desource/image/providers/* Tree-shakable providers
Import only the provider modules configured by the application.
@desource/image/kit Build an integration
Use typed parsers, operation generators, config guards, and provider primitives in custom framework glue.
Make image quality a code change.
Install the framework package. Keep auto-detection, or select any built-in provider when the application needs control.