How to Protect Images on the Web

Keeping users from taking your images

Unfortunately, you can never stop someone from taking an image: if it is on the web, it can be taken. There is no surefire way to stop people from taking your images, but there are a few things you can do to discourage it.

Disable right-click

This is the oldest trick in the book, but easily gotten around. When
people can’t right-click, they also can’t “Save Image” or “View background
image.”

Here’s the code for this particular method, which implements jQuery:

$(document).ready(function() {
      $('#rightclickme').bind('contextmenu', function(e) {
            e.stopPropagation();
            alert('Nope. Can't do that.');
            return false;
      });
});

Change META information

If you don’t want search engines to get your images, add meta name=”robots” content=”noimageindex”  to your header information.

Add an invisible element over the image

Adding an element over an image with a transparent background will
thwart the right-click context menu’s “Save Image” as the image it will
be saving is the overlay.

Add a watermark

While the watermark won’t actually prevent anyone from stealing the
image, it will mark that the image is yours. Including your site address
in the watermark can actually encourage that people visit your site.

While these techniques won’t remove your content from the web (that’s impossible to accomplish), it will make it difficult
to steal. But don’t be fooled. If you don’t want your content stolen, the only workaround is to never post it in the first place.