CldImage Examples
Basic Transformations
Cloudinary supports a wide variety of powerful transformations that allow you to not only deliver, but easily edit and build new images on the fly.
Background Removal
Remove Background
removeBackground: Removes the background of the image using AI
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage width="960" height="600" src="<Your Public ID>" sizes="100vw" removeBackground alt="" />Color Background
background: Specifies a color to use as a background.
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage
width="960"
height="600"
src="<Your Public ID>"
sizes="100vw"
removeBackground
background="blueviolet"
alt=""
/>Image Background
underlay: Specifies a public ID to use as an underlaying image.
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage
width="960"
height="600"
src="<Your Public ID>"
sizes="100vw"
removeBackground
underlay="<Your Public ID>"
alt=""
/>Cropping & Resizing
Cropping
crop: Specifies the mode to use when cropping an image based on the given dimensions.
Note: By default, CldImage uses a gravity of auto, meaning the crop will automatically position the subject in the center of the resulting image.
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage width="300" height="300" src="<Your Public ID>" sizes="100vw" crop="thumb" alt="" />Generative Fill
fillBackground: Fills the background of an image using Generative AI
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage
src="<Your Public ID>"
width="960"
height="600" // Original 1440
crop="pad" // Returns the given size with padding
fillBackground
alt=""
sizes="100vw"
/>Generative Recolor
recolor: Recolors an object in an image using Generative AI
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage
src="<Your Public ID>"
width="960"
height="600"
crop="fill"
recolor={['shoelaces', 'purple']}
alt=""
sizes="100vw"
/>Generative Remove
remove: Removes an object in an image using Generative AI
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage
src="<Your Public ID>"
width="960"
height="600"
crop="fill"
remove="mountain"
alt=""
sizes="100vw"
/>Generative Replace
replace: Replaces an object in an image using Generative AI
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage
width="960"
height="600"
crop="fill"
src="<Your Public ID>"
replace={['turtle', 'shark']}
alt=""
sizes="100vw"
/>Generative Restore
restore: Restores an image using Generative AI
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage
src="<Your Public ID>"
width="960"
height="600"
crop="fill"
restore
sizes="100vw"
alt=""
/>Filters & Effects
Included in the Cloudinary transformations library are different filters and effects that allow you to recolor, improve, fix, and artistically transform your images.
Blur
blur: Applies a blurring filter to an asset.
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage width="960" height="600" src="<Your Public ID>" sizes="100vw" blur="1200" alt="" />Grayscale
grayscale: Converts an image to grayscale (multiple shades of gray).
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage width="960" height="600" src="<Your Public ID>" sizes="100vw" grayscale alt="" />Opacity
opacity: Controls the opacity level of an image.
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage width="960" height="600" src="<Your Public ID>" sizes="100vw" opacity="50" alt="" />Pixelate
pixelate: Applies a pixelation effect.
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage width="960" height="600" src="<Your Public ID>" sizes="100vw" pixelate alt="" />Tint
tint: Blends an image with one or more tint colors.
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage
width="960"
height="600"
src="<Your Public ID>"
sizes="100vw"
tint="equalize:80:blue:blueviolet"
alt=""
/>Chaining Multiple Effects
effects: An array of objects the configure the effects to apply to an image.
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage
width="960"
height="600"
src="<Your Public ID>"
effects={[
{
background: 'green'
},
{
gradientFade: true
},
{
gradientFade: 'symetric,x_0.5'
}
]}
alt=""
/>More Filters & Effects
Learn about what other filters and effects are supported on CldImage Configuration.
Image Overlays
Image overlays allow you to place one or multiple images on top of another image.
Overlay Image by Public ID
overlays: Any array of overlay objects
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage
width="960"
height="600"
src="<Your Public ID>"
sizes="100vw"
overlays={[
{
publicId: '<Your Public ID>',
position: {
x: 50,
y: 50,
gravity: 'north_west'
},
effects: [
{
crop: 'fill',
gravity: 'auto',
width: 500,
height: 500
}
]
}
]}
alt=""
/>Overlay Image with Blend Mode
appliedEffects: When configured on an overlay object, allows you to set an effect
that applies a blend mode, such as “multiply”
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage
width="960"
height="600"
crop="fill"
src="<Your Public ID>"
overlays={[
{
publicId: '<Your Public ID>',
effects: [
{
crop: 'fill',
gravity: 'auto',
width: 960,
height: 600
}
],
appliedEffects: [
{
multiply: true
}
]
}
]}
alt=""
/>Image Underlays
Image underlays allow you to place one or multiple images behind a base image.
Replace Background with Image
underlay: Public ID of image to use under base image
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage
width="960"
height="600"
src="<Your Public ID>"
sizes="100vw"
removeBackground
underlay="<Your Public ID>"
alt=""
/>Replace Background with Multiple Images
underlays: Array of underlay objects
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage
width="960"
height="600"
src="<Your Public ID>"
sizes="100vw"
removeBackground
underlays={[
{
publicId: '<Your Public ID>',
width: 480,
height: 600,
crop: 'fill',
position: {
gravity: 'north_west'
}
},
{
publicId: '<Your Public ID>',
width: 480,
height: 600,
crop: 'fill',
position: {
gravity: 'south_east'
}
}
]}
alt=""
/>Text Overlays
Text overlays allow you to place text on top of an image.
Adding Text
text: Adds text to an image with default settings
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage
width="1335"
height="891"
src="<Your Public ID>"
sizes="100vw"
blur="2000"
brightness="300"
text="Cool Beans"
alt=""
/>Adding Custom Text
overlays: Uses overlay objects to add text on top of an image.
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage
width="1335"
height="891"
src="<Your Public ID>"
sizes="100vw"
overlays={[
{
width: 2670 - 20,
crop: 'fit',
position: {
x: 140,
y: 140,
angle: -20,
gravity: 'south_east'
},
text: {
color: 'blueviolet',
fontFamily: 'Source Sans Pro',
fontSize: 160,
fontWeight: 'bold',
textDecoration: 'underline',
letterSpacing: 14,
text: 'Cool Beans'
}
}
]}
alt=""
/>Adding Text with Effects
effects: Applies effects to the overlaid text.
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage
width="1335"
height="891"
src="<Your Public ID>"
sizes="100vw"
overlays={[
{
text: {
color: 'white',
fontFamily: 'Source Sans Pro',
fontSize: 160,
fontWeight: 'bold',
text: 'Cool Beans'
},
effects: [
{
shear: '40:0',
opacity: 50
}
]
}
]}
alt=""
/>More Examples
Find more examples on Social Card Templates.