Search code examples
htmlcssimage

Protect image download


I know the best way to protect image download is not putting it on internet in the first place.

I assume there is no 100% protection against image download and that if a user can see an image on internet he can with a bit of experience find access to download it.

I am aware of transparent .gif or .png covering the images or using background_image CSS property to protect it and prevent right click download but are there

other ways to complicate image download and therefore prevent image download by most users?

Here is simple code to start with :

<img src="http://placekitten.com/600/450">


Solution

  • No there actually is no way to prevent a user from doing a particular task. But you can always take measures! The image sharing websites have a huge team of developers working day and night to create such an algorithm where you prevent user from saving the image files.

    First way

    Try this:

    $('img').mousedown(function (e) {
      if(e.button == 2) { // right click
        return false; // do nothing!
      }
    });
    

    So the user won't be able to click on the Save Image As... option from the menu and in turn he won't get a chance to save the image.

    Second way

    Other way is to use background-image. This way, the user won't be able to right click and Save the Image As... But he can still see the resources in the Inspector.

    Third way

    Even I am new to this one, few days ago I was surfing Flickr when I tried to right click, it did not let me do a thing. Which in turn was the first method that I provided you with. Then I tried to go and see the inspector, there I found nothing. Why? Since they were using background-image and at the same time they were using data:imagesource as its location.

    Which was amazing for me too. You can precvent user from saving image files this way easily.

    It is known as Data URI Scheme: http://en.wikipedia.org/wiki/Data_URI_scheme

    Note

    Please remember brother, when you're letting a user surf your website you're giving him READ permissions on the server side so he can read all the files without any problem. The same is the issue with image files. He can read the image files, and then he can easily save them. He downloads the images on the first place when he is surfing your website. So there is not an issue for him to save them on his disk.