nickjarman.com

If someone is determined enough to copy the pictures on your site, they will. But you can make it harder for them to do this–hopefully hard enough to deter the majority of people who attempt to steal your images. In this article, I’ll explain a technique I’ve devised and put into use on another one of my sites. I’ll let you guess which one!

Let’s begin by looking at an image tag:

<img src="mypicture.jpg" alt="My picture" />

It’s quite straightforward, and looks like this on the page:

You’ll already know that you can style any HTML element by using CSS or the style attribute. Let’s use the style attribute to alter the image’s appearance:

<img src="mypicture.jpg" alt="My picture" style="padding: 4px; background-color: #ccc" />

I’ve added 4 pixels of padding round the picture and set the background colour, so that the padded area is visible. It looks like this:

Let’s see that in 3D to understand what’s happening:

The grey background area is larger than the picture because it has to include the 4 pixel padding we’ve specified. The background is effectively placed “beneath” the picture, so only the part which protrudes beyond the picture is visible. In the diagram, the part of the background you can’t see is shaded darker to help you visualise what the picture is covering.

So what have we learnt? There are actually two parts to the image tag: The picture you place in it, and the background. We have control over what goes in each of them.

Now we’ll try something less conventional. Take a look at this diagram to see what we’re aiming to do:

We’re going to “hide” the picture in the background, and place a transparent image on top of it. So instead of specifying a solid colour for the background, we’ll put the picture there. The src of the img tag will simply point to a transparent GIF:

<img src="transparent.gif" alt="My picture" style="background: url(mypicture.jpg)" />

How does it look in the browser? No different from the img tag we began the article with:

You can see right through the transparent GIF to the background beneath - where the picture itself is. But the important difference is what happens when you attempt to copy the picture by right-clicking on it and choosing “Copy” (or by using whichever means your particular browser supports). Try it now and see what happens. If you paste the result into your favourite image editor, you’ll get a blank image.

It should be easy to guess what’s happening. The browser happily copies the transparent foreground and ignores the background altogether. This even seems to work if you highlight a whole section of the page, incuding some text, and paste it into a more elaborate application, such as Word.

How secure is it?

It depends on the skill and persistance of the person trying to copy your pictures. Everything shown in the browser has to be downloaded onto their computer, so they will have a copy of it. If they know where to look, they can get it.

There’s also the fact that you have to specify the location of the picture in the img tag. So they could just request it directly. I’ll explain a little later how you can make the picture’s location slightly less obvious.

We should also consider that some browsers might have facilities for saving background images. Possibly they’ll have smarter copying and pasting too, but I haven’t found one like this yet.

In summary, this method is a good deterrant because it makes copying the content of your site more difficult. You can rely on it to cut down copying, but it will not eliminate it altogether.

Putting it into practice

If you’d like to use this method on your site, you might find these suggestions handy.

There’s no need to have a separate transparent image for every picture. You only need one small image, say 8×8 pixels, but you will have to manually specify the size of the picture itself, as follows:

<img src="transparent.gif" alt="My picture" style="width: 128px; height: 100px; background: url(mypicture.jpg)" />

If you’re generating pages using a scripting language such as PHP, you can use a function to generate the img tags for you. Here’s an example:

function ProtectedImage($Src, $Alt)
{
  $ImageSize = @getimagesize($Src);
	
  if ($ImageSize)
  {
    echo '<img src="transparent.gif" alt="$Alt" ' .
         'style="width: {$ImageSize[0]}px; ' .
         'height: {$ImageSize[1]}px; ' .
         'background: url($Src)" />';
  }
}

This has the advantage that the width and height attributes are calculated automatically, so including a protected image in your page is just a matter of making a call like this:

ProtectedImage("mypicture.jpg", "My picture");

If you’re using Apache, and providing your web host supports it, you can use URL rewriting to obscure the fact that there is only one transparent GIF. Here’s what you need to add to your .htaccess file.

RewriteEngine On
RewriteRule pictures/* transparent.gif

This will translate any URLs beginning with picture/ to transparent.gif, giving the impression that you are requesting a genuine picture file. Your img tags will look a lot more authentic:

<img src="pictures/mypicture.gif" alt="My picture" style="width: 128px; height: 100px; background: url(mypicture.jpg)" />

A subtle detail worth noting is that I’ve put the background attribute right at the end of the list, which means that in non-wrapping text editors it’s likely to be outside the viewing window. This could be useful if someone looks through your source: they will see the src attribute first and perhaps miss the background. Of course, typing the src URL into the browser will yield the transparent GIF.

A final point is the effect this has on search engines which index images: They will assume that the picture content is in your transparent GIF - which is not great if you want your images to appear on their results pages. Some authors will view this as a reasonable trade-off against the protection it provides their site content.