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
as the source file is marked, there is no way to get the original image.
There are several solutions to watermark images with ease. From modifying it viaPhotoshop, 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 plugincan 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