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.
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.
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=”https://skinnyartist.com/wp-content/uploads/2010/06/Image-1987653.gif” alt=”” width=”300″ height=”180″ /></td> </tr> </tbody> </table>
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.