How Protect my Pictures and Images by Don Pedro

Please note: Every link on this page opens in a new window. If your "Pop-up killer" is too efficient it can also stop new windows. When this happens, please press "Ctrl" and click on the link you want.

Protection or No Protection ?

Picture stealing on the Internet has existed for a long time and so has the techniques to make stealing more difficult. See article Thwarting Image Theft: Fact or Fiction from year 2000 and the adjoining discussion / comments. Nothing new under the sun, right ?

The big question for many site owners is first: "Shall I protect my pictures?". If the decision is "Yes", then the next question is: "How can I protect my images?".

When a visitor opens your web page in his/her computer a copy of the complete page including your pictures and graphics is in that browser. As you can manipulate anything you have in your computer it's not possible to prevent the stealing. What you can do is only to make it more difficult and time consuming.

Making it more difficult can have certain risks. Some Internet users are lazy and therefore steal pictures instead of making them by themselves. Others may be do not have any good picture handling or graphics software program and therefore cannot make their own images. Then you have a lot of novices who haven't yet had time to learn how to make images or handle pictures.

Most schools all over the world do teach computer use to there students. But so far I haven't heard of a single high school that also teaches about copyright on the net. If nobody teaches future Internet users about the existence and meaning of copyright, how can we ( webmasters / website owners ) expect the users' to respect our copyright to the pictures and text we publish on the net ?

If the visitor is an experienced computer user and you try to prevent theft of your pictures may be you just push that visitor's "start button" and he/she really steals all your images, just because he/she knows how to do it. But if the visitor comes to your page looking for exactly the kind of pictures you have on your web page and you employ some kind of protection, then this visitor will go away never to return. Even if he/she may be was very interested in exactly the kind of information you have on your web site.

In the latter case you will loose visitors. You need to achieve some kind of balance; are the pictures really of the kind that they are more important than the text? Or may be a friendly copyright note would be enough - letting people "borrow" your images and may be gaining a crowd of returning interested visitors instead?

Get an explanation of "fair use" and other copyright terms in connection with website content on the Internet.

There are different ways to make picture theft a little bit more difficult. Below I'll go through and explain four of them. See also summary with advantages and disadvantages of different methods.

Disable Right-Hand-Click

The first kind of protection that comes to one's mind is to disable the right-hand-click on the visitor's mouse. As said above it doesn't stop anyone from stealing your images, just makes it more time consuming and therefore may be chases the lazy ones to another site. It does not work if your visitor have a Mac computer.

The most usual way to do it is with a JavaScript in the <HEAD> section of your page code, or alternately with an external script on your server, which in it's turn requires a call-up code in the <HEAD> section.

Free and very low cost servers do not allow any extra scripts in the <HEAD> section (not even a call-up code). In other words, you can use it only with a fully paid service or on your very own server. But - there are many Internet users who have switched off the JavaScript in their browsers, they can still continue stealing your pictures.

For free servers you need a JavaScript that goes into the <body> section.

You could employ an XHTML script from Dynamic Drive, which should work well in new browsers, provided you use either the Transitional or the Strict DOCTYPE tag on your pages. And then again there are users who have old browsers, which cannot read XHTML so basically it's same problem as with JavaScript.

When you use a free server you can sign up for a free web site traffic data ("visitor statistics") account with Whoz On Top, with an option to disable the right-hand-click. This script comes to your visitor's browser together with the data collecting banner, thus the script bypasses your server but still it works only with JavaScript enabled and, of course, only on those pages where you put the banner. Then you don't get any data for the pages without the banner. All possible options have their own application problems.

Robots Text File

May be you already have some "secret" pages on your web site you don't want the search engines to find yet. For these may be you use the "NO INDEX" and robots text files.

You can use the robots text file also for "hiding" your images from the search engines. Of course all pictures will still be displayed on your pages. But when the search engines don't register them, they won't come up in any image search either. So they would be more difficult to find for those who use "Image search" for stealing pictures.

In the robots text file you add:
Disallow: /images/
This stops most search engines from registering and indexing all images in your "images" folder. Naturally it works best with new sites or new images. If you add this after the pictures have already been indexed it can take very long before they are deleted from the search engines' data banks. Some may never delete them.

Split your Picture

You can split your picture into two or three, depending on size of original picture. The example picture I'm using is very small, so I'll split it only into two. It's been done in "Paint". The original picture you can see to the right, little bit smaller than the one really split and put together.

First I looked for a clear detail somewhere in the centre of the picture where I could put the cut. Then in "Paint", after you have opened the picture, you click on the rectangle (dotted lines) and place the "cross" where you have decided to cut the picture. Draw a rectangle, so you get half of the picture. Go to "Edit" --> "Copy to ...". Give that first half a new name and save it in the folder you want. Never mind if you get it as .bmp, you can later change to another format.

To get advice on how to cut the picture, go to How to Cut Out a Part of a Picture.

Then you do the same again, but now you choose the other part. You have to be very careful so that you both times cut exactly at the same place. The two halves are shown below as separate pictures.

Left side cut out

Now you can see I wasn't careful enough when I cut the two halves. On the left side half you can see a small band both at top and bottom of the picture; on the right side half you see a small band at the bottom of the picture. This is because the rectangle cut little bit outside the picture. I have left it to show how careful you have to be.

Then let's put the pictures back together. When your "friendly thief" takes this picture, he/she gets only one half - left or right, depending on where the mouse arrow happens to be.

Picture put back together again
The code to get the pictures seamlessly back together is:

At the end you put the line break: <br> to tell the browser: the line stops here. I fact there are two pixels missing in the middle, which is why you can see there's something wrong with it. You have to do the cut extremely well. When it's not directly seen the picture has been cut then the person taking the picture won't notice anything before much later.

To change .bmp to .jpg format, see Don Pedro's How to Change Picture Format. I used Irfanview.

Use Transparent Protection

A novel idea brought forward by Mr Stephen Chapman. It means you cover your picture or image with a transparent sheet. When your "friendly thief" takes your image and saves your picture he/she in fact gets only the empty transparent sheet.

Hopefully the visitor won't notice this before later when looking through the day's "harvest". By then may be he/she doesn't remember anymore what images were stolen from where and thus may be won't come back to your site for a second round and take the real picture.

You do it with a regular layout table. The real picture you put as background either for the table or the column. Note the current HTML standards support "background" only in the <BODY> tag so the page wont validate. Table and column tags take only background colour as specified with the hexadecimal code. Every browser will, however, display this correctly.

This is an example of how it looks. If you save this picture you will get the transparent sheet only. I have added copyright symbol (©) and my name in the top corner. I think that should discourage almost all visitors to steal the picture in any way. But if you have a lot of pictures to protect it's quite a job to prepare a sheet for everyone of them.

Specify exactly same width and height for the table and the transparent sheet as what the actual size is for the real image you want to protect (the column width="100%"). In the column you put only the call-up code for your transparent sheet.

Especially if your real picture or graphics is a GIF with transparent background you can get an "echo" to the right and at the bottom. If this happens reduce the "width" of the table and the width of the sheet in the call-up code with a few pixels at a time until the "echo" disappears. Then you do the same with the height.

To prepare a transparent sheet you can cut a square or a rectangle - whichever you need - from a blank white surface anywhere. To make the sheet transparent see Don Pedro's How to make Transparent Background.

I used Irfanview. You don't have to make the sheet exactly same size as the image you want to protect. Specify the size in the call up code and let your visitor's browser resize the sheet. On a transparent sheet there's nothing that can get distorted, is there now?

Even with the © symbol and some text you can still resize ± 20%, until the text starts looking funny. In other words, you can use the same transparent protection for several images of slightly different sizes.

Around the copyright symbol and/or text you can get a "halo". To avoid that use a good picture handling program ( for instance Photoshop ) and apply "anti aliasing" when you change the sheet to transparent. If you don't have any good program available, leave out the copyright symbol / notice.

In the example above I have further reduced the size in the browser horizontally about 10% and vertically about 30%.

Use Watermarking

You can achieve the same effect with a watermark embedded in the photo. This is almost permanent as it's extremely hard to remove, except by cutting a part of the picture away.

You can download a free trial of a copyright embedding program (1.3 MB) and use it for 15 days. With this you can add an almost transparent © mark or a copyright text of your own choice. Click on picture to the right and get an example photo with the © mark in upper left corner (85 KB). It can increase picture file size with up to 10 KB.

I do not recommend you take a version including ActiveX or Macros, as these can open an entrance for viruses - see Don Pedro's Computer Viruses and Worms.

Alternately see Photoshop CS3 tutorial for adding copyright ( © ) watermark to your images.