The Issue
Web page images, whether they be in JPG, GIF, or PNG format are easy for end users to steal. Stealing these images involves nothing more difficult than right-clicking on an image and choosing "Save Target As" from the contextual menu that appears, or simply mouse dragging an image onto the desktop. The ease with which images can be lifted off of Web pages may be a boon to Web users, but it's also very frustrating to who want to protect the images on their Web sites. In this article I describe several techniques to thwart Web page image theft, but please understand that no technique is 100% effective. There are ways to get around these techniques; as developers all we can do is make image theft more difficult.
Techniques
Using Cascading Style Sheets
Setting an image as the background of a <div> element in CSS affords a measure of protection to a Web page image. For example, the image below is actually a background image of a <div> element.
The code for setting the background image of the above <div> looks like this:
div{background-image:url(monarch.jpg);
background-repeat:no-repeat;
width:400px;
height:300px;
margin:15px auto;
border:1px solid #404040;}
</style>
The pertinent parts of the above style declaration are the background-image property, which has been set to monarch.jpg (the name of the image file), the background-repeat property, which has been set to no-repeat, and the width and height of the containing <div> element, which are the same as the monarch.jpg image. Using this method makes mouse dragging the image onto the desktop impossible. Try it. However, a user can still right click on the image and choose "Save Background As" (or a similar command) from the contextual menu that appears and permanently save the image to their computer. Therefore, this method provides limited protection.
Using JavaScript
JavaScript can be used to deter right clicking on an image, as well as mouse dragging an image onto the desktop. The image below has a bit of JavaScript attached to it that activates when the image is clicked on. Try it. If JavaScript is enabled in your browser a dialog box will pop up that says "This image is copyrighted!".
The JavaScript code looks like this:
function protectImg()
{
alert("This image is copyrighted!");
return false;
}
</script>
<body>
<img src="/joomla/monarch.jpg"
onmousedown="protectImg()"; />
</body>
The function "protect()" is activated when a user clicks on the image. The "return false;" part of the script cancels the user action and prevents the image from being stolen (but see the next paragraph). The code can be placed in an external JavaScript file, in the head of the document, or even directly inside an <img> tag, e.g.:
<img src="/joomla/monarch.jpg"
onmousedown="alert('This image is copyrighted!');
return false;" />
</body>
The effectiveness of this technique varies from browser to browser. For example, in Internet Explorer left clicking or right clicking the image will result in a dialog box appearing that says "This image is copyrighted!" and the action being cancelled. In Mozilla, left-clicking or right-clicking the image will still result in the dialog box appearing, but on right-clicking, the contextual menu also appears, so the user can still save the image to their computer. And if JavaScript is disabled the script won't work at all.
Using Image Slicing and Cascading Style Sheets
Image slicing refers to cutting an image into pieces with an image editing program such as Photoshop. The several images can then be pieced back together using Cascading Style Sheets or html tables. For example, the apparent single image below is actually made up of 3 different images that have been put back together using CSS and divs. Move your mouse across the image to locate the 3 different parts.
The CSS code for piecing together the above image looks like this:
div.image3{width:400px;height:252px;
margin:10px auto 0px auto;
border-left:1px solid #404040;
border-top:1px solid #404040;
border-right:1px solid #404040;}
div.image3 img{float:left;}
div.image4{width:400px;height:48px;
margin:0px auto 10px auto;
border-left:1px solid #404040;
border-bottom:1px solid #404040;
border-right:1px solid #404040;}
</style>
The code for this technique is fairly complicated but the gist is to get the pieces into <div> elements of fixed dimensions. The <float> property is used to force the 2 images in the top <div> together.
The advantage of this technique is that a user can only save the pieces of a sliced image. Give it a try. If you save each image in the above example you'll end up with 3 separate images on your computer. Sure, it's possible to then piece the saved images back together with an image editing program, but this is a lot of trouble to go through.
The disadvantage of this technique is that it's difficult and time-consuming to implement. An image has to be cut up and then reassembled using divs or html tables, which is no easy task.
Conclusion
The ease with which images can be lifted off of Web pages is a frustrating reality for Web developers. However, the techniques described in this article afford a measure of protection to Web page images, but remember that determined individuals can get around them. No technique is 100% effective. 
