Disable downloading of images on smartphones

On my old design of my website, I was able to disable the “Save Image” dialogue that happened if you pressed down for a moment on an image with this simple CSS styling

img {
    -webkit-touch-callout: none;

The thing with the new design, the images are now links, so as to be able to go to a different page in reference to that link

I am able to do the jquery for desktop, but can’t seem to figure out how to do it for smartphones

If you are already using jQuery - you can try the tapHold plugin:

How does that stop or disable the “Save Image” dialogue popping up?

Because you can use it to prevent the default action (to display the popup). It’s almost the same as the old code to prevent you from right-clicking on a web page.

Just off the top of my head:

jQuery("img").on("taphold", function(event) {

You can change the ‘img’ selector of course.

I can’t believe this, because I had changed more than a few things on the website, I was calling the wrong tag

Ultimately you can’t prevent users from downloading images - you can make it harder with the Javascript you just posted but if the user disables mobile JS (I know I can) then ultimately the images will be downloaded.

It’s on the web - people can access it. No concrete way of stopping users c ompletely.

On mobiles you can take a screen shot, which is much the same as downloading the image. Same on desktop too, for that matter. If you don’t want people to take the image, don’t show it to them.

1 Like

Perhaps the user can put some sort of watermark to prevent stealing if he is afraid of a copyright. Worth mentioning at least.

1 Like

I think most of these questions aim to “fix” the problem for the bulk of the end-users visiting the site. I don’t think there’s any amount of JavaScript that can prevent us developers from tinkering :wink:

At the end of the day, Javascript can be disabled and rendered useless. So he shouldn’t move forward with the ideaology that he can protect his images. That’s why you see (for example) sites that sell marathon photos they took mid-race…they have watermarks to make the image less appealing (who wants a watermarked down image of themselves crossing the finish line? It just looks bad)

If he can protect 90% of downloads then it’s better to do something rather than nothing. Perhaps he’s not learnt about watermarking yet. Maybe the server doesn’t have suitable image processing.

I am providing an answer to the original question, but I respect your right to comment on alternative methods.

Alex, I have heard of watermarking way before knowing how to do this in CSS

Not sure if you meant watermarking with CSS, but that’s not what’s being said. You’d have to do it with something like Photochop.