How to serve an image without possibility of easy saving it from browser?

Question

I want to show a set of images only on my website. I want to avoid end-user posibility of easy saving. I know that user can save an image with print screen, but this is not a easy way because require some work after that.

Lookup 'Shrinkwrapping', it's a technique where you place a transparent gif over the image you want to protect. This stops the ability for in browser right click->save. Obviously anyone in the know can get still get the image but this will stop most non-techie users. — MrCode, Nov 14 '12 at 16:36

score 1 · Answer 1 · answered Nov 14 '12 at 16:33

display in an applet (e.g flash, java)
use server-side operations to chop the image up into random-sized squares/rectangles and use a client-side table to display the parts in "assembled" format
use CSS overlays so that right-clicking on the image gets you the overlay instead of the image
give up because if someone wants to steal your image, they will.

score 1 · Answer 2 · edited May 23 '17 at 12:27

1

It's impossible to prevent them 100% from doing it, but you can make it harder.

You can have a .htaccess rule which doesn't allow direct access to it (must be loaded from one of your site's webpages)

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?example.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

Then you can prevent right clicking on your website so they can't just click copy image. See: How do I disable right click on my web page?

Note there is no good solution.

edited May 23 '17 at 12:27

Community

1
1

answered Nov 14 '12 at 16:33

James T

3,292
8
40
70

1

Instead of disableing right click I can use an transparent layer over. – Adrian B Nov 14 '12 at 16:40

score 1 · Answer 3 · answered Nov 14 '12 at 16:35

You can:

split it into multiple pieces (require some changes on the HTML code too)
apply as a css background-image on a fully transparent gif / png *
apply a watermark with gd (in php)
or mix these

But the user can still save it with a simple print-screen, as you wrote.

(*) f.ex:

<img src="blank.gif" style="width: 200px; height: 100px; background-image: url('image.jpg');" />

score 1 · Accepted Answer · answered Nov 14 '12 at 16:36

1

It's possible to draw an image to a canvas element, thus stopping a user from saving the image using a DOM inspector or right-click menu. This technique wont work on older browsers though.

answered Nov 14 '12 at 16:36

thesonglessbird

570
1
7
16

How to serve an image without possibility of easy saving it from browser?

4 Answers4