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 Web developers who want to protect the images on their websites. 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.
Setting an image as the background of a <div> element in CSS affords a measure of protection to an image. For example, the image below is actually a background of a <div> element.
The code for setting the background image of the above <div> looks like this:
The pertinent parts of the above style rules 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 width and height of 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 save the image to their computer. Therefore, this method provides limited protection.
Here's the jQuery code:
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 (or touch the image if you are using a touchscreen device) to locate the 3 different parts.
The HTML for piecing together the above image looks like this:
And the CSS looks like this:
The code for this technique is fairly complicated but the gist is to get the pieces into <div> elements. 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.
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.
Other Web Development Articles By Robert D. Hughes