Table of Contents
One fine day you accidentally come across a website that uses a lot of images from your website. How do you feel? I understand that feeling, and I know WordPress has many plugins that support the anti-copying of content and images. However, if you want to prevent images from being copied on the website, you don’t need to use the plugin to update them from time to time. I will show you How to prevent images from being copied on website with code by Lucid Gen.
Should I prevent images from being copied on the web?
Why am I asking this question? In fact, if your website is in the field of education and learning, you should not copy website images. Because students, students who want to download to study or give presentations can’t, they will leave your website. Or, if your website is a beautiful photo-sharing site, that’s also an example of what not to do.
So that means depending on the field of the website, and the website visitors have the behaviour of using photos a lot or not that we will consider.
Does this way prevent images from being copied 100%?
Like all other plugins, no matter how much you look at the source (source code), it will only come out, i.e. not 100%. This prevents images from being copied on this website code functions like other plugins.
- Prevent right click on the image (right click).
- Anti-drag images to prevent images from being downloaded by dragging and dropping on the computer screen.
- Advantages over plugin: Even if the thief uses select all to paste on their website, our photos will not show up on their website. This way also helps prevent waste of information and resources of your website.
Steps to prevent images from being copied on website
Step 1: Insert code to prevent images from being copied to the website.
Step 2: Enable Hotlink Protection in cPanel.
Insert code prevent images from being copied to the website
Copy the code to prevent images from being copied below and paste it on your website according to your instructions.
<script type="text/javascript">
function nocontext(e) {
var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
if (clickedTag == "IMG")
return false;
}
document.oncontextmenu = nocontext;
</script>
<style>
img {
-webkit-user-drag: none;
user-drag: none;
-webkit-touch-callout: none;
}
</style>For WordPress
If you use a plugin that helps insert code into WordPress, such as Insert Headers And Footers, then go to that plugin’s settings. Insert the above code in the Footer before the closing </body> tag.
If you do not have such a plugin, we will insert it directly into the web theme.
You go to Interface > Edit interface. Select the correct theme you are using, find the file named Theme Footer (footer.php) to edit.
You can insert it before </body>. Like the picture below, I have an example.
For HTML and other source code
Same principle as WordPress, you can insert it between <body> and </body>. If the website is static, open the HTML file and insert it.
Enable Hotlink Protection in cPanel
This is an additional way to prevent images from being copied by embedding the image directly on their website with your original image link.
That is, your images are only visible on your website. If you put it on another website or view it directly, it will return a 403 not allowed error.
You are entering cPanel and then find the Hotlink Protection section.
Here will list available domains in your hosting. You need to click the Enable button.
That’s it. Try to open the link of an image file in an incognito browser window to check if it returns 403. Because if you open with your current browser, the browser may still cache the image, so it still displays the image.
Note: If your website uses cache for images, then Hotlink Protection may not work as expected.
Epilogue
Just doing these 2 steps is enough to prevent images from being copied—no need to use plugins. If you are still helpless against too smart thieves, then add watermark to photo in bulk and let them feel free to advertise for you.
