• 0

Protecting images on a site


Question

I have seen this done on some sites before where if someone tries to download or link to an image on your site, instead of getting the image they wanted, they get a generic one with the websites logo and a message stating not to copy the images. How can I do this?

My reason for needing this is that it is for a photography website where the client doesn't want to use watermarks (spoils the photo) but also doesn't want other people to use her work without her permission or claim it as their own.

Cheers for any help.

Jordan

Link to comment
Share on other sites

Recommended Posts

  • 0

Wow, lots of replies here to read through. Once I finish reading them all, rep points for those who actually helped.

I think hotlink protection and maybe right click protection is all I am looking for. I am well aware that there are always ways to get around this but the point is really to stop the "average" user and send a clear message that you are supposed to ask for permission first.

Now instead of the normal right click protection, is there a way to set it so that when a visitor tries to go to "save as", they don't get the image they wanted but instead something like what would happen with hotlink image swapping thingy? If that makes sense.

That can be done using a overlay using the markup shown below.

<div class="image_container">
      <span></span>
      <img src="images/scene01.jpg" width="600" height="400" />
</div>

div.image_container {
       position: relative;
}
div.image_container img {
       display: block;
}
div.image_container span {
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       display: block;
       position: absolute; /* Set a transparent png or gif as background  */
}

The span tag can then be positioned on top using absolute positioning. The background for the span tag could be a transparent png or gif image. A semitransparent water mark can also be used. The average user will not see a save as option when they right click on the image. Please note that this will only deter users who do not know of any other methods other than right click -> save as method.

Link to comment
Share on other sites

  • 0

it's absolutely trivial to get the actual image. For starters, there's the "view background image" item in the context menu, i'm not 100% sure it'd work if you have an image overlaid on top of it, but it's equally trivial to block that image from being loaded, you could also inspect the table and grab the background url directly from the html/css (which, by the way, is nicely formatted by the inspection tool), and there's also countless other ways you can get at it within a few clicks.

you can get all elaborate and stream data to a flash container from a server-side script that accesses encrypted images inside a folder that is forbidden to the public, but that's still trivially defeated by a print screen. the best method really is just to watermark the images in a manner that they can't edit out with ease.

Sure you can do that now, but back when I was doing that it wasn't the case. :) Or at least I wasn't that aware of what could be done like I am now.

I can't tell you the number of sites that I have seen pay per use images on with a larger than life watermark on it but that doesn't seem to bother their sales.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.