Svelte Cloudinary
High-performance image and video delivery and uploading at scale in Svelte/SvelteKit powered by Cloudinary.
- Automatically optimize images and videos and deliver in modern formats
- Remove backgrounds from images
- Dynamically add image and text overlays to images and videos
- AI-based cropping and resizing
- Transform images and videos using color and effects
- Generate Open Graph Social Media cards on the fly
- Drop-in Upload Widget
- …all at scale with Cloudinary
<CldImage
width="987"
height="987"
src={`images/woman-headphones`}
sizes="50vw"
crop="thumb"
gravity="faces"
removeBackground
tint="40:253f8c"
underlay={`images/city-skyline`}
overlays={[
{
position: {
gravity: 'north',
y: 60
},
text: {
color: 'rgb:52a4ff80',
fontFamily: 'Source Sans Pro',
fontSize: 320,
fontWeight: 'black',
text: 'MUSIC',
letterSpacing: -10,
lineSpacing: -100,
stroke: true,
border: '20px_solid_rgb:2d0eff99'
}
},
{
position: {
gravity: 'south',
y: 60
},
text: {
color: 'rgb:52a4ff80',
fontFamily: 'Source Sans Pro',
fontSize: 320,
fontWeight: 'black',
text: 'IS LIFE',
letterSpacing: -10,
lineSpacing: -100,
stroke: true,
border: '20px_solid_rgb:2d0eff99'
}
}
]}
alt="Image of woman with headphones transformed with Cloudinary"
/>