8

Say you wish to provide sample high-quality images in your website but also wish to protect them from download, as in you can view them on screen but can't save from the website.

Is there a way to do this?

Edit: This is not something I need to do but as per one method in the answers I had seen the right click disabled on a website and was interested.

4
  • There is a post at stackoverflow about it. It points to another article about some ways to prevent images beeing stolen from your website - including the JS right click disable method.
    – wick3d
    Sep 24 '14 at 11:29
  • 3
  • 1
    You could put a watermark on them...
    – cullub
    Sep 27 '14 at 12:37
  • Watermark is the easiest and an extremely effective way to protect your images. Else you can use PHP to make a canvas of the images, this eliminate all ways to download the image, but you still need the watermark to protect it from screenshot Mar 3 '18 at 17:28
23

For all intents and purposes, this is downright impossible.

  • You can disable right click, but people can still view the source code of your page (by adding view-source: to the URL in Chrome, or just using a browser menu) and find the URL.

  • You can use a CSS background-image instead of HTML <img>, but people can still use their browser's inspector (F12 for most browsers) and find that element's CSS properties.

  • You can engineer some crazy thing that you think will work, but at the end of the day, the user has to download the image in some way to see it. If the user is completely unable to download the image, he/she won't even be able to see it in the first place! No matter what you do, nothing will prevent a simple glance at a network traffic monitor or the "Network" tab of your favorite browser's developer tools.

1
  • 6
    In addition to this users will always be able to take a screenshot no matter what you do.
    – joshhunt
    Sep 25 '14 at 1:32
7

Doorknob is right; it's impossible to prevent users from downloading the image. Any safeguard you put in place can be bypassed. Blocking Right Click is easily thwarted by disabling JavaScript (or modifying the script if necessary).

You can, however, employ other methods to protect your assets. Watermarking is one way to guard your copyrighted images. Take a look at any stock photo website to see how they do it:

iStockPhoto example page

iStockPhoto (above) for example gives users the ability to zoom in and view the details of an image. Their watermark scales with the zooming. It's unobtrusive enough to allow people to analyze the image, but prominent enough to mitigate thievery.

0
1

As others have pointed out, it's impossible. Common methods like disabling right-click, using CSS background and other scripts are fairly easy to avoid. The user can simply take a screenshot of your website, and then crop image.

I think watermarking the image is a much more effective way. This can be done manually (using Photoshop, Gimp or other tools), or automatically using a script. At the end it depends on how many images you want to protect, and how your website is built.

PHP
Here's a nice little PHP script that can watermark any image before it's downloaded by the user: http://andrecatita.com/code-projects/php-automatic-image-watermark/

Joomla
NiceWatermark is a highly configurable plugin that adds a watermark to your images automatically.

WordPress
Image-Watermark will allow you to watermark images during upload, or watermark existing images.

0

You could make things harder for a user to use the images you show though by breaking them up into smaller sections/portions of images.

On the page it'd look like one image but it may be broken into six pieces. If someone was determined to have a copy it would not stop them from recombining the images once downloaded. Also it would not look so good on a slower connection as the image loading may be fragmented or worse one or more of the sections could be missing.

0

As others have already answered its impossible to stop a developer from copying the image, but you can make it much difficult for normal users.

Here I have summed up others answers and added other options I know.

  1. Block right click -> save image.

    • Block right click with javascript
    • Instead of img tag use CSS background property.
    • Tile a 1x1 transparent image over the actual image, so that when user uses right click save he gets the transparent image.
  2. Prevent dev tools from getting the image by break the image into multiple images (From Nick J Adams answer). This can be very tedious to do manually. Nick has also mentioned the drawbacks like slower downloads and broken images if one part fails to be downloaded.

  3. Prevent screen shots by using Flash for image slide shows. Some photography websites I know use Flash to present photographs. But note that flash doesn't work in mobile.

  4. You can also prevent screen shots by using a watermark. Here we don't block access to the image at all. Check Johanpw's answer for some libraries.

0

Doorknob, JohnB, and johanpw all have good answers, I wanted to add something I've seen in people's html and php: link convolution.

Basically, what they do is they either break up the link to the image or video so that it's hard to piece together from the code (you can still do it but it deters all but the most motivated) or they simply convolute the single link in the source. (Honestly, I just noticed this in the past few weeks an I don't know too much about it, just that it made it hard for me to get images off someone's site ;P but hopefully someone experienced with this will chime in)

If anyone knows more and can give a better explanation I'd be interested to learn more about link convolution as well!

2
  • 3
    I dont see how this answers the question and this seems to be more of a comment then an answer. Jun 10 '16 at 16:29
  • Unfortunately I don't have enough reputation to comment on other people's answers yet. Since any questions I have are either already solved or the type that I could research and figure out on my own, I don't seem to be able to build those highly prized reputation points...preventing me from actually contributing in an ideal fashion : \
    – Montag
    Jun 14 '16 at 16:18
0

Don't upload high resolution images to any website that doesn't keep them hidden and secure. Like a professional and credible print on demand site.

As said earlier, it's impossible to prevent viewers from obtaining online images. My own method is to put my legible name on them, and send them out in the world to advertise for me.

Then if someone wants to use them, they can contact me to ask permission.

This site is temporarily in read only mode and not accepting new answers.