Configuring Cloudinary Build Plugin

Plugin Inputs

cloudNamestringNo*mycloudCloudinary Cloud Name
cnamestringNodomain.comThe custom domain name (CNAME) to use for building URLs (Advanced Plan Users)
deliveryTypestringNofetchThe method by which Cloudinary stores and delivers images (Ex: fetch, upload)
folderstringNomyfolderFolder all media will be stored in. Defaults to Netlify site name
imagesPathstring/ArrayNo/assetsLocal path application serves image assets from
loadingStrategystringNoeagerThe method in which in which images are loaded (Ex: lazy, eager)
maxSizeobjectNoSee BelowSee Below.
privateCdnbooleanNotrueEnables Private CDN Distribution (Advanced Plan Users)
uploadPresetstringNomy-presetDefined set of asset upload defaults in Cloudinary

Cloud Name must be set as an environment variable if not as an input

Max Size

The Max Size option gives you the ability to configure a maximum width and height that images will scale down to, helping to avoid serving unnecessarily large images.

By default, the aspect ratio of the images are preserved, so by specifying both a maximum width and height, you're telling Cloudinary to scale the image down so that neither the width or height are beyond that value.

Additionally, the plugin uses a crop method of limit which avoids upscaling images if the images are already smaller than the given size, which reduces unnecessary upscaling as the browser will typically automatically handle.

The options available are:

dprstring2.0Device Pixel Ratio which essentially multiplies the width and height for pixel density.
heightnumber600Maximum height an image can be delivered as.
widthnumber800Maximum width an image can be delivered as.

It's important to note that this will not change the width or height attribute of the image within the DOM, this will only be the image that is being delivered by Cloudinary.

Environment Variables

CLOUDINARY_CLOUD_NAMENo*mycloudCloudinary Cloud Name
CLOUDINARY_API_SECRETNoabcd1234Cloudinary API Secret

Cloud Name must be set as an input variable if not as an environment variable

Setting your Cloud Name

You have two options for setting your Cloud Name: plugin input or environment variable.

Netlify UI

Inside of your build settings, configure build environment variable (opens in a new tab) for the following:

Value: <Your Cloud Name>

File-based Configuration

Inside your Netlify config, add the following input configurations under your netlify-plugin-cloudinary plugin:

  cloudName = "<Your Cloud Name>"