image protection on web pages

Image protection is almost an impossible task and a big headache to the web developers. Usually we disable right clicks or we use image as background to prevent being stolen.

Here are a few ways to protect the images on your website.

1. Put a transparent layer or a low opaque mask over image
Usually source of the image is open to public on each webpage. So the real image is beneath this mask and become unreachable. Make sure that the mask image should be the same size as the original image.

 
<body> 
    <div style="background-image: url(real_background_image.jpg);"> 
        <img src="transparent_image.gif" style="height:300px;width:250px" /> 
    </div> 
</body>


2. Break the image into small units using script
Super simple image tiles script is used to do this operation. The script will break the real image into pieces and hide the real image as watermarked. This is a very useful and effective method for protecting images but it will increase the request to server to load each image tiles.

See the script page here


0 comments:

Post a Comment