Question

I do know that there is no sure fire way to fully protect an image from being downloaded. This method is to prevent the casual user from downloading by simple right click. The best way probably would be simply copyrighting your images and if you are very concerned would be using a service like Digimarc to digitally watermark your image. Now to the question:

I came across a site that is using a GIF overlay over their actual image so it protects the image from users right clicking and downloading the image (though you can still grab the actual image from within the code). The code they use to do this is:

<div><img src="-Transparent GIF File-" alt="" width="530" height="558" 
border="0" original="-Actual Image Displayed-" /></div>

My question is the original tag is not a real tag and is used and translated by Javascript of some sort. I would like to replicate this on my site. Can someone help me find this script or reproduce the effect?

Answer 1

This is pointless. If a browser displays an image, it can be taken. Any attempt to prevent that is merely site overhead that can very easily be circumvented.

You’re best protection is to put a copyright notice on the images themselves.

In any event, if you really want to swap the original attribute you can…

$(function() {
var o = $('img').attr('original');
$('img').attr('src', o);
});

Demo here

but… that doesn’t do anything to prevent the user selecting and saving the image tied tot eh original attribute.