Image Protection: Image Slicing and URL Shortening
Much has been written about web image protection, and for us bloggers it’s impossible to prevent images from being copied. The good news is that we can make things hard for novices. In this example of image protection, I’ll go through what I did to get the image below.
Image splitting
(a) Resized the original image to fit my post area using an image editor
(b) Divided the image into four equal parts using an image editor
(c) Each image is exactly: width: 186px; height: 248px
(d) Saved each image for a low resolution
(e) Uploaded images to Picasa and copied URL’s
Shortened the image URL addresses
(a) Went to Google URL shortener and signed in
(b) Pasted the long URL addresses into: Paste your long URL here
(c) Clicked: Shorten
(d) Copied and saved the shortened URL addresses
(e) More on Google Shortener
Reformed the image using a HTML table
(a) Formed the source code below and text in Windows Live Writer
(b) Pasted code also works in bloggers editor without error
(c) Linked images to homepage
(d) Saved to Local Draft
(e) Previewed before posting
Gaining access to Google’s URL shortening statistics
(a) Added .info to the shortened URL addresses
(b) Placed the URL address into the search bar and hit enter
(c) Reviewed the stats
(d) Stats: Number of clicks, referrers, countries, browsers and platforms
(a) Resized the original image to fit my post area using an image editor
(b) Divided the image into four equal parts using an image editor
(c) Each image is exactly: width: 186px; height: 248px
(d) Saved each image for a low resolution
(e) Uploaded images to Picasa and copied URL’s
Shortened the image URL addresses
(a) Went to Google URL shortener and signed in
(b) Pasted the long URL addresses into: Paste your long URL here
(c) Clicked: Shorten
(d) Copied and saved the shortened URL addresses
(e) More on Google Shortener
Reformed the image using a HTML table
(a) Formed the source code below and text in Windows Live Writer
(b) Pasted code also works in bloggers editor without error
(c) Linked images to homepage
(d) Saved to Local Draft
(e) Previewed before posting
Gaining access to Google’s URL shortening statistics
(a) Added .info to the shortened URL addresses
(b) Placed the URL address into the search bar and hit enter
(c) Reviewed the stats
(d) Stats: Number of clicks, referrers, countries, browsers and platforms
As to whether the change to a Google Shortener URL address makes it harder for web crawlers or anyone else for that matter to come across images, I don’t really have an answer for that.
If ever an attempt is made to save the supposingly whole image, only one quarter of the image will be saved. Touch wood, the user won’t realise their mistake until it’s too late. My testing shows that when I right click to save an image, it will saved as, depending on the web browser, a jpg, image file or a HTML document.
To enhance the illusion I’ve added two borders to each table. The images also have no alt attributes but all have the same image title, so no matter where the mouse cursor goes, the viewer will get the same message; less descriptive the better.
If ever an attempt is made to save the supposingly whole image, only one quarter of the image will be saved. Touch wood, the user won’t realise their mistake until it’s too late. My testing shows that when I right click to save an image, it will saved as, depending on the web browser, a jpg, image file or a HTML document.
To enhance the illusion I’ve added two borders to each table. The images also have no alt attributes but all have the same image title, so no matter where the mouse cursor goes, the viewer will get the same message; less descriptive the better.
| Image 1: Top Left | Image 2: Top Right |
| http://goo.gl/7YkKm | http://goo.gl/l3o7X |
| http://goo.gl/7YkKm.info | http://goo.gl/l3o7X.info |
| Image 3: Bottom Left | Image 4: Bottom Right |
| http://goo.gl/4Q28z | http://goo.gl/TFrqZ |
| http://goo.gl/4Q28z.info | http://goo.gl/TFrqZ.info |
Above are the shortened image URL addresses plus their info links. The first link will reveal the image, and the second, the statistics. The names I’ve given the images assisted me in placing them into the table, which you will see perhaps, depending on your browser, if you attempt to save any – please don’t. I suggest you name yours without similar name guides.
My Open Source Code (Proviso: don’t save the images):
<br /> <div align="center"> <table style="margin: 0px auto" cellspacing="0" cellpadding="0" align="center" border-spacing="0"><tbody> <tr> <td width="91" align="center" border-spacing="0" border="0" cellspacing="0" cellpadding="0"><a href="http://stvincentsdarlinghurstmalenurses.blogspot.com/"><img style="padding-bottom: 0px; border-right-width: 0px; background-color: #cccccc; margin: 0px auto; padding-left: 6px; padding-right: 0px; display: block; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 6px" title="Emmi on Christmas Day" border="0" alt="" align="center" src="http://goo.gl/7YkKm" width="186" height="248" valign="bottom" /></a></td> <td width="91" align="center" border-spacing="0" border="0" cellspacing="0" cellpadding="0"><img style="padding-bottom: 0px; border-right-width: 0px; background-color: #cccccc; margin: 0px auto; padding-left: 0px; padding-right: 6px; display: block; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 6px" title="Emmi on Christmas Day" border="0" alt="" align="center" src="http://goo.gl/l3o7X" width="186" height="248" valign="bottom" /></td> </tr> <tr> <td width="91" align="center" border-spacing="0" border="0" cellspacing="0" cellpadding="0"><a href="http://stvincentsdarlinghurstmalenurses.blogspot.com/"><img style="padding-bottom: 6px; border-right-width: 0px; background-color: #cccccc; margin: 0px auto; padding-left: 6px; padding-right: 0px; display: block; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="Emmi on Christmas Day" border="0" alt="" align="center" src="http://goo.gl/4Q28z" width="186" height="248" valign="top" /></a></td> <td width="91" align="center" border-spacing="0" border="0" cellspacing="0" cellpadding="0"><a href="http://stvincentsdarlinghurstmalenurses.blogspot.com/"><img style="padding-bottom: 6px; border-right-width: 0px; background-color: #cccccc; margin: 0px auto; padding-left: 0px; padding-right: 6px; display: block; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="Emmi on Christmas Day" border="0" alt="" align="center" src="http://goo.gl/TFrqZ" width="186" height="248" valign="top" /></a></td> </tr> </tbody></table> </div> <br />
Tips for using the source code
(a) Replace my shortened URL’s for yours
(b) Replace my homepage http address for yours
(c) Change border colour #cccccc to suit
(d) Change width and height to suit
News For Bloggers who use Google Plus and Picasa Web
(a) Replace my shortened URL’s for yours
(b) Replace my homepage http address for yours
(c) Change border colour #cccccc to suit
(d) Change width and height to suit
News For Bloggers who use Google Plus and Picasa Web
Google Plus images are from your Picasa albums. Currently, if you delete them from Google Plus, you’ll be deleting them from your Picasa web albums. The end result is that your blog images will be lost unless you have backed them up. More on that here.
| Open Source Image Posts: | |||||
| 
|
| |||
|
|
| |||
