The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

Web Graphics - Photo Security Screen

This page has been tested and conforms to WCAG 2.0 Accessibility Guidelines
Protected Photograph Unprotected Photograph

Protecting Your Pics ...

You want to publish your photographs, graphic designs or other images on the Web but you do not want freeloaders downloading your intellectual Copyright. Placing your images behind an invisible screen is one of the methods that can help to prevent users from downloading your pictures and this page shows you how. Protect your intellectual Copyright by learning how to place a security screen in front of your web images to help prevent users from saving your images to their hard-drive.

Trickery-Pokery ...

And here we have it, a tale of two clowns. The clown on the left is smiling because he knows that we can't get him very easily while the clown on the right knows that we can get him whenever we want. If you are using a pre v4 browser then you probable can't see the clown on the left at all. Time to upgrade your browser perhaps?  If you are using a v4+ browser and you use your mouse's right-click button and select 'Properties' to check each of the photograph's details you will see that both photographs measure 125 pixels wide by 250 pixels high but that the file size of the photograph on the left is 43 bytes whilst the file size of the photograph on the right is 5,440 bytes. If you then right-click on each photograph and use your browser's 'Save Picture As' option to save both the photographs to your hard-drive, you will find that you will save the photograph of the clown on the right OK but that the clown on the left has good reason to smile because all you will get is an empty file.

An Empty File?

Perhaps the term 'empty file' is a little misleading and although it is a valid image file it will certainly appear to be an empty file if you try to display it on a web page. It is in fact a transparent, single-pixel GIF file which means that it only has one pixel which you can't see anyway because it is transparent. The fact that it only contains one pixel explains why you can have a valid image file that is only 43 bytes long.

Single-pixel GIF files have been known to professional web developers for a long time but their magical qualities are little known or understood outside this elite circle. You do not see them used very often on the current generation of Web sites.

There is a little understood feature of the HTML IMG  tag that will automatically stretch or shrink an image to make the image fit the sizes stipulated in the width and height attributes of the IMG  tag. In the case of our example we have stipulated an image size of 125 pixels wide by 250 pixels high and as we have only specified a single pixel file the browser changes the image from a single pixel transparent image into an image containing 31,250 identical transparent pixels (125 * 250).

the HTML Markup to create the invisible screen ...

<img src="pixClear.gif" alt="Clown One" border="0" width="125" height="250">

This means that the picture on the left is a transparent screen, not a picture of a smiling clown and we are in fact looking through the transparent screen and seeing whatever has been placed behind the transparent screen, in this case the smiling clown. I will bet that it fooled you because there really is no difference in the image quality or the appearance of the photograph of the smiling clown. The reality is that the browser doesn't render transparent pixels at all, it simply renders the pixels that appear behind the transparent pixels.

So Where Is The Clown?

The answer to this question lies in understanding how HTML Markup and/or CSS Styles work. HTML enables you to display text and images on a web page and both HTML and CSS allow you to specify a background image that will be displayed behind the main display.

The HTML Method

this will work in most v4+ browsers but the HTML method is now depreciated ...

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="clown-one.jpg" width="125" height="250">
<img src="pixClear.gif" alt="Clown One" border="0" width="125" height="250">
</td>
</tr>
</table>

The CSS Method

the simplest CSS method ...

<img src="pixClear.gif" alt="Clown One" width="125" height="250" style="background-image:url('clown-one.jpg')">
Clown One

a more complex CSS method ...

If you are really serious about trying to protect your images then you would not leave the styles information and URL of the clown image as an inline style of the IMG Tag because your more astute users would simply view the source Markup of the page and find the address of the 'clown-one.jpg' file by reading the style attribute in the IMG Tag.

Instead, you can really start to confuse the vast majority of your users (and perhaps even yourself until you fully understand the principle) by creating a seperate style to display the clown as a background and then placing the style in a seperate external or imported style sheet. I have provided an example style that I would use for this purpose which you should study carefully. Incidentally, the only reason that I have included the mid-gray 'background-color' is so that you can see if the style is connecting to the IMG Tag before you you start addressing the issues surrounding the location of the 'clown-one.jpg' file.

example styles to be saved as an external style sheet called 'clown-demo.css' ...

img {
border:none;
}
 
#clownBack {
width:125px;
height:250px;
background-image:url("clown-one.jpg");
background-repeat:no-repeat;
border:2px outset #D8D8D8;
background-color:#999999;
}

example IMG Tag that would connect to the '#clownBack' style ...

<img src="pixClear.gif" alt="Clown One" width="125" height="250" id="clownBack">

example LINK Tag that would load the CSS external style sheet ...

<link rel="stylesheet" type="text/css" href="clown-demo.css">

These examples all presume that the web page, images and external style sheet are all located in the same directory on your hard-drive or web server.

 

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - Photograph Security Screen You want to publish your pictures but do not want users grabbing them. Placing them behind an invisible screen is one way that can help to prevent users from getting them and this page shows you how.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
 
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
 
Post your link NOW!
 
 
Protecting Images Links
 
 
 
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England