Take a look at the above image. Okay, I can just see you thinking "Yeah, I'm not blind. What's so special about a miniature picture of Nunzio?". Ahhhh... but there is something special about the above image. Save it to disk (Right-Click || Save Image/Picture As...) and open it in your graphics program. Hey, that's weird. All it opened was a 1 x 1 pixel GIF. Where's the pic of Nunzio? Let's try looking at the images properties. Hmm... it appears to point to that stupid GIF. But I know that's not the case. OK! This tutorial deals with one way to stop images from easily being downloaded off websites. As you may notice (if you're obsessed or something), apart from the above example, none of the other images on any other sites use this copy protection trick. That's because I know that you people are smart and could steal it anyway, and also that I couldn't really care less if someone borrowed a JPEG or GIF or two. Although I'd doubt that you would want this silly pic of me you see here. If you do, I pity you! :) The above method is referred to as a TABLE Transparency Fakeout. You see, what happens is basically this: a table consisting of a transparent (see through) image that is sized to fill the table is set as a background image. Since the image that takes up the table is transparent, all the end user sees is the background image. However, when they try to Save it or view its properties, the tables contents (the transparent image) are pushed to the front. So, instead of saving nunzio-tiny.gif, all that was saved was the fakeout clear.gif. Here's the source code that I used:


clear.gif is a 1 pixel by 1 pixel transparent GIF. You would use such a small image to save storage space and download time, as you can resize it to fit the image on the client side, minimizing the size of the image download by the browser onto the users screen. Feel free to use it and abuse it on your site. Adapting the above source to suit your own purposes is not too hard, just change table style="background-image: url(nunzio-tiny.gif);" to instead reference the image that you want to show.

Example: Assuming your image is named "show.jpg" just change the table background image to table style="background-image: url(show.jpg);" and change the existing width="60" and height="60" values to reflect the size of the image you will be using.

Before doing anything that is a reasonable change, it is best to stop and think about things. Don't just do it because you can do it. Do you really mind if someone downloads one to look at or to set as their wallpaper? Personally, I couldn't really care. The thing is, when it starts to get on the net and some AOL d00d is using your corporate logo with an "Eleet WareZ |-|3r3" text box over it to symbolize his collection of broken links, then it gets bad. The type of people that steal images are normally brain deficient anyway, so the TABLE Transparency Fakeout will probably stop them dead in their tracks. By viewing the source code, the path to the image can be found and pasted into the browsers address bar, so the intelligent community can still get to your images.