Looking for a way to Semi Protect Web Images

Design help Custom code
1

Hey all,

I’ve been long looking for a good way to protect against common methods of easily downloading photos. After looking around I’ve found a couple methods that have seemed to work from other people but I have not gotten these methods to work within Webflow. (examples below)

Any helpful information would be extremely welcome. Thank you all!

Protect Images on Desktop/Laptop

(wrapped in script tags)
$(document).ready(function() {
$(document).bind(“contextmenu”, function(e) {
return false;
});
});

OR

<script type="text/javascript">
  function nocontext(e) {
    var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
    if (clickedTag == "IMG")
      return false;
  }
  document.oncontextmenu = nocontext;
</script>


**Protect Images on Mobile**

(within style tags in header)
  img {
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-user-drag: none;
      user-drag: none;
      -webkit-touch-callout: none;
}
2

It’s probably easier to just watermark images if you’re worried about someone using them? It’s quite trivial for a determined user to download your images.

3

While I agree with you in general, my client would like to disable the most simple of ways to do this. I figured it wouldn’t be too hard but I’ve not been able to get these to work.

4

Yeah fair enough. I don’t have any experience with the methods you’ve posted, hopefully someone else can chime in to help.

5

Why not just place an empty div covering the image itself?

Not all browsers will allow disabling of the context menu.

1 Like
6

Np, thanks for the input regardless.

7

So @samliew,
This works okay, I can confirm that on chrome desktop and mobile, it does prevent the user from being able to download images as images. I was hoping to find a solution that didn’t add a div per photo though.

8

There is no known workaround for this since any user with minimal experience on inspecting the element will still find the image url in the source code. Your best bet is to just watermark them as ugly as it is.

9

for HTML sites… what @samliew suggested is what I do.

You can still around this… but it makes it much more difficult.

Watermarking is a deterrent.

10

Unserstood Alex, thank you for your input.

11

That is what I was looking for, I understand that downloading these images is only a few steps away but I just wanted to provide, at a very basic level, a form of protection since one specific client has expressed concern. Thanks for your input.