Underlays, watermarking, and special effects

This page covers image underlays, watermarking, and special layer applications for images. For the layer syntax itself, see Layer syntax. For applying transformations to layers, see Transforming layers. For text layer options, see Text layer options.

Image underlays

Add an underlay image under a partially transparent base image with the underlay parameter (u in URLs) and the public ID of a previously uploaded image (e.g., u_background for an image with the public ID of background), with the following general syntax.

You can determine the dimension of the underlay using width and height, and adjust the location of the base image over the underlay using the gravity parameter and the x and y parameters. The underlay can also be further transformed like any other image uploaded to Cloudinary, and the underlay parameter supports the same features as for overlays as described above.

For example, add an underlay of an image called site_bg to the base image. The underlay and base image are both resized to the same width and height, and the brightness is increased to 100 using the brightness effect (c_fill,h_200,w_200/u_site_bg/c_scale,h_200,w_200/e_brightness:100/fl_layer_apply):

See full syntax: u_<image id> in the Transformation Reference.

Remote image underlays

Similar to overlaying a remote image, you can underlay a remote image using u_fetch:<base64 encoded URL>.

For example, add the background image, https://res.cloudinary.com/demo/image/upload/site_bg (base64 encoded: aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvc2l0ZV9iZw==), as an underlay, resized to match the size of the base image (u_fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvc2l0ZV9iZw==/c_fill,fl_layer_apply,fl_relative,h_1.0,w_1.0):

See full syntax: u_fetch in the Transformation Reference.

Watermarking

You can use a standard image layer for the purpose of applying a watermark to any delivered image. Opacity and/or brightness transformations are often applied to image layers when they are used as a watermark.

You can also use automatic tiling and/or the smart anti-removal effect with your layer transformation in order to achieve your watermark requirements.

Add watermarks with JavaScript video tutorial

Watch this video tutorial to learn how to protect your visual content by adding image and text watermarks using Cloudinary's JavaScript SDK.

Tutorial contents

Automatic tiling

Instead of adding your watermark layer to a single, specific location, you can tile layer image over the entire base image by adding the tiled qualifier (fl_tiled in URLs). The tiled flag is added in the same component as the layer_apply flag. For example, tiling an overlay of the image called cloudinary_icon_white on to the base image (l_cloudinary_icon_white/fl_layer_apply,fl_tiled):

To increase the spacing between repeated tiles, add padding to the overlay before tiling it. One way to do this is to apply a padding-based resize mode (for example, c_lpad) to the overlay, optionally adjust opacity/brightness, and then tile the result with fl_layer_apply,fl_tiled.

For example:

Smart anti-removal

You can use the anti-removal effect (e_anti_removal in URLs) to slightly modify image overlays in a random manner, thus making them much harder to remove (e.g., adding your logo as a watermark to assets). In most cases, the default level of modification is designed to be visually hard to notice, but still difficult to remove cleanly. If needed, you can optionally control the level of distortion that this transformation applies by adding a colon followed by an integer (the higher the number, the more the image is distorted). The anti_removal effect is added in the same component as the layer_apply flag.

For example, adding the anti-removal effect (with a high level of 90 for demonstration purposes) to an overlay of the image called cloudinary_icon_blue added to the north-east corner of the base asset, with the overlay's opacity set to 50% and scaled to a width of 150 pixels (c_scale,w_500/l_cloudinary_icon_blue/c_scale,w_150/o_50/e_anti_removal:90,fl_layer_apply,g_north_east):

See full syntax: e_anti_removal in the Transformation Reference.

Special layer applications

In addition to the primary use of layers for placing other assets or text on the base image, some transformation features make use of the layer option to specify a public ID that will be applied to the base image in order to achieve a desired effect. The following features make use of the layer transformation parameter in a special way:

Feature	Description
3D LUTs	3-color-dimension lookup tables (3D LUTs) map the color space in a LUT layer to the color space in a base image.
Displacement maps	Displace pixels in a base image based on the intensity of pixels in a displacement map layer image.
Blending and masking layers	Effects that blend or mask a base image based on the pixels in a layer image.
Shape cutouts	Remove or keep areas of a base image based on the opaque shape in a layer image.