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
Share this
Related Posts
How to Write Titles In Blogger/BlogSpot Blogs
Last updated on 20 September, 2016 - to add information about Permalink feature in Blogger
While bloggers generally f
Blogger Help - Swap Title PositionSwap the position of Blog's name w.r.t. the position of the post's title, like in the two pictures below:
Before:
Aft
Tips on How to Get your Blog Noticed…and Read!
Blogging is a brilliant idea to get your business or services noticed on the World Wide Web. But there are millions 
The BEST Title For Your About Us/Me PageWouldn't it be awesome if someone searches for your name on the Internet, and your profile or image appears right at th
34 comments
Write commentsOh, Now I Get It, You mean you can make it stick in the background, so they won't copy?
ReplyBut, 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?
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.
ReplyAs 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
There is no use ... coz you can just right click on the backgrng and find out the sorce...FF 3.5 has the option
ReplyNot only in FF 3.5 but even in IE6 you can check the page source.
ReplyBut 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) !
And ya ...that's the reason I have given the link "why you cannot protect your images" in the end
ReplyMay be css3/html5 or something else will give us more ideas 8-)
T_T Sob sob... why put printscreen de....T_T , but i can do with Save As Background by Right Click. = ="
ReplyDisabling right click is very annoying for readers, I dont recommend it. Blogger Make Money
ReplyYou can also use the image grabber add-on in Firefox.
ReplyRight-click disabled? Click the button on your keyboard, here: http://www.lytebyte.com/wp-content/uploads/2008/05/right-click-keyboard-key.jpg
ReplyCan'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!
In the final method I have described, no one can copy the image with right-click (that includes that of the keyboard.)
ReplyAnd 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.
;)) there's a way.. page info and go to media
ReplyWell, 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)
ReplyMoreover already the hack has protected the pics from Google image search, from where around 90-95% thiefs enter the websites for images.
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.
ReplyTina.
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.
ReplyHi there, There's nothing to change in your template,
ReplyIf 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.
with windows 7 snipping tool you can copy anything...
ReplySnipping tool is just a short-cut to PrtScn.
ReplyAnyways, 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.
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.
ReplyWhy 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
]
ReplyThanks 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.
ReplyIt 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.
Yeah ..exactly
ReplyThat 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
Hi,
ReplyIts 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?
Once you put the copyright text (© Your_Blog) on the pic, even printscreen will fail
Replyyour 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?
ReplyJust 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.
ReplyThanks for sharing it. But how do I apply this to protect my blog header in blogger?
ReplyBlogger 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
Hi Divya sai,
ReplyThanks 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
hi this santhosh
Replywaiting for the help frnd.
) =))
ReplyHi, 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...
ReplyHi to everybody, here everyone is sharing such knowledge, so it’s fastidious to see this site, and I used to visit this blog daily.
ReplyBefore disable right-click you need to know its corn. It is used to navigate (go back/forward), reload and add to favorites. If you disable it, your visitors will suffer and likely avoid your blog.
Replyinstead of this, it is better to use disable selection of text or html :
Add the following html code to your BODY tag:
Here is how your BODY tag may look once implemented:
ondragstart=”return false” onselectstart=”return false”
Checkout the demo of script on this blog: www.originbuzz.com
Thanks
Comments are moderated on this blog
Allowed HTML tags: <b>, <i> and <a>
Comment Like This! and Optimize your blog EmoticonEmoticon