How to add watermarks to your images on the fly

A watermark is an image, a text snippet, or a logo that is placed over another image in order to make it hard to copy, or use the image without permission. There are a couple of ways to add a watermarkto your image — with or without using Uploadcare.

Here is an example of a watermarked image:

An image of a pineapple with multiple watermarks

You can add watermarks by modifying the URLs of your images.

Prepare your tools

Adding a watermark will only require an overlay operation in the URLs of the images that you are already using in your app. While this operation could be applied more broadly, it’s perfect for this task.

The workflow looks like this:

  1. Upload the image to use as a watermark to Uploadcare
  2. Add the image UUID in an overlay operation to URLs of your images: -/overlay/:uuid/
  3. (optional) Merge the image with the watermark

This way, you will deliver properly watermarked images to your users, while storing the base image separately.

We’ll use this image as a basis for examples below:

/22240276-2f06-41f8-9411-755c8ce926ed/-/preview/1200x800/

A base image of a pineappleUpload an image that will be used as a watermark to Uploadcare. We used this one:

/b18b5179-b9f6-4fdc-9920-5539f938fc44/

Small image displaying text: Wow!

In order to apply a watermark to an image, you only need to construct a proper URL, and the pineapple will get its “Wow!”

You’ll need some Uploadcare basics:

  • The UUID is a unique identifier of an image on Uploadcare CDN
  • Image processing operations are chainable URL directives that transform the images on the fly

The super basic way

Just add an overlay operation with the overlay image UUID to the original image URL. This operation will add an opaque overlay to the top left corner of the pineapple picture:

-/overlay/b18b5179-b9f6-4fdc-9920-5539f938fc44/

Image of a pineapple with an opaque watermark in the top left corner

More variability: set the dimensions, position and opacity

Add additional parameters separated by a slash. They must go exactly in this order, though not every operation is necessary:

-/overlay/
  :overlay_UUID/
  :relative_dimensions/
  :position/
  :opacity/

:relative_dimensions

This parameter scales the overlay – it supports two scaling modes: static and dynamic.

Static scaling sets the size in pixels, and dynamic scaling derives the size of an overlay from the dimensions of an underlying image. The aspect ratio is always preserved, so you define the maximum size along one of its axes:

-/overlay/b18b5179-b9f6-4fdc-9920-5539f938fc44/800x800/

-/overlay/b18b5179-b9f6-4fdc-9920-5539f938fc44/50%x50%/ (don’t forget to escape the % signs with %25)

or

-/overlay/b18b5179-b9f6-4fdc-9920-5539f938fc44/50px50p/

An image of a pineapple with a large opaque watermark in the top left corner

:position

This parameter controls the positioning of an overlay on top of the original image using two coordinates separated by a comma. You can define the offset from the top left corner of the image in pixels or in percentage values:

-/overlay/b18b5179-b9f6-4fdc-9920-5539f938fc44/128,128/

-/overlay/b18b5179-b9f6-4fdc-9920-5539f938fc44/80p,80p/

An image of a pineapple covered by an opaque watermark

:opacity

The opacity parameter controls just how opaque the watermark is. The parameter uses percentage values only, where 100%, or 100p, is equal to a fully opaque image. The example below has the image at 30% opacity:

-/overlay/b18b5179-b9f6-4fdc-9920-5539f938fc44/30p/

A pineapple image with a semi-transparent watermark in the top left corner

Now, all together!

See the result on the image below.

-/overlay/b18b5179-b9f6-4fdc-9920-5539f938fc44/60px60p/10p,50p/30p/

An image of a pineapple with a semi-transparent large watermark located near the center of the page

You can layer as many watermarks over an image as you like. Here’s the image of a pineapple with four watermarks that all have different property values:

-/overlay/efd02791-7511-42e9-850d-3b3d07f110ae/35px35p/10p,10p/40p/-/overlay/b18b5179-b9f6-4fdc-9920-5539f938fc44/35px35p/70p,5p/35p/-/overlay/b18b5179-b9f6-4fdc-9920-5539f938fc44/35px35p/15p,70p/55p/-/overlay/efd02791-7511-42e9-850d-3b3d07f110ae/35px35p/80p,90p/50p/-/preview/1200x800/

An image of a pineapple with multiple watermarks

The most secure: merge the image with the watermark

Applying a watermark is as simple as extending an image URL. Thus, by just looking at a URL you made, a user may guess how to edit it to get rid of watermarks.

Using Upload API (upload from URL)

This is an easier way, in our opinion. You’ll be using the /from_url/ endpoint to upload a processed image as a new file:

  • Upload the processed image as a new image
  • Get a new UUID
  • Substitute the UUID in your app

Using REST API (copy to your project)

Use Uploadcare’s REST API to merge the image layers – the image and the watermark:

  • Make a copy of the processed image
  • Get a new UUID
  • Substitute the UUID in your app

You’ll be able to operate two image versions, the original, and the processed one. With these image versions you’ll be able to deliver a full-sized version with watermarks to your users, and generate thumbnails from the original.

General workflow

You can complete this task in four steps.

Step 1. Pick an image

/117a213f-94f5-453c-8533-ebde3c700d3b/-/preview/640x640/

A base image of a pineapple

Step 2. Add a watermark

Use the UUID of the watermark image, and optionally set its dimensions, position and opacity values using parameters in a specific order (all parameters are optional):

-/overlay/
  :overlay_UUID/
  :relative_dimensions/
  :position/
  :opacity/

/117a213f-94f5-453c-8533-ebde3c700d3b/-/preview/640x640/-/overlay/46d27658-220b-41e5-bf35-b71cc05ebcab/30p,50p/

An image of a pineapple with an opaque watermark close to the center of the page

This image has been resized to 640*640 pixels, with an opaque watermark applied that is offset by 30% and 50% from the top left.

Step 3. Upload or copy the processed image

Upload: Upload API

Make a request to https://upload.uploadcare.com/from_url/.

You will require only a Public key from the Uploadcare Dashboard in order to authenticate the request. Here is an example of the request object:

{
  "pub_key": "demopublickey",
  "source_url": "https://ucarecdn.com/117a213f-94f5-453c-8533-ebde3c700d3b/-/preview/640x640/-/overlay/46d27658-220b-41e5-bf35-b71cc05ebcab/30p,50p/",
  "store": "1"
}

Make sure you use "store": "1" setting if you wish to to store this file permanently.

Copy: REST API

Copy operations are usually performed using an Uploadcare library for your preferred language.

We recommend you use REST API v0.6 or higher.

Make a request to https://api.uploadcare.com/files/local_copy/.

You will require both a Public key, and a Secret key from the Uploadcare Dashboard in order to authenticate the request:

bash $ curl -X POST
-H "Authorization: Uploadcare.Simple public_key:private_key"
-d "source=117a213f-94f5-453c-8533-ebde3c700d3b/-/preview/640x640/-/overlay/46d27658-220b-41e5-bf35-b71cc05ebcab/30p,50p/"
-d "store=true"
"https://api.uploadcare.com/files/local_copy/"

Step 4. Update the image UUID in your app

One of the requests above has uploaded, or copied the processed image to your project as a new merged image. The file has a new UUID, and now you can you can use a direct link to it, without any operations, to deliver the image to your users:

/72659dd2-19d8-460d-961a-329424f2ba8a/

An image of a pineapple with a watermark baked into it

Bonus

Order.

The overlay operation is always performed last. Take a look at this example, where the image is also blurred:

-/overlay/:uuid/60px60p/20p,80p/80p/-/blur/70/

A blurred image of a pineapple with a sharp watermark on it

This sequence of operations places the watermark on the image only after it has been blurred.

Benchmark.

The tests have shown that it takes about 20 ms to add an overlay to a small (0.2 MP) image, and only 90 ms to a mid-sized one (3 MP) — a swell result, but our CDN also gets you a further boost in loading time.

If you have questions, be sure to contact our friendly Support engineers at help@uploadcare.com!

© 2011–2022 Uploadcare Inc.
Burrard St, Vancouver, BC V7X 1M8, Canada
Request status
SOC 2 Type 2 compliantGDPR compliantHIPAA-compliant environment