Protect Your Images From Being Copied

The usual way of displaying images in a blog post/widget is very easy but these images can be stolen or copied easily too. Even a novice user can simply right click on an image to save it on to his computer, which is eventually passed on to others and finally appears in some other blog, website or magazine.


Most common reasons/ways of stealing images:
1. From Google Image Search
2. By Right Click -> "Save Image As..."
3. By Copying image address from "Page Source"

Methods To Protect Your Images:

Methods you should not use:
1. Watermarks spoil the overall look of the images, so I will not suggest you to use big watermarks over the images, unless you are selling the images from your blog/site (where only a thumbnail of the image is shown with a watermark on it) [Like This One].

2. Disabling right click is one of the 'infamous' methods as the pop-ups doesn't look nice.

Methods You Should Use:
METHOD #1
By using JavaScript encryption you can not only protect your images, but many other html widgets too: Read more about html encryption here.
Because of this encryption, nobody can find your image address from the page source.

METHOD #2
The other famous method to protect you images from getting stolen is to use CSS instead of pure HTML. Although even in this case, images can be easily stolen (by taking screenshots and editing them), but because of the lengthy process most of the content thieves will definitely drop the plan of taking pictures from your blog. This technique will also protect your images from getting indexed and shown in Google image search results.

So instead of using a code like this;




Use this code:

© Your_Blog

Try saving the image below (protected by the CSS method):


© Your_Blog

NOTE: Remember to change the width and height attributes according to the image you are using (at four places in the code above). Also the margin-top attribute should be equal to the height of the image.

The above image is immune against these methods:
1. Right click and "Save Image As..." or "View Background Image"; because the original image is being used as a background image (by CSS) and on top of it another TRANSPARENT image is being used [code highlighted in BLUE], so if anyone tries to save this image (or copy the image address) he will be surprised to see a blank image instead of the one he actually wanted.

2. The image will not be indexed by Google, so it will NOT appear in Google Image Search.

But, of course you can get it from the page source. (so read the next method)

METHOD #1 + Method #2 = Best Protection Method
So presently try a combination of the CSS method and HTML encryption described above, to show & protect your images on the web.

So finally, after HTML encryption of the code from METHOD #2, we get this code:




Now this code has all the benefits of METHOD #2 and moreover the image address is also not visible in the Page Source.

Prevent your images from appearing in Search Engine Image search (or simply Google Image Search):
Use this meta tag in the region of your template:




Finally, read some more tricks to "protect your images" and "why you CANNOT protect your images" !!!