In the companion article to this tutorial on How Artists can Protect their Images Online I talked about a few different ways you can protect your online images from being stolen. Using methods such as Shrink-Wrapping your Images , Watermarking Your Images, and Slice and Dicing your Images.

In this tutorial, I’m going to show you how you can shrink wrap your images in order to help protect them from online thieves.  Shrink Wrapping an image is a process that involves putting a clear transparant image (like shrink wrap) on top of another image so that a person attempting to copy your image will actually download the clear image only.

The beauty of this system is that similar to slice and dicing your images, your regular visitors will have no idea that anything is different.  In fact, the only person who would ever discover that your image has been shrink wrapped is someone who was trying to download the picture.

While no image protecting method is 100% foolproof, shrink wrapping your image will deter a surprising amount of image thieves simply because they often move on to a different site before they realize what they actually downloaded.

The following image has been shrink wrapped
(for your protection)

If you would like to see how this works, try downloading the image below by right-clicking and then select the “Save Image to the Desktop”  or “Save Image to your Computer” option

If you did this, you should now have an image called “Image-1987653″ downloaded to your computer. If you would try to open that image, however, you will discover that it is probably not the image you were expecting to find. Don’t worry, it’s not some kind of virus, it’s simply a transparent image that has been shrink-wrapped over top of the other image that you thought you were downloading. It’s kind of like putting a piece of glass over a photograph.  You can still see it clearly, but you just can’t pick it up because it has a layer of protection over it.

The process of shrink wrapping your images is somewhat similar to the method we use to slice and dice an image in the fact that we use the HTML <table> element to create a type of “image sandwich”.  If you’re not that familiar with HTML or don’t know what a <table> tag is, don’t worry, I’m going to walk you through the entire process step-by-step.

How to Shrink Wrap your Images:

1. Upload your original image file and your shrink wrap transparent image file to your blog or website (see the “Some Additional Tips” section below on how to create your own transparent image file)
2. Open your editing page to the section where you would like your shrink wrapped image to be located and switch your editor from “Design” or “Visual” to “HTML”
3. Enter the HTML code below making the necessary changes
4. Switch back to visual mode and you should see your image displayed on the page
5. Preview your webpage and try to right-click and download your image file (you should only be able to download the transparent image).
6. Laugh maniacally at frustrating one more image thief in the world!

Here is the <table> HTML Code I used to shrink wrap the above image.  I’ll go through the code line by line and then give you the entire code below.  If you are already an HTML master, feel free to skip the explanation and go straight to the complete code at the bottom of the page:

<table style=”display: inline;” border=”0″ cellspacing=”0″ cellpadding=”0″><tbody> <tr height=”199″>

The first line of the code sets the table border, cellspacing, and cellpadding to “0″ so there is no space around the two images. Remember to set the <tr height> to the size of the picture you are trying to protect.

<td style=”background-image: url(http://the-image-that-you-are-trying-to-protect.jpg);” width=”300″>

This is the code for the image that you are trying to protect.  We are telling it to be the bottom image in our image sandwich.  Remember to change the <width> tag here to match the width of your actual image.

<img title=”Name-of-your-protected-image” src=”the-generic-file-name-of-your-clear-image.gif” alt=”" width=”300″ height=”180″ />

</td> </tr> </tbody> </table>

This final bit of code puts the second “clear” image on top of the previous image creating our completed image sandwich.  Notice that the <height> tag here doesn’t match up exactly with the height of the original image.  Sometimes this adjustment is necessary in order to avoid a “tiling” effect of the original image.  Depending upon your image, you may want to start with the original height and then make it smaller as necessary.

<table style=”display: inline;” border=”0″ cellspacing=”0″ cellpadding=”0″> <tbody> <tr height=”199″> <td style=”background-image: url(http://the-image-your-are-trying-to-protect.jpg);” width=”300″><img title=”hndsup3″ src=”http://skinnyartist.com/wp-content/uploads/2010/06/Image-1987653.gif” alt=”" width=”300″ height=”180″ /></td> </tr> </tbody> </table>

• You can make your own shrink wrap image in most graphic editing programs such as Photoshop simply by creating a small 5×5 transparent gif file, or you can use ours by right-clicking and downloading it from the shrink wrapped image above.
• You may want to make the file name of your transparent image as generic as possible so the image thief will not get suspicious and double-check the downloaded image before leaving your site. For this reason, I wouldn’t suggest using names like “glass.gif” or “shrinkwrap.gif” or “stop-the-thievin-bastards.gif”.  Instead I would suggest using file names such as “img98934857.gif” or “183457.gif” that are generic enough that you could use them with any image on your site without letting the thief know that something’s going on.

I hope that you found this tutorial on how to shrink wrap your images helpful.  If you have any other questions, please let us know in the comment section below and we’ll do our best to answer them.  Also if you happen to know anyone who you think might benefit from this tutorial, please feel free to forward the link to them as well as bookmark this page on your favorite site.

Enjoy!