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

  • By
    CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    Spatial Navigation

    Spatial navigation is the ability to navigate to focusable elements based on their position in a given space.  Spatial navigation is a must when your site or app must respond to arrow keys, a perfect example being a television with directional pad remote.  Firefox OS TV apps are simply...

  • By
    Animated AJAX Record Deletion Using jQuery

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with jQuery JavaScript. The PHP - Content & Header The following snippet goes at the...

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!