The (Other) End of the Internet

As a budding photographer I occasionally find myself wanting to post images online so I can show them off, but I don’t want everyone who sees them to be able to steal them. There are several ways to make this more difficult, such as javascript to disable the left mouse button. The problem is, though, that if someone knows enough about web design and is determined enough, you won’t be able to 100% guarantee the safety of your images. The best you can hope for is to make it too much of a pain in the backside to successfully copy your images. One effective way of doing this is to slice the image up into smaller pieces and assemble them in a table.

I used a portable version of The GIMP (that’s GNU Image Manipulation Program - a rather unfortunate acronym for an excellent program) to create and then “slice ‘n’ dice” the following image:

Since the Windows version of The GIMP doesn’t come with this plug-in by default, I downloaded it from THIS LINK.

Here’s a quick run-down on how to do this.

First off, you’ll obviously need an image to chop up.

This is just something I threw together for this example.

The next step is to position guides along the borders where your cuts will be made. Click on either the top or side rulers and drag toward the image. You’ll find yourself dragging a dotted line (horizontal or vertical, depending on which ruler you dragged from). Drop it where you want a cut made. use as many as necessary to get the cuts you want. I used 4 cuts to make a tic-tac-toe shape on the image:

For reasons I have yet to figure out, the Web-O-Tine script cries ‘Foul’ if your image has only one layer, so to save yourself a headache, go ahead and make sure there are at least two layers. If necessary, click Layer->New Layer and create an empty transparent layer.

Now, click Script-Fu->Web->Web-O-Tine and fill out the dialog:

(Pardon me for using the Airbrush tool on my “Directory Save” textbox — I didn’t feel like sharing my directory structure with the world.)

Directory Save is where you want the new .html file placed.

The script is pretty good about creating intelligent filenames for the new images. It will use the text in Image Base Name plus a coordinate style number for each image. The number is the row and column number in the table where the image should be placed.

The relative image directory is what subdirectory you want the images loaded from. In my example, the html will look for images in
…\Desktop\blogscreenshots\example

Next, select an Image Extension and decide if you’re indenting the html code with tabs or spaces, and how far, and whether or not you want the HTML tags capitalized in the resulting code.

The above proceedure will generate this code:

<!--

  Created With GIMP

  Cuted with Web-O-Tine plugin

-->

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">  <TR>

<TD><IMG src="example/layout-img-1-1.jpg" WIDTH="82" HEIGHT="82"></TD>

<TD><IMG src="example/layout-img-1-2.jpg" WIDTH="81" HEIGHT="82"></TD>

<TD><IMG src="example/layout-img-1-3.jpg" WIDTH="87" HEIGHT="82"></TD>

  </TR>

  <TR>

<TD><IMG src="example/layout-img-2-1.jpg" WIDTH="82" HEIGHT="82"></TD>

<TD><IMG src="example/layout-img-2-2.jpg" WIDTH="81" HEIGHT="82"></TD>

<TD><IMG src="example/layout-img-2-3.jpg" WIDTH="87" HEIGHT="82"></TD>

  </TR>

  <TR>

<TD><IMG src="example/layout-img-3-1.jpg" WIDTH="82" HEIGHT="86"></TD>

<TD><IMG src="example/layout-img-3-2.jpg" WIDTH="81" HEIGHT="86"></TD>

<TD><IMG src="example/layout-img-3-3.jpg" WIDTH="87" HEIGHT="86"></TD>

  </TR>

</TABLE>

And here are the individual pictures that this proceedure creates:

So, while you probably won’t be completely able to stop someone from stealing your images if they’re determined enough, this will hopefully make it too much trouble for the would-be thief to bother with.

Technorati Tags: how-to, web+graphics, image+protection, The+GIMP