treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Image protection with jQuery

  • My client is really concerned about thievery and what not concerning users stealing images from his site. I have come across a number of possible jQuery methods, the goal is to keep the basic user from right clicking and downloading content. Any help would be much appreciated. Cheers! - Steve
  • As soon as something is on the web and used within a web design it is public - there is no way you can stop people from stealing images. If he dosn't want the risk of images being stolen then they should not be up.

    Saying that - most people don't want to steal his images, because most people wont care. I find that these issues arise from an over inflated self opinion that everyone is out to hack/steal/attack them on the internet.

    If you use a jQuery method - people who don't have javascript enabled or block scripts can still right click and download. Even if they didn't do that they could just print screen or use some screen capture software (if they are really into stealing random images).

    Best way is to hinder them with watermarks :)
  • You can set the image is a background and put a transparent gif or png as the image. This common, people then would download a blank image. I have also seen a javascript rightclick alert box that prevents saving with a warning. I'm not exactly sure how it was done though.
  • In some cases disabling right clicking can actually deter users from visiting the site again. I highly recommend against using this method.

    Rob is right, definitely go with a simple watermark.
  • there are other ways to view the source and content other than right clicking the page
    also if you watermark it could be as good for branding as it is as a deterrent
  • I agree with watermarking. Images are downloaded to the browser cache anyway, so all the user has to do is go looking and they can find the image they want. They can also Save the site to their disk and find it faster. A watermark will be there in both cases.
  • I'd say, instead of trying to find way to make it impossible/more difficult to steal images, try to find a way so that people don't even want to steal the images in the first place.

    Watermarking is the best way for that I think. That way, you sort of "damage" the image, and the watermark is part of the image (impossible to detach), no matter how someone will get it (taking a screenshot is another way).

    The downside is that it indeed looks a little bit less perfect on your website, but that's the price you'll have to pay.
  • Flikr (I'm sure I mis-spelled that) uses a transparent div on top of the image. This could probably be done better with pseudo elements, but in the end, if someone wants the image, they can get it. Period. Watermarks would certainly be recommended in addition to one of the methods listed above.
  • @cnwtx: Yay, maybe something like this:

    <figure>
    <img src="real-image.jpg" />
    <img class="watermark" src="watermark.jpg" />
    </figure>

    figure {position:relative;}
    figure img.watermark {
    position:absolute;
    top:0px;
    left:0px;
    }

    /* Or... replace the <img class="watermark" ... /> and...
    figure:after {
    content:url(watermark.jpg);
    position:absolute;
    top:0px;
    left:0px;
    }
    */


    PS: cnwtx, are you from Texas?
  • Thief can still just go peek in the source code and take real-image.jpg directly by going to the URL.

    Embedding the watermark in the actual image would make it much less interesting to steal, methinks.
  • Yes, the watermark will make them more curious. Might be better to make watermark.jpg/png as transparent image that did not attract attention. That will make some spinning stars around their head when they realized that they save something that did not exist.
  • @Hompimpa, I'm proud to be a Texan!

    Also, look at how the watermark is applied here: http://www.airplane-pictures.net/photo/194519/00-0172-usa-air-force-boeing-c-17a-globemaster-iii/
    Something like that would be the best way to keep hackers from getting the original image.

    I just had a little light bulb go off inside my head! Do what @Hompipa said in the first example above, except put the real image in a data url. This means they couldn't right click and "save image" (because of the transparent image above it), or find it in their cache or get the url and go straight to it (because it's really in the HTML file), but they could still screen shot it, which will, sadly, always be possible.
  • What about splitting the image into segments - I always though that would be a good idea.

    Mainly because if it's in a bunch of segments the average user would never be arsed to try and put it back together again.
  • More http requests for one image?
    unless you sprite it and have some sort of algorithm to put it back together based on the file, thats fort knox work right there ha
    might try it for the laugh
  • With an image and separate watermark, the thief can still go in the source code and download the actual image without the watermark.

    Dividing the image into segments is quite a hassle to download and put back together, but it's also a hassle to create (cutting it up and putting every segment on the site). And without a watermark over it, Mr. Thief can just take a screenshot and crop the image.

    Having the watermark as part of the image, it's impossible to separate the watermark from the image, so there's no way to get a clean image -- not by saving it, not by looking in the source code, not by taking a screenshot.

    This is how stock photo companies do it, like iStockPhoto. If you look at any photo on their site, there's really no way an image can be taken without having the company's logo included in it (example: here). You'll have to clean it up really well in Photoshop if you want the actual image.
  • Whatever. Oh great! @cnwtx, Can I meet with Sandy?
  • Maybe the best method is for them to fill a form in, sign a non ownership disclaimer and have the image taken to them by carrier pigeon.
  • What about stacking five images on top of each other? One with the red channel, one with the green, etc. Then put a transparent one on top of everything to finish it all off. Maybe even split that into pieces, then put all four layers back together at the end?
  • @senff

    It isn't impossible to remove the watermark, just very time consuming for some non-expert in Photoshop. I have removed them before and I would rather just pay for the image than spend the time trying to steal it. iStockPhoto does a good job because they have an x with different angles.

    @cnwtx I would like to just try that.
  • I haven't tested this, but if the window goes inactive during the taking of a screenshot, you could do this:
    html:not(:active) img.secure {opacity:0;}

    Again, I haven't tested it, and I don't know how many OS's inactivate the window for a screenshot, but it's worth a try.
  • A watermark is the only way.

    All other ways are easily overcome using snipping tool.