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;
<a href="http://bloggerstop.net"><img src="http://i49.tinypic.com/19p9ad.jpg"/></a>

Use this code:
<div style="background:url(http://i49.tinypic.com/19p9ad.jpg);width:300px;height:200px;">
<img src="http://i49.tinypic.com/ol2tg.png" width="300" height="200"/><span style="float:left;color:white;margin-top:-200px;"> © Your_Blog</span></div>

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:
<Script Language='Javascript'>
<!--
document.write(unescape('%3C%63%65%6E%74%65%72%3E%0A%3C%64%69%76%20%73%74%79%6C%65%3D%22%62%61%63%6B%67%72%6F%75%6E%64%3A%75%72%6C%28%68%74%74%70%3A%2F%2F%69%34%39%2E%74%69%6E%79%70%69%63%2E%63%6F%6D%2F%31%39%70%39%61%64%2E%6A%70%67%29%3B%77%69%64%74%68%3A%33%30%30%70%78%3B%68%65%69%67%68%74%3A%32%30%30%70%78%3B%22%3E%0A%3C%69%6D%67%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%69%34%39%2E%74%69%6E%79%70%69%63%2E%63%6F%6D%2F%6F%6C%32%74%67%2E%70%6E%67%22%20%77%69%64%74%68%3D%22%33%30%30%22%20%68%65%69%67%68%74%3D%22%32%30%30%22%2F%3E%0A%3C%73%70%61%6E%20%73%74%79%6C%65%3D%22%66%6C%6F%61%74%3A%20%6C%65%66%74%3B%20%6D%61%72%67%69%6E%2D%74%6F%70%3A%20%2D%32%30%30%70%78%3B%22%3E%20%A9%20%59%6F%75%72%5F%42%6C%6F%67%3C%2F%73%70%61%6E%3E%0A%3C%2F%64%69%76%3E%0A%3C%2F%63%65%6E%74%65%72%3E'));
//-->
</Script>

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 <head> region of your template:
<meta name="robots" content="noimageindex"></meta>


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

Image credits: OCAL-Coredump

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

33 comments

Write comments
CrakerLo_Rakero
August 24, 2009 6:50 AM delete

Oh, Now I Get It, You mean you can make it stick in the background, so they won't copy?
But, I Still Can Copy it by right click, If Right Click Disable, There's still a chance by using Print Screen
How to prevent that? I need like "Once someone print screen the picture, When paste, the picture that pasted is scattered, destroyed"
any type of this?

Reply
avatar
Divya Sai
August 24, 2009 7:14 AM delete

No you cannot copy it with a right click, try it, there won't be an option to "save picture as" or "copy", the only way to get the image is to check the "page source" and copy the link.

As the last link in the post above says "you CANNOT protect your images", one of the main reasons is printscreen, which can even defeat flash embedded pics. So if you really want to a shield against printscreen too, then watermark is the only way, which will definitely spoil the look of the images ;)

Reply
avatar
Guest
August 24, 2009 8:25 AM delete

There is no use ... coz you can just right click on the backgrng and find out the sorce...FF 3.5 has the option

Reply
avatar
Divya Sai
August 24, 2009 8:39 AM delete

Not only in FF 3.5 but even in IE6 you can check the page source.
But the point is there are many people who don't know how to take screenshots/check page source, and quite often un-intentionally even they copy the images and thus spread our resources. So if you are careful enough, then you can protect images from at least these kinda people,
and more importantly background images are not indexed by Google, so they won't appear in G-image search too (from where a major image theft takes place) !

Reply
avatar
Divya Sai
August 24, 2009 8:45 AM delete

And ya ...that's the reason I have given the link "why you cannot protect your images" in the end
May be css3/html5 or something else will give us more ideas 8-)

Reply
avatar
CrakerLo_Rakero
August 25, 2009 3:56 AM delete

T_T Sob sob... why put printscreen de....T_T , but i can do with Save As Background by Right Click. = ="

Reply
avatar
Reza Winandar
August 25, 2009 9:45 AM delete

Disabling right click is very annoying for readers, I dont recommend it. Blogger Make Money

Reply
avatar
September 21, 2009 11:25 PM delete

You can also use the image grabber add-on in Firefox.

Reply
avatar
Anonymous
January 09, 2010 3:49 PM delete

Right-click disabled? Click the button on your keyboard, here: http://www.lytebyte.com/wp-content/uploads/2008/05/right-click-keyboard-key.jpg

Can't save pics? Press Print Screen button on keybard, and paste into Paint (or similar) and save! Here: http://img03.blogcu.com/images/t/e/k/teknikpcdersleri/print_screen_1255358507.jpg

Simple!

Reply
avatar
January 10, 2010 12:52 AM delete

In the final method I have described, no one can copy the image with right-click (that includes that of the keyboard.)

And I have already mentioned, print screen and then photoediting is the only way left after this protection, and
first of all, images are not indexed by search engines so straight away 95% decrease in image theft already, moreover this scrnsht+photo-editing is a time taking (and quite a professional) work and is therefore avoided by many newbies. And again if you watermark the photo using the correct css positioning, then you even many of the photoshop experts cannot edit ti to get the correct picture.

Reply
avatar
January 19, 2010 12:47 PM delete

;)) there's a way.. page info and go to media

Reply
avatar
January 19, 2010 1:25 PM delete

Well, to apply any geeky tweak in to the pages, the content-thief should have patience and knowledge (so, atleast a 50% thiefs will leave the site without pics)
Moreover already the hack has protected the pics from Google image search, from where around 90-95% thiefs enter the websites for images.

Reply
avatar
February 21, 2010 8:16 PM delete

You are right, tried myself to copy the image you have shown in the article, its does take lot of time. And the people who are looking for or on a hunt for copying, dont have enough time to waste on a single image.

Tina.

Reply
avatar
May 11, 2010 12:16 PM delete This comment has been removed by the author.
avatar
May 11, 2010 12:23 PM delete

I would like to use your css method #2 for my blogger blog but I don't know where to find the code you say to change. I do not see in my "Edit Layout" html the line of code you say to replace. The only thing I see is a widget id for Image1 which is the basic image widget I am using to display my image.

Reply
avatar
May 12, 2010 9:26 AM delete

Hi there, There's nothing to change in your template,
If you talking about this code:

<a href="http://bloggerstop.net"><img src="http://i49.tinypic.com/19p9ad.jpg"/></a>

then it's "just an example", to show how usually images are embed in posts.....but according to Method #2, you should not use that type of code, instead of that use the next code, in which some parts of the code are highlighted in red and blue.

Reply
avatar
Anonymous
May 17, 2010 10:09 PM delete

with windows 7 snipping tool you can copy anything...

Reply
avatar
Anonymous
May 17, 2010 10:19 PM delete

Snipping tool is just a short-cut to PrtScn.

Anyways, the methods described above, first-of-all prevents Google-Indexing of the images.
Moreover the copyright text over the images, will also get copied when you take the screenshot(with or without using snipping tool). And then using some picture editing software that copyright text has to be removed, so many content thieves may avoid all this hard-work, as already explained.

Reply
avatar
August 21, 2010 2:35 AM delete

What about resizing the image? With this, if you try making the width/height smaller than the image you're linked to, you end up only seeing the top left corner of the image.

Reply
avatar
August 21, 2010 2:51 AM delete

Why don't you simply resize your image on your PC, and upload the smaller size. And of course you can link the larger size to this small image and moreover you can use hacks like Blogger-lytebox or Blogger-Jquery.

Reply
avatar
December 29, 2010 3:20 AM delete

Thanks for this info. I have recently put some photos on a site. I have noticed a good amount of search engine traffic via image search as a result.

It seems that you can get a lot of traffic via this method, particularly if you name your images well. The down side is that the more people who come looking for those specific images, the more likely it is that some of them will lift those images. So it's definitely worth knowing how to stop that from happening.

Reply
avatar
December 29, 2010 1:14 PM delete

Yeah ..exactly
That is why I recommend a combination of Methods 1 and 2 - that will keep the images searchable and will also protect them from Image thieves :)

Reply
avatar
January 16, 2011 11:50 PM delete

Hi,
Its great source you've used here.But still till trick failed when I used printscreen option.
Do you know any trick which will protect image from printscreen also?

Reply
avatar
January 17, 2011 11:21 AM delete

Once you put the copyright text (© Your_Blog) on the pic, even printscreen will fail ;)

Reply
avatar
April 10, 2011 3:00 PM delete

your code doesn't work in Firefox. I just copied your photo just fine by simply right clicking and hitting copy. Don't worry, I deleted it again :), but your code doesn't work in the latest version of FF - don't know about other browsers?

Reply
avatar
April 10, 2011 3:22 PM delete

Just check the image you have copied by righ-click. It's just a transparent image of 800x600 dimensions, not the original one shown in the post above.

Reply
avatar
October 12, 2011 10:55 AM delete

Thanks for sharing it. But how do I apply this to protect my blog header in blogger?
Blogger gives only two options:
1. upload your image
2. use a web link

Either way someone can easily copy the image I have used in my blog header

Reply
avatar
Anonymous
November 28, 2011 6:45 AM delete

Hi Divya sai,

Thanks for sharimg these tricks, I am santhosh reading your site from last 10 days it is very informative and i used some of your SEO tricks works Well.

I Have a site having images around 1000 and now i want to add a watermark with very less transparency to all my images.,but now its not possible to change for every picture,it takes lot of time. I already disabled right clcik and also Disabled Copy & Paste option, But still images are stolen from my site, As u discussed above watermarks spoils image look but i need it now to apply to all my images in my blog. Is there any kind of trick available? Hope to hear from you soon.

thanks,
Santhosh

Reply
avatar
Anonymous
December 05, 2011 11:54 AM delete

hi this santhosh


waiting for the help frnd.

Reply
avatar
Anonymous
December 29, 2012 3:01 PM delete

Hi, your method 2 does not necessarily work on my Firefox browser using Ubuntu. When I View Image..., Copy Image..., and Save Image As..., I get a transparent image, which is good. However, when I View Image Info, I can get the real background image, which is not good. I guess your solution is better than nothing though... :p

Reply
avatar
October 10, 2013 8:20 AM delete

Hi to everybody, here everyone is sharing such knowledge, so it’s fastidious to see this site, and I used to visit this blog daily.

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon