unpic-img
- A cross-framework component for responsive, high-performance images using image CDNs
- Supports multiple frameworks including Svelte, React, Vue, SolidJS, Astro, Preact, Qwik, WebC, Angular, and Lit
- Generates optimized
<img>
tags with propersrcset
andsizes
attributes for responsive images - Handles responsive resizing while preserving aspect ratio and preventing layout shift
- Uses native browser features like lazy loading and async decoding
- Supports multiple image layouts: fixed, constrained, and full width
- Delivers modern image formats (WebP/AVIF) when supported by browser
- Works with existing image CDNs/CMS without requiring build steps or server-side rendering
- Supports major image CDNs including Cloudinary, Imgix, Shopify, and others via unpic lib
- Can generate low-res placeholder images or integrate with `@unpic/placeholder`
Key Benefits:
- Follows best practices for image performance
- Generates clean HTML without wrapper elements
- No client-side JavaScript required by default
- Works with any frontend framework or none
Target Audience:
- Developers who want optimized responsive images without complex setup
- Teams using image CDNs/CMS services
- Projects across multiple frameworks that need consistent image handling
For more details see the documentation
imagesreactvueastropreactqwiksolidjssveltewebclitangular
Featured Stories
No featured articles here. Navigate to an article, then pick the Feature on menu button