How to Watermark Images and Videos

By  on  

As a content creator I respect an author or artist's desire to protect their work.  I don't consider this blog art but I'm annoyed as hell when I see my blog posts show up on another site.  I'm lucky enough that my blog is mostly recreational but many people rely on their work for a living, especially photographers and graphic artists.  One (weak) way to intellectually protect your work is by watermarking art, from imagery to video and more.  Let me show you how you can watermark basic images, animated GIFs, and videos!

Watermark an Image

How to Watermark an Image

The best way to watermark an image from command line is ImageMagick.  It will be easiest to show you the command and then explain it, so here we go:

composite -gravity southeast -geometry +10+10 -dissolve 75% watermark.png ringo.jpg ringo-watermarked.jpg
  • We'll use the composite utility instead of ImageMagick's popular convert
  • -gravity represents the direction within the image where the watermark should appear
  • geometry represents x and y padding offsets from the gravity position
  • -dissolve represents the opacity level of the watermark

The last three arguments represent the watermark, the source image, and the merged output image name.

If you're looking to watermark an entire directory of images, you can use this helpful shell script:

ls -1 source/photo_*.jpg \
    | awk -F\/ '{print "$COMPOSITE -gravity southeast watermark.png source/"$(NF)" watermarked/"$(NF)}'

This shell script was found at http://www.the-art-of-web.com/system/imagemagick-watermark/

Watermark an Animated GIF

How to Watermark an Animated GIF

Animated GIFs are another beast:  if you try to watermark them with the ImageMagick method used for a static image, you'll simply get the result of the first frame.  Watermarking an animated GIF will take a differnet ImageMagick tactic:

convert wtf.gif -coalesce -gravity southeast -geometry +10+10 null: watermark.png -layers composite -layers optimize wtf-watermarked.gif

To treat an animated GIF, we'll use the convert utility to kick off the process but still use composite to layer the GIF and watermark.

Watermark a Video

Videos require another utility for watermarking:  ffmpeg.  It impossible to write a better post than Kevin Sloan's Watermarking Videos from the Command Line with FFMPEG Filters, so I'll simply cite his post:

./ffmpeg -i wtf.mpg -i watermark.png -filter_complex "overlay=10:10" wtf-watermarked.mpg

As mentioned above, Kevin's post is top class -- be sure to read it if you're looking for more detailed options and examples.

Watermarking is an important part of intellectual property on the web (as long as it's not cropped out or defaced);  you can't blame a content creator for wanting to ensure their work is sourced.  And since many watermarking software apps cost a good chunk of change, it's important that people know you can watermark for free using awesome utilities like ImageMagick and ffmpeg.

Recent Features

Incredible Demos

  • By
    Spoiler Prevention with CSS Filters

    No one likes a spoiler.  Whether it be an image from an upcoming film or the result of a football match you DVR'd, sometimes you just don't want to know.  As a possible provider of spoiler content, some sites may choose to warn users ahead...

  • By
    CSS Triangles

    I was recently redesigning my website and wanted to create tooltips.  Making that was easy but I also wanted my tooltips to feature the a triangular pointer.  I'm a disaster when it comes to images and the prospect of needing to make an image for...

Discussion

  1. This is a great read, I always forget to do this with my photos. Thanks for explaining on how to do it the correct way!

  2. Marcin

    I think it’s better to implement watermarking in CMS itself (if you need sign pictures for blog etc.) rather than manually (even if it’s simple) sign pictures from command line. Of course for social media and similar this solution is good.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!