A question lots of web site owners ask themselves is "how do I stop people from stealing my images?" The short answer is: you can't. If you put it on the web, someone can steal it. But that doesn't mean you have to make it easy for them.
Skip The Discussion And Just Show Me The Method
There are many ways to steal an image. The most pernicious is hotlinking, which is where someone sources the image off your server into their web page, meaning they're not only stealing your image, they're stealing your bandwidth. But that's a complex discussion.
The most common is simply copying the image off your site. They just right click on the image and copy it or save it, and there you go. They now have a copy of your image and it was really easy for them to steal it. So how do you prevent those right-clickers from stealing your image?
Some people use a JavaScript that prevents right-clicking on a page. But I find that annoying. What if I'm a legitimate user and I want to right-click a link to open it in a new window or browser tab? What if I have other legitimate reasons to right-click? You're annoying good users to try to stop the bad ones. But even worse, all the users have to do is turn off JavaScript and they can right click.
"Okay," you say, "I'll make it so all the images are displayed using JavaScript, so if they have JavaScript turned off, they won't be able to see the image." Then legitimate users who either won't or can't run JavaScript can't access your images.
The method I'm going to show you is really simple and doesn't require fancy scripts or block legitimate users from viewing the image.
Make the image the background of a table and then fill the table with a transparent .gif.
I've put in an example below with an image I created using free clip art from FunDraw.Com. The one on the left is added to the page using the standard IMG method in HTML. The one on the right is added to the page using the table method. Try downloading each one. The one on the left will give you the image. The one on the right will give you a 1x1 pixel transparent .gif.
Normal with IMG method
|
Protected with table method
|
Here's the HTML from the table method...
<tr><td width=100%>
<img src="/otherimages/spacer.gif" height=288 width=240 border=0>
</td></tr></table>
Now this method is not foolproof. Someone who really wants the image can either do a screen capture and crop out the image, or they can look at the source code of your page, figure out the direct URL for the image, and download it that way. But how many people know how to do that? Ten percent of web surfers? And because you're making it difficult, a portion of casual image thieves in that 10% who do know how to steal it will just say "it's too much trouble" and skip it.
This method is like locking and alarming your car. It won't stop a professional thief who really wants your property and knows how to get around your protections. But it stops the casual thieves who either can't get past your security or are looking for an easier score.
Entries (RSS)
In addition to this precaution, I also use a water mark. So if the image stealer does use the source code method and uses the URL to upload the image to the Photobucket or something similar, the water mark will still be there. Water marks are also extremely difficult to remove.
Great post! More webmasters need to know about this sort of thing.
Unfortunately this doesn't work in firefox, you can press view background image
Adam, as I said, it won't stop someone who knows what they're doing. But not everyone runs Firefox and a lot of people who do wouldn't realize that the image they want is the background image. This is like a baby gate on the stairs, not a locked vault.