How to prevent pictures from being downloaded by right-clicking on them or Inspecting the web page?

Question

When there's an image on a website, it can be downloaded by the following ways:

• Right click on the picture and press Save As from the pop-up context menu
• Right click on the webpage in Chrome, press Inspect, then find the directory where the image is stored by browsing thumbnails, then right-click on its filename there, and open in new tab, where it can be right-clicked alone to be Saved As

How can the active downloading of pictures be prevented altogether?

Regarding the two methods above, I have seen webpages that somehow:

• deny the right-click pop-up context menu (containing Save As) from appearing altogether, or
• hide the images from the directory structure that Chrome / Inspect / Sources finds so that the visitor cannot save them with Inspect.

How do they suppress the image's right-click pop-up menu, or hide the image file from the Inspect directories?

Edit

By download, I mean direct download where the visitor actively right clicks on the image and saves it to a specific directory on their computer.

By download, I do not mean:

• passive download (the image is automatically cached in some obscure temp folder by the browser just because of viewing the page)
• or screenshot (the image is copied to clipboard so that the visitor can edit and save it with Microsoft Paint).

Environment

Going by what's mostly used, let's assume visitors are predominantly using Google Chrome and we would like to disallow them from downloading images from our site. Obviously we would like to bar any browser from doing this, so we want a method that universally works.

From the host perspective, we'll assume for now Javascript is mostly used for tricks of this nature, but open to answers that achieve the same effect using other languages.

Answer 1

You can't prevent it, you can only stop people who don't understand coding.

Generally it is done with Javascript which is easy to disable. Further, it is a trivial matter to take a screenshot of an image.

If you are actually talking about hot linking (displaying images from your server on another site) that can be done via .htaccess.

Answer 2

By definition, if a visitor can view an image, it has already been downloaded. That's how a web page works. You can however use a variety of tactics to make it more difficult to do so.

As you've mentioned, using JavaScript to interfere with the normal contextual menu is an option. However, that won't work if the user has disabled JavaScript on their browser.

Another method some websites use is to slice each image into several pieces and merge them back together within the browser (using CSS, for instance). Although this doesn't prevent downloading each and all the parts of the picture, it does make it more tedious.

Of course, anyone with some moderate scripting skills and enough determination will be able to overcome those difficulties.

In essence, it's impossible to prevent people/cats/robots to download your pictures but it's possible to make it hard/annoying enough to make it not worth their while.

Addendum: To highlight what I and others have numerous times mentioned, it is impossible to completely prevent resources from being downloaded. There will always be a workaround. To be clear: if you can see a picture, you can download it.

To illustrate: while I can't condone such behavior, some individuals download movies from Netflix, Amazon et al. all the time. Even DRM mechanisms used by mega-corporations with virtually unlimited resources can't prevent a sufficiently determined individual from downloading content.

<friendly sarcasm>The best way I know to almost completely prevent someone from downloading pictures from a website is to host it on an air-gapped server. However, accessing the website itself would prove rather difficult. </friendly sarcasm>

The best you can do is to make it just difficult or annoying enough to deter the average user.

Answer 3

One more trick to make it a little harder, which also works with Javascript disabled.

Use CSS to position a transparent element over the image, so that right clicking it does not show the image-related options.

Or, for added confusion, overlay a transparent image on top, so that right clicking downloads the wrong image.

Example: https://www.w3schools.com/code/tryit.asp?filename=GN3GODC20V0D

Answer 4

For mitigating direct URL access you would have to implement a token system which allows images to be downloaded only when the page is visited.

When the web page loads, generate a token and save it to a database with a timestamp, for every image on your page append the token like so image.jpg?token={whatever}, set images to be handled by a script, have this script check if the token is valid, additionally implement an expiration which does something like "token is not valid if requested 5 seconds after creation". This script will allow you to intelligently say yay/nay to providing the image to the end-user.

This in no way solves the "right-click" issue since web browsers simply give you the cached copy instead of sending a second request to the server.

Answer 5

To simply disable the Context (right-click menu) at the web page level:

HTML body tag:

<body oncontextmenu="return false">

Javascript on page:

document.oncontextmenu = function() {
  return false;
}

(Reference: recommended site -- https://www.hacksparrow.com/webdev/javascript/disabling-the-context-menu.html)

Answer 6

The way you're probably looking for is a javascript script overriding the call for a context-menu on <img> tag that does not call the menu and does not do anything.

The exact script depends on technologies used on your site, the most common way is pure javascript (and also the only way independent on the technologies on your site), others might be easier to include and you should specifically ask based on what technologies/frameworks/content management systems are used to create/run your site.

Link for more information, including non-javascript solutions:

• https://stackoverflow.com/questions/381795/how-to-disable-right-click-context-menu-in-javascript

Original link from initial comment

• https://stackoverflow.com/questions/4753695/disabling-right-click-on-images-using-jquery

Answer 7

Embed the images in a multimedia object.

Back before Flash got rendered obsolete and had its support removed, one popular method for doing this was embedding the images you want to display (but prevent the user from downloading) into a Flash file, preventing the users from accessing the images directly. While Flash is unfortunately no longer an option (for good reasons), there might be other multimedia options like HTML5 that might perform similar functions for your webpage.

Answer 8

Using the CSS rule

pointer-events: none;

on image elements prevents them from responding to click events: right clicking the image will still show a page context menu, but without "save image" or "copy image location" options.

As understood, pointer-events: none won't stop downloading images using standard browser tools (such as "page info" in Firefox), but should deter visitors with poorer technical skills from downloading images.

A potential downside of this method is that images that doesn't respond to pointer events can't be used within <a> tags for page navigation: clicking them is ignored. Using the image as the background image of an (inline) block element provides one alternative.

MDN shows HTML support for pointer-event was introduced in IE11. If the website supports earlier browsers another solution may be advisable.

Answer 9

if screenshot no matter and apart from css or javascript preventions; to make it harder, at server side, split your original image too many pieces. (make 1000canvas for one original image, make each of them draw related part of the image :) idea: https://codepen.io/Escu/pen/KVLBYP