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
    6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos

  • By
    jQuery UI DatePicker:  Disable Specified Days

    One project I'm currently working on requires jQuery. The project also features a datepicker for requesting a visit to their location. jQuery UI's DatePicker plugin was the natural choice and it does a really nice job. One challenge I encountered was the...

  • By
    Add Site Screenshots for External Links Using MooTools Tooltips

    Before you send your user to an unknown external website, why not provide them a screenshot of the site via a tooltip so they may preview the upcoming page? Here's how you can do just that using MooTools. The MooTools JavaScript The first step is to grab...

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!