Monday, February 25, 2008

Protecting copyrighted images on the web

You can put any notice on an image you wish with this system, but it's designed primarily to discourage copying when you don' t want it. If you prefer fair use, via a Creative Commons license, for example, you can just name the photo that way.

Putting a transparent .gif in front of images you are trying to protect with a copyright reminder as the file name has a number of advantages:

The system first educates and encourages people to respect the copyright of your image, which stops many people:

1. When you right-click and save the image, the name it tries to save under is "Please no copying, copyrighted image.gif"
2. You can include the copyright symbol also, and make all this the hover text as well. (Though for hover you would probably want something descriptive of the visible image.)

If the user ignores copyright and tries to save anyway:

1. All they get is a one pixel clear gif -- although they won't know it! It seems to save normally. This is the main method of prevention -- it subtly discourages trying a screenshot, making you think you can right-click successfully.
2. If they leave and go to look at the image later, they may just give up rather than trying to figure out which website the image came from.
3. If the user figures it out while still at the website or returns, they will likely assume a mistake occurred they try again, again seeing the reminder "Please no copying, copyrighted image.gif"
4. If someone is dedicated and savvy, they will view source or cache, or use a screenshot -- and no website technology can block screenshots (other than defacing your image, such as with a watermark).
5. Regardless of scenario, they will be very clear that they are violating copyright!

It works normally in every way:

1. The image can include a hyperlink
2. It can be moved around by the designer just like a standard block element
3. It adds very minimal extra server or code load on the website.

The technology itself is simple:

1. Make the visible image the backround of a div or table,
2. Make the foreground image a 1px transparent gif sized to exactly cover the the visible image.
3. Place most properties (hyperlink, image name/title, etc.) onto the 1px gif

I use a spreadsheet with the words "real image here" when I am creating a number of these so I don't have to do any coding. If it would be helpful I would be glad to provide an example of this also.

Of course, images can always be copied as screenshots, but most folks simply try to save the picture first. If that seems to work, they go away---and only discover later *using my method) that they didn't get the correct pic!

However, always good to at least put copyright text under the image (if not actually over it as a watermark). That way people have been notified clearly of copyright.

Here's the method in a nutshell:

First, give a 1 pixel transparent gif a name that makes the person copying it think they are getting the actual image---and to give them one more notice that they shouldn't be doing so. I name the image "please_no_copying_copyrighted_image.gif" --- so when they try to save it, that's what they see it will be named.

Here is a very old sample example. (This will only work in Firefox or Opera or older versions of Internet Explorer.) Click on any image and a window will open, try to save the picture from the open window to see the effect at work.

Improvement for screen readers:

Simply add a description of the image before the copyright notice. Thanks, GeekGal!


  1. It's dirty hacks like that that make it clear that copyright as it is is no good. When someone visits a website and sees an image, the image has already been copied to the computer! If you are going to distribute an image, then distribute it, otherwise, keep it to yourself.

  2. As it is, many people do not realize they are violating copyright. This:
    · Informs of copyright
    · Encourages compliance
    · Discourages non-compliance

    .. and then people are free to make their own decision about what to do. What wrong with informing and then giving freedom?

  3. I'm wondering how well this actually works on older browsers and various devices. It would royally hose screen readers, and while they aren't the prime audience of, say, a fine art prints website, they deserve more than "copyrighted image, do not copy" in the screen reader when navigating to the image.

    As for conley, it's mind-boggling to me that in 2008 people still have that off-the-cuff reply. Why distribute books, newspapers, magazines, CDs and DVDs if that simplistic view is to hold any merit? The means to copy each of those have similarly become easier as time has gone on, but you wouldn't advocate publishers cease distributing those works, I assume?

    Just because you have in your possession a COPY of something does not mean ANY rights of ownership or usage (beyond viewing it for your own use) have passed to you.

  4. Started using this nearly 10 years ago, so it works great on old browsers.

    For screen readers, as long as description of image is first, followed by "copyrighted image, do not copy" it works well.

  5. What is wrong is that while they can (ie: have the ability to), you haven't really given them any freedom at all.

    You are still implying that you do not want them to use your work at all, and if you do, you are making far to difficult.

    A real example of giving freedom would be to license the image under a creative commons license, that let's them reuse it, and tells them exactly what they can do with it.

    In a world where fair use is secure for only by those with expensive enough lawyers, we need to start giving *real* freedom...ease + permission, not obscurity + ability.

    As for geek gal: there are plenty of business models that revolve around free licensing. Using a free license does not equate to throwing away your livelihood.

    You are absolutely right that we do not own the rights...(though we do own some...fair use), but is that an inherent right, or one that is only a social construct, created for the pre-digital era?

  6. Rights should not be dictated by some to others, it seems to me.

    This method conveys some information and can be used for more than just no copying. Creative Commons allows a range of rights.

    Creators should have an option to choose where in the range of rights they want versions of their work to fall, and not have their rights dictated to them. If they want "no copying" that right should be available to them.

    You'll notice that all my Flickr images are under Creative Commons, and so far I have not put any restriction on images on this blog. (So far.)