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.
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,
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.
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;
*** 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,
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbBlmLXHPmVayuLZXaPBxvbahbjdvt1pCfCzoeGc7PD4CnTQWcV_Ot5begUtpa7pdo2mlw8LoddWLQBuauT6GNfbAiU3AYtF46KSAOFh78ue8-t1JE-XgSiH_rtBpaShxCh1fvzpD9u1hB/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
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.
<table>
<tr>
<td style=" background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbBlmLXHPmVayuLZXaPBxvbahbjdvt1pCfCzoeGc7PD4CnTQWcV_Ot5begUtpa7pdo2mlw8LoddWLQBuauT6GNfbAiU3AYtF46KSAOFh78ue8-t1JE-XgSiH_rtBpaShxCh1fvzpD9u1hB/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,
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,
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.........!
 |
| 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.
"
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/AVvXsEjbBlmLXHPmVayuLZXaPBxvbahbjdvt1pCfCzoeGc7PD4CnTQWcV_Ot5begUtpa7pdo2mlw8LoddWLQBuauT6GNfbAiU3AYtF46KSAOFh78ue8-t1JE-XgSiH_rtBpaShxCh1fvzpD9u1hB/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>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbBlmLXHPmVayuLZXaPBxvbahbjdvt1pCfCzoeGc7PD4CnTQWcV_Ot5begUtpa7pdo2mlw8LoddWLQBuauT6GNfbAiU3AYtF46KSAOFh78ue8-t1JE-XgSiH_rtBpaShxCh1fvzpD9u1hB/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/AVvXsEjbBlmLXHPmVayuLZXaPBxvbahbjdvt1pCfCzoeGc7PD4CnTQWcV_Ot5begUtpa7pdo2mlw8LoddWLQBuauT6GNfbAiU3AYtF46KSAOFh78ue8-t1JE-XgSiH_rtBpaShxCh1fvzpD9u1hB/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/AVvXsEjbBlmLXHPmVayuLZXaPBxvbahbjdvt1pCfCzoeGc7PD4CnTQWcV_Ot5begUtpa7pdo2mlw8LoddWLQBuauT6GNfbAiU3AYtF46KSAOFh78ue8-t1JE-XgSiH_rtBpaShxCh1fvzpD9u1hB/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.........!
