How to Slice and Dice Your Images
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.
Slice and Dicing a photo is a process that involves cutting an image apart and then putting it back together. The beauty of this system is that similar to shrink wrapping your image, your regular visitors will have no idea that anything is different. In fact, the only person who would ever discover that your image was sliced and diced is someone who was trying to download the picture.
Even though you can’t see it, the image above is actually made up of three separate images shown below that have been reassembled with HTML using a <table> tag. 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 Slice and Dice Your Images:
- Open your image in your favorite graphics editing program and immediately make a copy of of it. Do not work with the original!
- Open your copied image and begin cropping your photo into several smaller pieces. You can slice your image horizontally or vertically (or both). There are several ways to crop your images depending upon the graphics program that you are using. The important thing is to make sure that your smaller images will match up with one another when they are reassembled. NOTE: If you are doing this for the first time, I would probably suggest cutting your image into three vertical slices like the picture above so that you can follow the HTML code below more easily.
- Once you have cropped the first piece of your image, be sure to label it clearly in order to make it easier to reassemble (ex. Left/Middle/Right, Top-Left/Top-Middle/Top-Right, etc..)
- Use the “Save as” function to save each of the smaller cropped images for the web as a .GIF file *
- Open your copied original and repeat the process until all pieces are saved and ready to go. Make sure that all of the images match up and that there is no “overlap” between any of the images.
- Upload all of your new sliced and diced image files to your blog or website
- Go to your HTML (not Visual or Design) page or post editor
- Insert your <table> HTML code (see below)
- Check your page in your visual editor and preview
* I would recommend saving your files as a .GIF rather than a .JPG or other format that has a “lossy compression” which can sometimes cause some edge blur or other noticeable edge artifacts when your image is reassembled.
Here is the <table> HTML Code I used to reassemble these pictures. 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 border=”0″ cellspacing=”0″ cellpadding=”0″ width=”500″ rules=”NONE”>
The first line of the code sets the table border, cellspacing, and cellpadding to “0” so there is no space in between the pictures. Remember to set the “width” to the size of your original picture.
<td width=”141″><img src=”http://picture-on-the-left.gif” border=”0″ alt=”” width=”141″ height=”438″ /></td>
This is the code for the first picture on the left. Once again, set the border to “0”. Set the <td width> to the size of the width of this piece of the picture (not the original width). Also remember to replace the “picture-on-the-left.gif” filename with the name of your actual picture. The order you put these <td> codes in will determine how they are reassembled starting from the left to the right and from the top to the bottom.
<td width=”227″><img src=”http://picture-in-the-middle.gif” border=”0″ alt=”” width=”227″ height=”438″ /></td>
This is the code for the picture in the middle. Notice that the width is different than the first one, which may or may not be the case in your picture.
<td width=”131″><img src=”http://picture-on-the-right.gif” border=”0″ alt=”” width=”131″ height=”438″ /></td>
This is the code for the third and final image working from left to right. This is all followed by the HTML “closing tags”.
Note: If your picture is split horizontally (instead of vertically) you would add the second row <tr> directly after this code but before the following closing tags (</tbody> </table>).
Keep in mind that when you are editing in HTML it doesn’t matter if the code is spaced out as above or right next to each other as it is below.
Once again, here is the entire <table> HTML code below:
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”500″ rules=”NONE”> <tbody> <tr> <td width=”141″><img src=”http://picture-on-the-left.gif” border=”0″ alt=”” width=”141″ height=”438″ /></td> <td width=”227″><img src=”http://picture-in-the-middle.gif” border=”0″ alt=”” width=”227″ height=”438″ /></td> <td width=”131″><img src=”http://picture-on-the-right.gif” border=”0″ alt=”” width=”131″ height=”438″ /></td> </tr> </tbody> </table>
I hope that you found this tutorial on how to Slice and Dice 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.