12

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.

24
  • 30
    The user agent (most likely a web browser) will always download the picture. Otherwise it won't be able to display it to the user. - What happens from there is out of your control, you can only annoy users by messing up the user agent's behaviour. – I'm with Monica Jan 27 at 9:57
  • 5
    @user610620 Any modern browser in desktop version has a function called "developer tools", it shows you the code of the page given to the client and links to any resources shown on the site (cascading style sheets, javascript scripts, HTML files, any other media content including images and videos). You can, by the way, disable the context menu by using a javascript script binding the "img tag" defining the image, the exct script depends on what you;re using to run your site. (example here stackoverflow.com/questions/4753695/… ) – mishan Jan 27 at 13:16
  • 9
    You can use DRM, i.e. Widevine to encrypt the image as a single-frame video. Level 3 won't prevent screenshots, levels 1 and (I think) 2 will by having the monitor decrypt the stream. – lights0123 Jan 27 at 14:30
  • 28
    Is there a particular reason you want to inconvenience your users? – Vikki Jan 27 at 22:47
  • 4
    @user610620: The problem is that you've asked if it can "be prevented altogether", which can't be practically done (please don't argue that point - just read all the existing answers) but if you changed it to something like "what are the options for preventing the saving/downloading of images for the majority of users" you might get some useful suggestions. – Gwyn Evans Jan 29 at 9:49
33

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.

8
  • 14
    @user610620 Your question asks whether the downloading of pictures can be "prevented altogether", which as Steve says is not possible. If you want to know how to specifically prevent images from being downloaded via right-click or via inspection, but are okay with the images being downloaded through other means, please edit to clarify, but I don't get the feeling that that is what you mean. – Maximillian Laumeister Jan 27 at 6:22
  • 18
    @user610620 If I really want to copy an image from such a site that has tried these dirty tricks, I just pop open the developer tools and look for it in the list. It is not possible for you, the web developer, to do anything about this. – Michael Hampton Jan 27 at 9:57
  • 4
    The long and short of it is that if the user can see the image on your webpage, they've already downloaded it. – Andrew Ray Jan 28 at 18:32
  • 4
    Can't even stop those who don't code. There's a button on my keyboard labelled "prt sc"... – T.E.D. Jan 29 at 13:52
  • 3
    Heck, you can just save the webpage (Ctrl+S), which also bundles all of the images. One thing I really don't miss about being a web developer is the constant nagging by customers to prevent people from downloading the images or copying the text :) – Luaan Jan 29 at 13:56
24

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.

8
  • 1
    Serving the image using javascript (from the same source as the right-click-hijacking script to account for those of us who block scripts selectively) would mean js-blocking users don't see the image at all. A pixellated or blurred version could be loaded as a place-holder instead. That then means a little poking around to download the image. With my minimal js skills it would be a small puzzle – Chris H Jan 27 at 10:38
  • could you show an example by what is meant with "interfering with the normal contextual menu"? – user610620 Jan 27 at 12:25
  • @user610620 please refer to this question or other similar ones: stackoverflow.com/questions/737022/… – Daze Jan 27 at 12:38
  • some webpages also use javascript to replace the context menu with a custom one, ostensibly to add specific functionality – Daze Jan 27 at 12:40
  • looking for the described solution that suppresses the context menu from appearing altogether – user610620 Jan 27 at 12:47
9

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

5
  • when I run your code, i am still able to right-click the image of the cat and select Save As. The pages I've seen wouldn't even respond to a right click – user610620 Jan 27 at 12:02
  • 2
    @user610620 Does it save the cat though, or the overlay? For me it saves the overlay image, which I think will confuse/discourage people. No way to make it impossible though... – Mark Jan 27 at 12:07
  • not really pursuing it because the other method denies the pop-up menu altogether – user610620 Jan 27 at 12:10
  • 5
    @user610620: Neither this nor right-click denial are effective, but this is marginally more effective. Of course, the pop-up approach gives you an opportunity for a, "don't copy my images" javascript alert, if that's important to you. – Brian Jan 27 at 15:15
  • Right-clicking on the cat in Firefox (Linux) I get the option to "save page" instead of save image, and doing so doesn't download the image. But it's easy enough to find in the source of a simple page (e.g. search for common image extensions) – Chris H Jan 28 at 15:41
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.

3
  • this is the first time I've heard about tokens for URLs. what is the full technical term? URL token? what is DB – user610620 Jan 27 at 17:53
  • 6
    @user610620 DB is "database". I don't know if there is a general term for what I've described here. If you're not a programmer then hire a programmer. This solution is not for the faint-of-heart. – MonkeyZeus Jan 27 at 17:56
  • @user610620, you asked about the "token" in the URL. This is a name/value pair of data being sent to the server, if you pay attention to the URLs you visit, you might notice them fairly often (it depends on how the websites you visit work and what you are doing on those websites): en.wikipedia.org/wiki/Query_string – Freerobots Jan 29 at 23:29
2

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)

1

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:

Original link from initial comment

6
  • see edit about technologies/environment – user610620 Jan 27 at 13:33
  • @user610620 The only way to disable the "inspect" thing is to download your images using javascript scripts (which is a way that involves the techniques involving the technologies and creation of the site itself) or including the image data directly into the HTML code of the site encoded in base64. Both are hard to achieve if you're using premade content management systems and not "made to order" site. – mishan Jan 27 at 13:39
  • which software in Adobe creative cloud shortcuts web design inclusive of javascript (not just html and css)? – user610620 Jan 27 at 13:41
  • @user610620 I'm not familiar with adobe creative suite and it's capabilities (I'm mostly a programmer who does specific stuff on large applications including web pages and services) and as such can't help you much. The best question might be on web developer SE mentioning you're not a developer. Ask about including the script disabling the right clinking when creating with the creative suite. And link this question. – mishan Jan 27 at 13:47
  • do you just mean SE, I can't find web developer SE – user610620 Jan 27 at 13:58
1

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.

4
  • no, the sites that accomplish this leave the images as what they are, images (jpg, png), but access to them beyond viewing is obstructed – user610620 Jan 28 at 3:45
  • 3
    @user610620 How about an example of one of these sites... – Steve Jan 28 at 4:06
  • not sure if i will be banned for posting adult related links – user610620 Jan 28 at 14:18
  • 2
    @user610620 It's a good call to not post adult links on this forum. – Maximillian Laumeister Jan 28 at 20:16
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.