Getting Started

Next Cloudinary

High-performance image delivery and uploading at scale in Next.js powered by Cloudinary.

  • Automatically optimize images and deliver in modern formats
  • Remove backgrounds from images
  • Dynamically add image and text overlays to images
  • AI-based cropping and resizing
  • Transform images using color and effects
  • Generate Open Graph Social Media cards on the fly
  • Drop-in Upload Widget
  • ...all at scale with Cloudinary
  • Original image of woman with headphones
  • Image of woman with headphones transformed 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"
/>