Using the watermark maker
Your originals stay clean. The watermark is applied only to the images that are uploaded to your site. The photos on your computer are never changed, so you always keep an unmarked copy.
Flying Pigs Pro can put a watermark on your photos as they upload: your name, your site, a sale banner or your logo. The watermark is added in your browser before anything leaves your computer, so the server does no extra work. You can bring your own watermark image, or build one from text and a logo in the watermark maker.
The watermark is a Pro feature. Open it from the Watermark panel under Settings on the Media > Flying Pigs Uploader page.
Before you start
- Turn on Optimize original in the Media panel. The watermark is drawn onto the photo during optimizing, so with it off the photo uploads unchanged and gets no mark.
- Only administrators can change the Watermark panel. The watermark then applies to everyone's uploads on the site.
Build a watermark from text
- In the Watermark panel, click Create text watermark….
- Type the first line in Text, for example © Joe's Used Sporting Goods or GRAND OPENING SALE.
- If you want a second, smaller line under it, type it in Second line, for example joessportinggoods.com or 20% OFF.
- Style each line on its own row: its color, its font, and its size.
- If you like, click Add logo… to put your logo to the left of the text, as tall as the text.
- Choose Outline or Box if the mark needs to stand out (see below).
- Watch the preview, then click Use this watermark.
The preview shows the mark on a sample photo 1600 pixels wide, and redraws as you type.
Font
Each line has its own font: Sans-serif, Fredoka (the rounded face of the Flying Pigs name), Serif, Monospace or Light sans-serif. The second line uses the first line's font until you pick one for it, so a bold sale line over a light web address is two clicks.
Size
Each line has a size slider. The number beside it is the height of the letters as a share of the photo's width: at 4%, the letters on a 1600-pixel photo are 64 pixels tall.
The slider stops where the mark reaches the photo's edges, because a watermark cannot be wider than the photo. Long text therefore gets a shorter slider than short text. To make long text bigger, shorten it or move part of it to the second line.
Outline and box
- Outline draws a dark edge around the letters, so white text stays readable on light photos.
- Box puts a see-through dark plate behind the whole mark, for busy photos.
Logo
The logo can be a PNG, JPEG, WebP or SVG file up to 512 KB. It sits to the left of the text and is scaled to the height of the text. A logo with a transparent background looks best.
Use your own watermark image
Instead of building one, click Choose image… and pick a PNG, JPEG or WebP file up to 1 MB. A PNG with a transparent background works best.
Where and how the mark goes on
- Size: the width of the mark as a share of each photo's width. The default is 25%. When you use a mark from the maker, Size is set for you from the text sizes you picked.
- Opacity: how solid the mark is. The default is 60%.
- Margin: the gap from the edges of the photo, in pixels on the full-size image. The default is 16.
- Skip images narrower than: photos narrower than this get no mark. The default is 300 pixels, so small icons and logos are left alone.
- Position: click one of the nine squares, from top left to bottom right. The default is bottom right.
The mark is drawn on the full photo, and every size is cut from the marked photo. WooCommerce's shop thumbnails and other square sizes are cropped from the middle, so a mark in a corner or along the bottom can be cut off in them. For a sale banner that must show everywhere, put it in the center.
Turn it on
Switch on Add watermark to uploaded images at the top of the panel. Every photo you upload from then on gets the mark, until you switch it off.
A sale mark on, then off again
With Overwrite existing files in the run options (Pro), you can put a mark on photos that are already on your site and take it off again later:
- Make the sale mark, turn the watermark on, turn on Overwrite, and upload the same photos again. They are replaced at the same addresses, and your products and pages keep showing them.
- When the sale ends, turn the watermark off, keep Overwrite on, and upload the same photos again. The clean photos go back in place.
This works because your originals are never marked: the mark is burned into the uploaded files only, and the clean photos on your computer are what you upload to take it off.
Good to know
- What you type in the maker, and its logo, is remembered in this browser for next time. The watermark itself is saved for the site.
- After an overwrite, clear your site's and CDN's caches, or visitors may keep seeing the old photos for a while.
- The watermark needs the browser image engine. On a device where the engine cannot start, the page says so and the watermark is switched off.