How the batch watermark images works
The browser decodes each source image, draws it on a clean canvas, calculates the selected anchor or repeating tile positions, and overlays the text or raster logo with the chosen opacity, scale, margin, and rotation. It then encodes a new JPEG, PNG, or WebP file and keeps processing sequential so large batches use less memory.
watermark size = image dimension × selected percentageText size uses the image's shorter edge; logo width uses the image width while preserving the logo aspect ratio.
Add a bottom-right logo to a product photo batch
Choose a transparent PNG logo, set its size to 22%, opacity to 65%, position to bottom right, and edge margin to 3%. The logo is scaled for each photo while its aspect ratio is preserved, so mixed image dimensions receive a consistent relative treatment.
Using the processed image
Keep the exported dimensions, format, transparency, and compression level appropriate for where the image will be used.
context.globalAlpha = 0.65;
context.drawImage(logo, x, y, width, height);
context.globalAlpha = 1;<img src="product-watermarked.webp" width="1600" height="1200" alt="Describe the product, not the watermark">Using the result accurately
Use a high-contrast logo or text that remains readable on both light and dark areas. Keep the mark large enough to survive responsive resizing, inspect every output near important subjects, and retain an unwatermarked master copy. Use descriptive filenames and accurate alt text when publishing the results; a watermark is not a substitute for useful page content or image accessibility.
A visible watermark can be cropped, covered, or removed and does not prove ownership by itself. The tool accepts static raster images only, does not preserve animation or embedded metadata, and re-encoding can change color, quality, and file size. SVG logo upload is not supported.
References: MDN Canvas API.