Svelte component for responsive, high-performance images.
npm install @unpic/svelte!tree
Svelte component for responsive, high-performance images. Generates a responsive tag that follows best practices, with the correct srcset, sizes and
styles. Detects image URLs from most image CDNs and CMSs and can resize images
with no build step.
- Just an tag! No extra elements, no runtime JavaScript. Easy to style.
- Automatically generates correct srcset and sizes attributes for responsive
images
- Handles responsive resizing of images, preserving aspect ratio
- Uses native lazy loading and async decoding for offscreen images
- Handles different image layouts: fixed, constrained and full width
- Uses eager loading and high priority fetching for important images
- Delivers modern image formats, including WebP and AVIF if supported by your
browser
- No built step or server-side rendering required: uses your existing image CDN
or CMS, with no additional configuration
- Uses unpic to support most image CDNs,
including Cloudinary, Imgix, and Shopify
- Can generate a low-res background image for a blurred placeholder effect
``bash`
npm install @unpic/svelte
`svelte
layout="constrained"
width={800}
height={600}
alt="A lovely bath"
/>
``
For the supported props, see the docs.