Stop the Thieves! Strategies to Protect Your Images

by Nathan Rohler

The Problem

If you're a photographer or other graphic artist, then you are undoubtedly displaying a portion of your work online. Unfortunately, this means you have to deal with the problem of image thieves ripping off your work and using it – without credit – on their own sites. Some would-be thieves are just casual visitors who want the images for personal use; the real pirates, though, can be so bold as to sell your work as their own. This is an especially bad situation when the offending site is in a "bad neighborhood" of the Internet.

If you're unlucky enough to have dealt with this problem, you know what a frustration it can be.

So, what's an artist or photographer to do? Fortunately, there are some good solutions.

Who Are You Trying to Block?

It's important to first realize that there are two different groups of people who may misuse your photos:

The Not-So Bad Guys

Often, the people downloading your photos are just casual visitors who don't intend to steal at all. They're using your photos for personal use (e.g. as their desktop wallpaper) or are "sharing" the photo without any intent to profit. They usually don't even realize that they're doing anything wrong. The good news is that most of these folks aren't very technically savvy, so it's easy to prevent them from downloading your photos. Blocking the default right-click menu is usually enough to dissuade them.

The Really Bad Guys

These are the real scamsters who are intentionally misusing your photos without credit, often for commercial purposes. The bad news is that these folks usually know what they're doing and are difficult to stop. They have a trove of advanced tools that make it easy for them to download your photos, even if you have taken steps such as blocking the right-click menu.

The unfortunate reality is that when a photo appears on someone's screen, it can be captured and misused. In order to foil these folks, then, the only effective protection mechanism is to watermark your photos. Here's where it becomes subjective, though – you have to find a balance between sufficient protection and not defacing your photos to the point of annoying legitimate viewers. A small watermark may be able to be removed (especially if it's on the edge of a photo), but a big, ugly watermark turns people off.

Which Approach Should You Use?

This is where you need to make a decision. Are you only trying to block the "not-so bad guys," or do you also need to worry about the "really bad guys"? Here are some factors to consider when making the decision:

• What's the nature of your business? Is it mission-critical to prevent any theft at all?
• Would watermarks be visually distracting or hurt your work? You don't want to come across as paranoid to potential clients. Clients want to see your real work, not look at it through a peephole in a safe.
• How much of your work is online? If you're only displaying a few photos, then you probably needn't worry about higher-level security.

All of these questions should be considered together. If you can make image protection subtle, do so; you don't want to annoy legitimate visitors. Most folks would rather see a small number of non-watermarked photos than tons of "defaced" photos.

The Solutions

Blocking the Default Right-Click Menu

As I mentioned above, this method can be easily circumvented; it's only about blocking casual downloaders. If that's all the protection you need, though, it's a simple fix to add. Just add the following code to your page before the closing </body> tag:

<script type="text/javascript">
document.oncontextmenu = function(e) {
    e = e || window.event;
    if (/^img$/i.test((e.target || e.srcElement).nodeName)) return false;
};
</script>

This script blocks the right-click menu from appearing when any image in the page is right-clicked. The menu will still appear for other content in the page; just not for images.

Tricking the Downloaders

Blocking the right-click menu is a nice start, but it doesn't prevent folks from dragging the photo to save it, and it's extremely easy to circumvent if you're technical savvy (think Chrome Developer Tools or Firebug for Firefox). A better "casual solution" is to automatically overlay a transparent image over the real photo. The downloader right-clicks, saves, thinks they've got your photo and ... oops! Not so fast. They end up with a transparent image, not the real photo.

I've created an easy script that uses jQuery to automatically apply this effect to photos in your page. To enable the effect, add the following code to your page before the closing </body> tag:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    var pixelSource = 'http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif';
    var useOnAllImages = true;
    // Preload the pixel
    var preload = new Image();
    preload.src = pixelSource;
    $('img').live('mouseenter touchstart', function(e) {
        // Only execute if this is not an overlay or skipped
        var img = $(this);
        if (img.hasClass('protectionOverlay')) return;
        if (!useOnAllImages && !img.hasClass('protectMe')) return;
        // Get the real image's position, add an overlay
        var pos = img.offset();
        var overlay = $('<img class="protectionOverlay" src="' + pixelSource + '" width="' + img.width() + '" height="' + img.height() + '" />').css({position: 'absolute', zIndex: 9999999, left: pos.left, top: pos.top}).appendTo('body').bind('mouseleave', function() {
            setTimeout(function(){ overlay.remove(); }, 0, $(this));
        });
        if ('ontouchstart' in window) $(document).one('touchend', function(){ setTimeout(function(){ overlay.remove(); }, 0, overlay); });
    });
});
</script>

The parameters are highlighted. By default, I've configured the script to use a pixel gif from the Wikimedia commons. (A pixel gif is a 1x1 pixel transparent image.) You should download the referenced file, save it to your site, then replace http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif in the script with the path to your local copy.

The other option is the useOnAllImages variable, which is enabled (true) by default. This means the script will be applied to all images. If this causes problems in your page, make it opt-in by setting useOnAllImages = false and adding class="protectMe" to the images you want to protect. For example:

<img src="myphoto.jpg" width="800" height="600" class="protectMe" />

You can use the transparent overlay approach in combination with the previous right-click script, but it's probably better to leave the right-click intact. This will just confuse the casual downloaders.

Watermarking

The previous two solutions are nice, but a quick screenshot is all it takes to work around them. When you need a bulletproof solution, watermarking is the way to go.

You can use a graphics program like Photoshop or Fireworks to add watermarks to your photos. Many online and desktop watermarking tools are also available (just run a Google search). Watermarks can include whatever you want, but it's usually best to use large, partially-transparent text, e.g. © 2012 My Name. Experiment to find the right balance for keeping the watermark subtle while providing adequate protection.

Psst... Would you like us to create an easy watermarking program to help you watermark your photos? Leave your name and email, and your wish might come true!

Conclusion

Unfortunately, image theft is something you have to think about when displaying digital artwork online. Fortunately, there are simple ways to foil would-be image thieves. Now that you understand the situation, you can preemptively avoid problems!

Have you been a victim of image theft? Do you have any tips or tricks for protecting photos? Please share in the comments!