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:

• dwProtector for MooTools
• dwProtector for jQuery

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 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:

• RMagick
• Watermarking your images with RMagick

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">

 Any more image protection solutions you want to share?

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Voice Enabled Powerful Web Chat Software: Ajax Chat
• Share And Find Codes You Need With Snipplr
• Process Images Easily In PHP With Asido
• jQuery Image Slider: Agile Carousel
• Compare Frameworks For PHP, JS, Ruby & CSS

With a bunch of options to customize the slider, and it can be used with or without jQuery UI for more effects, the plugin provides total control.

From a folder mentioned, it gets the images via PHP (not Ajaxed).

Some controls it has are:

• Prev-next button options
• Enable-disable slide captions
• Effects used, delays
• Use of watermarks (text)
• & many more..

A demo with all the features can be found here.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Process Images Easily In PHP With Asido
• 10+ Ways To Protect Images From Being Stolen
• Zimplit: Easiest CMS For Simple Websites
• Wiki-Like Project Management Tool: Streber
• Web-Based PHP FTP Application: phpWebFtp

Asido is a feature-rich image processing class for PHP that fits to any environment like GD2, Magick Wand and Image Magick. It supports both PHP4 & PHP5 (newer versions support only PHP5).

An example of adding a watermark to an image:

And the code:

<?php
include('./../../asido/dev/class.asido.php');
asido::driver('gd');
$i1 = asido::image(
      'the-source-image.jpg',
      'filename-with-which-you-want-to-save-the-result.png'
);
asido::watermark($i1, 'put-the-watermark-image-here.png');
$i1->save(ASIDO_OVERWRITE_ENABLED);
?>

It is really simple and clear.

Asido can:

• resize
• watermark
• rotate
• copy
• crop
• grayscale
• convert

images with ease. To develop faster, Asido is worth a try.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• jQuery Image Slider: Agile Carousel
• 10+ Ways To Protect Images From Being Stolen
• Zimplit: Easiest CMS For Simple Websites
• Wiki-Like Project Management Tool: Streber
• Web-Based PHP FTP Application: phpWebFtp