Add watermarks to your images
- Prepare your tools
- The super basic way
- More variability: set the dimensions, position and opacity
- The most secure: merge the image with the watermark
- Bonus
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:

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:
- Upload the image to use as a watermark to Uploadcare
- Add the image UUID in an overlay operation to URLs of your images:
-/overlay/:uuid/
- (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/640x480/
/b18b5179-b9f6-4fdc-9920-5539f938fc44/
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/

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/

: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/
: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/
Now, all together!
See the result on the image below.
-/overlay/b18b5179-b9f6-4fdc-9920-5539f938fc44/60px60p/10p,50p/30p/
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/640x480/
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/
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/
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/
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/

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!