In this post, I'll discuss some ways to
protect images from being copied
on the webpages. You spend a lot of time and hard effort to creating
unique images for your website, and later other could download them,
which is not fair. Do you want to protect your images from being copied?
If yes, you are here at the right place. In normal speak, you can not
protect your images 100% from being downloaded because a webmaster or
any person who knows some coding, may steal your images from your
websites. Therefore, if you want 100% protection of your images from
being copied, I would suggest you to use your watermark or your name on
your images with transparency or don't put it on the internet (joke!).
However, you can protect your images from being copied by the persons
who are not webmasters.
 |
| Protect Images from being copied or Download |
If you Google it "how to protect images from being copied". You'll
across with a technique which shared the most on the web by disabled to
right click on the WebPages, but I think disabled to right click is not a
good idea. Most of the users visit your webpages for information
purpose only and very small no. of visitors visit your website for
stealing your images so most of peoples feel insulting if you disabled
right click on webpages and also it will not give you a professional
work. Although, you can disable right click only on the images of your
web pages not overall part of your web pages as on the part of your
content and your links, but if you disable right click, users may drag
and drop images from your webpages to their desktop.
We will discuss some techniques for
protect your images from being downloaded as follows,
Protect Images From Being Copied By 'img' Tag.
Protect Images From Being Copied By 'table' tag.
Protect Images Form Being Copied By Disable Right Click Only On Images.
I like the above first and second methods for protection of images in
web pages. If you apply first or second method to protect your images
from being copied and an image theft comes up on your website, and drag
and drop your images to his/her desktop. They will shock and think what
it is because they would not get any image to desktop after dragging or
after to select the save as option. Let us first in very short
description I tell you that what I would try to apply here.
"
Firstly, takes an image which would you like to prevent from
being copied and note down its width and height, and now create a
transparent image of the same width and height as your main image. Now,
upload your main image to your post, and then upload your transparent
image adjacent to your main image. Now, we will try to move up your
transparent image onto the main image. If succeed, everyone can see the
main image because the upper layer on the main image is transparent, but
if someone drags and drop your images from your web to their desktop,
then always your transparent image will move on and your theft shocked
each time. That's it!"
Updated: Please read the above message first which is in the quote.
If you want to protect all images on your website, then creating
different transparent images for each image is waste of time. Now, we'll
create only one transparent image of width and height each 1px, which
will save image size too. We will use this transparent image with every
image of our websites because we can change our transparent image's
width and height via inline style, and all the procedure is same as we
mentioned in above quote. Now we start the process.
How To Protect Images From Being Copied / Downloaded By img Tag
If you don't know that how to create the transparent image then simply
you can download this transparent image of width 1px and height 1px by
clicking on
Transparent Image
(wait 5 second and click on Skip Ad at the top of the right side). Save
this image to the desktop, and upload it into your blog, or you can use
free image hosting sites as
imageshack.us
and grab the direct link to use the image into your blog. You can also
host your images into your blogger for free with unlimited bandwidth, to
know more about it click on upload high quality images to Blogger.
Now look at the following code.
( Let we use here main image of 200px and height 200px. You may use different size of your image. )
***Here we are using border on the transparent image for better
explanation because we could not be able to show you the location of
transparent image without borders.
--> Border of Transparent image = Black;
<div style="float:
left;">
<img src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih68peQOY9C_smziNtkxkxWVA_BjGAVDmQNqev9jhJYbEhcWGIWRSJEJLSyviA6euXrUeYwlYdaS_kn3mD64vWO-eQ17t3HVEw2HD_VgkGuPmmign8lMRCLQADuMZi01YWTsu_niK87Iz_/s1600/how+to+protect+images+in+websites.png" style="
width: 200px;height: 200px;"/><img src="
http://img836.imageshack.us/img836/5371/protection.png" style="
border: 1px solid #000; width: 200px; height: 200px; " /></div>
Code 1.0
*** Please read carefully this step: In the above code, we have included
two img tags as <img/><img/>. first one is for your main
image and second one is for your transparent image, and make sure don't
have no space both between both img tags( as
<img/>SPACE<img/>) or no enter key ( as
<img/>LineBreak<img/> ). Otherwise, these images will not be
adjacent and this technique will not work.
*** Make sure in both img tags the height and width must be same or you
can increase the width and height of the transparent image section but
your main image's height and width must not be less than transparent
image size. Otherwise, transparent image could not properly move up on
the main image.
*** If you want to add border on main image then simply add the code for
adding the border as we created in the transparent image i.e.,
border: 1px solid #000;
*** You can see in
the second img tag we did expand 1x1 px image to 200x200 px image by
adding width and height attribute in to the inline style sheet in
transparent image.
The Preview of the above code will be as follow,
Now we will try to shift a transparent image hover to the main image by
applying margin property on to the transparent image and also make sure
that the layer of your transparent image must be outer than the layer
of the main image. It means that we have to use negative margin property
on the transparent image. Since, our transparent image is in the right
position of the main image. Now, we will try to shift our transparent
image from right to left by using negative margin-left property, such as
[
margin-left: -(width of main image)px; ], into the inline style sheet of transparent image. Let's adding this attribute into the above code 1.0.
*** Here the width of main image is 200px so we will use
margin-left: -200px;
*** If you use the border for your main image then you must be set
margin-left: -(width of main image + width of right border of main image + width of left border of main image); , let us we use "
border: 1px solid #000;"
into the main image, then this border width also includes into the
width of main image so 1 px increases by left border and 1px increases
due to right border of the main image, so we have to set
margin-left: -202px;
so the above code will be changed to,
Code 1.1
<div style="float:
left;">
<img src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih68peQOY9C_smziNtkxkxWVA_BjGAVDmQNqev9jhJYbEhcWGIWRSJEJLSyviA6euXrUeYwlYdaS_kn3mD64vWO-eQ17t3HVEw2HD_VgkGuPmmign8lMRCLQADuMZi01YWTsu_niK87Iz_/s1600/how+to+protect+images+in+websites.png" style="
width: 200px;height: 200px;"/><img src="
http://img836.imageshack.us/img836/5371/protection.png" style="
border: 1px solid #000; width: 200px; height: 200px; margin-left: -200px; " /></div>
let's see the preview,
Sound like good. Your transparent image has completely moved up onto the
main image. Can you steal this image? Try it by drag and drop to your
desktop or right click on the image and save it to your desktop. What
will you get? I think the transparent image only. :)
If you want to add this image to the right side, then simply change"float:left;" to"float: right;" into the above code.
if you want to add this image to the center of your post, then change
"float: left;" to "text-align: center;" into the above code. That's it!
*** Where could you paste these codes, please see the instruction of bottom of this post.
*** Basically the position for your images is floated, so if your image
is in float left, then your content will be in the right side, the exact
example is on the above image (image in left and content in right). In
this case you have to need some space between your content and image so
replace the following code <div style="float:
left;"> in Code 1.1 by <div style="float:
left; margin:5px;"> .
*** If you don't wish to write adjacent to the right or left image, then simply add the following code just after the Code 1.1
<div style="clear:both;"></div>
You done!
How To Protect Images From Being Downloaded / Copied By Table Tag
Now, here we will
protect images from being copied by using table
tag, and make sure to note down the width and height of the main image
it's property. I will suggest you to use the above first method for
protecting your images. Since, it is also a possible solution for
protecting your images from being downloaded so I am also considering
this case. If you have a little knowledge about HTML table tag, then you
could easily understand what I want to explain so let's with a very
short description take a look at this method.
"Firstly, we will create a table and in that table, we will create a
row, and then in that row we will create a column (now the game start!).
In that column, we will upload my main image as a background image, and
then we will insert a value in that column as my transparent image,
which will cover the background image and ... and what? End the process.
That's it!"
Now look at the follow code,
*** Now, we will not use the border of transparent image. I think you will have familiar with.
*** Since, here we will show the transparent image to its original background, so don't need to margin or padding here.
*** Here, my main image width=249px and height=200px, so we will make the same size of transparent image.
Code 2.1
<table>
<tr>
<td style=" background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih68peQOY9C_smziNtkxkxWVA_BjGAVDmQNqev9jhJYbEhcWGIWRSJEJLSyviA6euXrUeYwlYdaS_kn3mD64vWO-eQ17t3HVEw2HD_VgkGuPmmign8lMRCLQADuMZi01YWTsu_niK87Iz_/s1600/how+to+protect+images+in+websites.png) no-repeat;"><img src="
http://img836.imageshack.us/img836/5371/protection.png" style="
height: 220px; width: 249px;"/>
</td>
</tr>
</table>
Below is the preview of the above code,
*** Please make sure, there must not be any space between <td><img/> tag.
***Now, let's about the positions of your images into your post, such as
left, right or center including the adjacent content to your images or
not. We have created a simple table for your need. Take a look,
| Want\Do | Position | What have you to
replace in Code 2.1 | from which have
you to replace |
Image with adjacent
content | Left | <table> | <table style="float: left;"> |
| Right | <table> | <table style="float: right;"> |
Image without adjacent
content | Left | <table> | <table style="text-align: left;"> |
| Right | <table> | <table style="text-align: right;"> |
| Image | Center | <table> | <table style="margin-left:auto; margin-right:auto;"> |
You done!
Now the third method that is
how to protect images from being copied by disable right click only on images on your web pages.
We will create a new post for it, because this post has already been
lengthy. The second factor is that I am in very sleepy mood, and the
light rays of the sun are knocking my door ( LOL).
Where can you paste these codes:
You can paste these codes to anywhere, where HTML allowed. Check out the following steps,
- In Blogger Post: Sign in to Your Blogger Dashboard -->click on
Create new post --> select HTML mode and paste the above code.
- In Blogger Sidebars: Go to Blogger Dashboard --> Layout(Under more options) --> Add a Gadget(choose from sidebars) --> HTML/Javascript(Choose under pop up window) and paste your code and click on Save.
Hope! You enjoy this tutorial and if you have any doubt, then can feel free to ask me via comments.
IF THIS TRICK IS HELPFUL FOR YOU THAN
PLEASE DON'T FORGET TO CLICK ON SUBSCRIBE BUTTON.........!
of Greasemonkey onto your browser near URL bar. 
Eadweard
J. Muybridge was born in England and later moved to US. He is commonly
known for his invention related to photography. He invented Moving
Picture and 3D imaging.
