Protecting Images on Your Web Site

The first thought, maybe, on putting your graphic artwork online is that someone will steal it before you even get out of your FTP routine.  Maybe they will ... but you can stop them.

This will prevent easy detection of clicks on the screen but the general principle will work and can be adapted as you need.

The object is to build your screen image and then as the final step use absolute positioning to put a full-screen image over the top of the entire screen.  This can be done as follows:

<img style="margin-left:300px;margin-top:50px;" src="/images/VF02.jpg">

<div style="position:absolute;top:0px;left:0px;width:100%;">
<img style="width:100%;opacity:.5;"
src="/resources/siteimages/screen-mask.jpg">
</div>

Note the CSS specification for opacity for the image.  If you set it to 0.0 then it will be invisible.  It will still prevent clicking anything on the screen regardless of visibility and thus your visitor will see your image but will not be able to steal it.  Trying to download it with the browser will just get the top level image (i.e. the invisible one) as will clicking and dragging the screen.  However, the visitor can still use a screen capture so you may want to make your overlay image transparent except for a watermark.

To my own view, the above is not necessary.  Web resolution is so low that it's worthless for printing anything so people may steal the images but so what.  They can't really do anything with them.  Maybe they might put the image on a Web page but so what.  Eventually perhaps a fan sees it there and there will be some high comedy at that time when you get in touch with the individual who did it.  I don't see a loss as really it works out to advertising for you in a way.