CldImage Configuration
Configuration for CldImage is the same as getCldImageUrl, which both use the same underlying API.
General Props
| Prop Name | Type | Default | Example |
|---|---|---|---|
| config | object | - | { url: { secureDistribution: 'spacejelly.dev' } } |
| crop | string | "limit" | "thumb" |
| deliveryType | string | "upload" | "fetch" |
| effects | array | - | [{ background: 'blue' }] |
| fillBackground (Beta) | bool/object | - | {{ gravity: 'east' }} |
| format | string | "auto" | "webp" |
| gravity | string | "auto" | "faces" |
| height | number/string | - | 600 |
| onError | function/bool | - | (event) => {} |
| overlays | array | - | See Below |
| preserveTransformations | string | false | true |
| quality | string | "auto" | "90" |
| rawTransformations | array | - | ['e_blur:2000'] |
| removeBackground | bool/string | false | true |
| sanitize | bool | true if svg | true (Applies only to SVG) |
| seoSuffix | string | - | my-image-content |
| src | string | - | "my-public-id" |
| text | string | - | "Next Cloudinary" |
| transformations | string/array | - | ['my-named-transformation'] |
| underlay | string | - | "my-public-id" |
| underlays | array | - | See Below |
| unoptimized | boolean | - | See Below |
| version | number | - | 1234 |
| width | number/string | - | 600 |
| zoom | string | - | 0.5 |
| zoompan | bool/string/object | - | See Below |
Unoptimized images
The Next.js Image component provides the ability to pass in an unoptimized (opens in a new tab) flag as a way to deliver the raw image URL without any quality, format, or size changes. When using this or the global option, the CldImage component performs the same treatment by not adding the f_auto or q_auto parameters as well as not subjecting the image to any resizing.
Effect Props
| Prop Name | Type | Default | Example |
|---|---|---|---|
| art | string | - | "al_dente" |
| autoBrightness | bool/string | - | true, "80" |
| autoColor | bool/string | - | true, "80" |
| autoContrast | bool/string | - | true, "80" |
| assistColorblind | bool/string | - | true, "20", "xray" |
| background | string | - | "blue" |
| blackwhite | bool/string | - | true, "40" |
| blur | bool/string | - | true, "800" |
| blurFaces | bool/string | - | true, "800" |
| blurRegion | bool/string | - | true, "1000,h_425,w_550,x_600,y_400" |
| border | string | - | "5px_solid_purple" |
| brightness | bool/string | - | true, "100" |
| brightnessHSB | bool/string | - | true, "100" |
| cartoonify | bool/string | - | true, "70:80" |
| color | string | - | "blue" |
| colorize | string | - | "35,co_darkviolet" |
| contrast | bool/string | - | true, "100", "level_-70" |
| distort | string | - | "150:340:1500:10:1500:1550:50:1000", "arc:180.0" |
| fillLight | bool/string | - | true, "70:20" |
| gamma | bool/string | - | true, "100" |
| gradientFade | bool/string | - | true, "symmetric:10,x_0.2,y_0.4" |
| grayscale | bool | - | true |
| improve | bool/string | - | true, "50", "indoor" |
| multiply | bool | - | true |
| negate | bool | - | true |
| oilPaint | bool/string | - | true, "40" |
| opacity | number/string | - | 40, "40" |
| outline | bool/string | - | true, "40", "outer:15:200" |
| overlay | bool | - | true |
| pixelate | bool/string | - | true, "20" |
| pixelateFaces | bool/string | - | true, "20" |
| pixelateRegion | bool/string | - | true, "35,h_425,w_550,x_600,y_400" |
| redeye | bool/string | - | true |
| replaceColor | string | - | "saddlebrown", "2F4F4F:20", "silver:55:89b8ed" |
| saturation | bool/string | - | true, "70" |
| screen | bool | - | true |
| sepia | bool/string | - | true, "50" |
| shadow | bool/string | - | true, "50,x_-15,y_15" |
| sharpen | bool/string | - | true, "100" |
| shear | string | - | "20.0:0.0" |
| simulateColorblind | bool/string | - | "deuteranopia" |
| trim | bool/string | - | true, "50:yellow" |
| tint | bool/string | - | true, "100:red:blue:yellow" |
| unsharpMask | bool/string | - | true, "500" |
| vectorize | bool/string | - | true, "3:0.5" |
| vibrance | bool/string | - | true, "70" |
| vignette | bool/string | - | true, "30" |
View the Cloudinary docs (opens in a new tab) to see learn more about using effects.
Overlay Props
The overlays prop is an array of objects with the following configuration options:
| Property Name | Type | Example |
|---|---|---|
| appliedEffects | array | Same as effects, added as applied transformation |
| effects | array | See Below |
| position | object | See Below |
| publicId | string | "thumb" |
| text | object | string |
| url | string | "https://.../image.jpg" |
The position property can include:
| Property Name | Type | Example |
|---|---|---|
| angle | number | 45 |
| gravity | string | '"north_west"' |
| x | number | 10 |
| y | number | 10 |
Objects in the effects array can include everything in the effects options above as well as:
| Property Name | Type | Example |
|---|---|---|
| aspectRatio | string | "3.0" |
| crop | string | 10 |
| gravity | string | '"north_west"' |
| height | number | '600' |
| width | number | '600' |
The text property can include:
| Property Name | Type | Example |
|---|---|---|
| border | string | "20px_solid_blue" |
| color | string | "blueviolet" |
| fontFamily | string | "Open Sans" |
| fontSize | number | 48 |
| fontWeight | string | "bold" |
| letterSpacing | number | "14" |
| lineSpacing | number | "14" |
| stroke | bool | true in coordination with Border |
| textDecoration | string | "underline" |