Protecting images online is a difficult, almost impossible, mission to accomplish. At the end, the image is there and a "print screenshot" command can grab it & no way to stop this.
But, there are various ways to harden the process & make it not worth trying like disabling right clicks, using images as backgrounds, adding watermarks to them & more.
Here are the good practices of these options:
Hide The Images
Put A Blank File Over The Real Image
This method will make the real image unreachable unless checked from the source.
You can use the original image as a background & put a transparent-blank file over it that matches the size of the real image.
For ex:
<div id="image1" style="background-image: url(originalImage.jpg);"><img src="blank.gif" height="250px" width="300px"></div>So, when the image is right-clicked, it will be the blank.gif that can be reached.
There are also 2 JavaScript framework ready solutions for this:
Auto-Slice The Images
Super Simple Image Tiles
This is a very effective image protection method.
An image is automatically sliced into pieces but presented as a whole. The original image is also hidden as watermarked.
Some serious disadvantages of this method are:
- adding a relatively more overload to the server as multiple requests will be made
- you’ll have lots of image files
Using Watermarks (Pre-Generated)
Adding a watermark to an image is an effective way of protecting images.Besides the cons like:
- image not being presented clearly (there will be a watermark on it!)
- can be downloaded and cropped
There are several solutions to watermark images with ease. From modifying it via Photoshop, GIMP, etc. to some web-based watermarking services like:
PicMarkr
A free service to watermark images online.
Multiple images can uploaded once or they can be grabbed automatically from Flickr.
It is possible to apply a text or an image watermark.
WatermarkTool
Another web-based free watermarking service.
You can upload images to be watermarked, customize the watermark text to be applied & download the updated images.
Using Watermarks (Generated Server-Side)
It is possible to automate the watermarking process at the server level. Once applied, this is the easiest method to use.To mention, implementing these methods require at least a bit of scripting knowledge.
Here are several libraries & examples for this:
Asido: PHP Image Processing Library
Asido is a PHP image processing library that can work with GD2, Magick Wand & Image Magick.
Here is a detailed information on watermarking capabilities of Asido.
Other PHP solutions:
- Put watermark on images using PHP
- Watermark your images with PHP 5 and GD
- Watermark images on the fly in PHP
ASP.NET Solutions:
- Thumbnail and watermark images on the fly with ASP.NET
- Watermarking Images in ASP.NET with an HttpHandler
- CoolWatermark (paid)
Ruby Solutions:
Use Flash To Show The Images
swfIR
swf image replacement displays images inside a Flash file which makes right-click impossible.
And, images can still be styled with CSS properties
On the other other hand the image source is mentioned at the source which again can not provide a total protection.
Browser Based Image Protection
Disable Right Click
Disabling right click via JavaScript is a way to start protecting images. But it is a simple step which can stop novice users as it is possible to disable JavaScript or get the path to the original image by reaching the source.
Is this a good method? Definitely no as you will be disabling all the right-click options like print, copying the link, etc. (updated 23 Jan 2009)
It may be a better solution to disable only save functions which this jQuery plugin can help.
Disable IE6 Image Toolbar
When an image is hovered for a while, IE6′s image toolbar appears automatically with an option to save the image. This can be disabled too.
Add the following code between the
head tags of the webpage.<meta http-equiv="imagetoolbar" content="no">
No comments:
Post a Comment