Protecting your images

Image theft is an issue and unfortunately there is no absolute die-hard way of stopping it happening. We need the browser to load the images to make our websites all fancy and if the browser knows where an image file is being stored, then so does any user who takes the time to investigate.

There are a few things you can do to make image theft more difficult, which will certainly be enough to put off most if not all potential image thieves.

Disable Right Click / Save Image

That box of cool tricks that opens up when you right click on an image is called the context menu. It’s an image thieve’s toolbox so your fist job in protecting your images is to disable it. Here’s how:

  1. Open up Divi Theme Options > Integrations > Add Code to <head>
  2. Copy the following code into that box:
<script>
jQuery( document ).ready(function($) {
 $('#main-content img').bind('contextmenu', function(e) {
 alert("The images on the site are protected by Copyright.");
 e.preventDefault();
 }); 
});
</script>

What this does is disable the standard context menu and also at the same time creates an alert box that warns the user that images are protected by Copyright. Sometimes this is enough to stop the user attempting to download the images. You can see this in action by right-clicking any of the images on this site.

Invert Images

If a user get’s past that, downloads the image and it’s not what they expect then they probably won’t waste too much time on the other images in your site. Your aim should always be to make life as hard as possible for someone trying to download your images.

A decent trick is to invert your images. If you have Photoshop or a similar image editing software you can invert your image colors so that your images look like this.

You can then make the images look normal on your site with CSS by adding this to the image module:

-webkit-filter: invert(100%);
 filter: invert(100%);

And here’s what it looks like now…

Disabling Hot-linking

Hot-linking is a technical term for someone who copies the image address from your site and then uses that to serve the image on theirs (the nerve of some people!).

This is doubly rude because not only are they using your image, they are using your resources to serve it! Here’s a great article on disbling that in a php function or by editing the .htaccess file.

Hopefully this blog gets you on the way to protecting your images. If you foud it helpful, please share or leave a comment 🙂

 

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.

Previous post
Next post

2 Comments

  1. Apurv

    Hi, This is nice !! But how does one disable the save image option in divi modules? Like image gallery module

    Reply
  2. Michele Sager

    This is a wonderful tutorial. Thank you Stephen. I found it works with except when the image is set as a background to a section or a row. Is there a solution for this? I’ve tried No Right Click Images plugin and same thing. Thanks.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *


Receive notifications about our new blog posts.


Don’t leave before entering to win an iPad Pro! It’s Free!

You may be too early for our Black Friday specials, but you can still enter our competition! Leave your details below and you could win an iPad Pro!

Great you've entered our giveaway! Only one step remaining! Please check your email and confirm it.