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

Protect Images Background Method

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

PHP Image Slicing

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

Online Watermarking

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

Online Watermark Website

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

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:

ASP.NET Solutions:

Ruby Solutions:

 

Use Flash To Show The Images

 

swfIR

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

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

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?

WebResourcesDepot Feed