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
    Comment Preview Using MooTools

    Comment previewing is an awesome addition to any blog. I've seen really simple comment previewing and some really complex comment previewing. The following is a tutorial on creating very basic comment previewing using MooTools. The XHTML You can set up your XHTML any way you'd like.

  • By
    Optimize Your Links For Print Using CSS — Show The URL

    When moving around from page to page in your trusty browser, you get the benefit of hovering over links and viewing the link's target URL in the status bar. When it comes to page printouts, however, this obviously isn't an option. Most website printouts...

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!