<CldImage />
Examples

CldImage Examples

Effects

  • Background Removal

    removeBackground

    Background removal requires the Cloudinary AI Background Removal Add-On

  • Generative Fill

    width="960"
height="600" // Original 1440
crop="pad" // Returns the given size with padding
fillBackground // Uses AI to extend image

    The generative fill transformation is currently in Beta. Learn more.

  • Zoom & Pan

    zoompan="loop"

  • Blur

    blur="1200"

  • Pixelate

    pixelate

  • Grayscale

    grayscale

  • Tint

    tint="equalize:80:blue:blueviolet"

  • Opacity

    opacity="50"

  • Shear

    shear="40:0"

  • Border

    border="40px_solid_purple"

  • Background

    removeBackground
background="blue"

  • Trim

    removeBackground
trim

  • Multiple Effects

    effects={[
  {
    background: 'green'
  },
  {
    gradientFade: true
  },
  {
    gradientFade: 'symetric,x_0.5'
  }
]}
See all supported effects on github.com.

Cropping

  • Original

  • Thumbnail with Auto Gravity

    crop="thumb"
gravity="auto"

  • Thumbnail with Faces Gravity

    crop="thumb"
gravity="faces"

  • Thumbnail with Faces Gravity and Zoom

    crop="thumb"
gravity="faces"
zoom="0.5"

Image Overlays

  • Overlay Image by Public ID

    overlays={[{
  publicId: `images/earth`,
  position: {
    x: 10,
    y: 10,
    gravity: 'north_west',
  },
  effects: [
    {
      crop: 'fill',
      gravity: 'auto',
      width: 500,
      height: 500
    }
  ]
}]}

  • Overlay with Multiply Effect

    overlays={[{
  publicId: `images/earth`,
  effects: [
    {
      crop: 'fill',
      gravity: 'auto',
      width: 960,
      height: 600
    }
  ],
  appliedEffects: [
    {
      multiply: true
    }
  ]
}]}

  • Overlay with Screen Effect

    overlays={[{
  publicId: `images/earth`,
  effects: [
    {
      crop: 'fill',
      gravity: 'auto',
      width: 960,
      height: 600
    }
  ],
  appliedEffects: [
    {
      screen: true
    }
  ]
}]}

  • Overlay with Overlay Effect

    overlays={[{
  publicId: `images/earth`,
  effects: [
    {
      crop: 'fill',
      gravity: 'auto',
      width: 960,
      height: 600
    }
  ],
  appliedEffects: [
    {
      overlay: true
    }
  ]
}]}

Image Underlays

  • Background Removal with Underlay by Public ID

    removeBackground
underlay="images/galaxy"

    Background removal requires the Cloudinary AI Background Removal Add-On

  • Background Removal with Multiple Underlays

    removeBackground
underlays={[
  {
    publicId: 'images/galaxy',
    width: 480,
    height: 600,
    crop: 'fill',
    position: {
      gravity: 'north_west'
    }
  },
  {
    publicId: 'images/mountain',
    width: 480,
    height: 600,
    crop: 'fill',
    position: {
      gravity: 'south_east'
    }
  },
]}

    Background removal requires the Cloudinary AI Background Removal Add-On

Text Overlays

  • Text Overlay with text prop

    text="Cool Beans"

  • Text Overlay with text string

    overlays={[{
  text: 'Cool Beans'
}]}

  • Text Overlay with overlay configuration

    overlays={[{
  width: 2670 - 20,
  crop: 'fit',
  position: {
    x: 10,
    y: 10,
    gravity: 'north_west',
  },
  text: {
    color: 'blueviolet',
    fontFamily: 'Source Sans Pro',
    fontSize: 160,
    fontWeight: 'bold',
    textDecoration: 'underline',
    letterSpacing: 14,
    text: 'Cool Beans'
  }
}]}

  • Text Overlay with Effects

    overlays={[{
  text: {
    color: 'white',
    fontFamily: 'Source Sans Pro',
    fontSize: 160,
    fontWeight: 'bold',
    text: 'Cool Beans'
  },
  effects: [
    {
      shear: '40:0',
      opacity: 50
    }
  ]
}]}

Next Image Features

  • Fill

    <div style={{ position: 'relative', height: '10em' }}>
...
fill={true}

Flags

  • Keep IPTC

    flags={['keep_iptc']}
quality="default"

    The keep_iptc flag requires not including a quality of auto. Using quality="default" avoids setting the quality flag in the URL.

Other

  • Named Transformations

    transformations={[
  'next-cloudinary-named-transformation'
]}

  • Raw Transformations

    rawTransformations={[
  // Example from Cloudinary Media Editor widget
  'c_crop,h_359,w_517,x_1483,y_0/c_scale,h_359,w_517/f_auto,q_auto'
]}

  • Preserve Transformations

    src={`https://res.cloudinary.com/<Cloud Name>/image/upload/c_fill,h_300,w_250/e_blur:1000/v1/<Public ID>`}
preserveTransformations
tint="equalize:80:blue:blueviolet"
ConfigurationBasic Usage