Akdora’s Blog

Programming, Oracle, Life, Fun

HTML Image Saving Protection (Save Image As >> Point.gif) April 15, 2011

Filed under: CSS — Akdora @ 11:04 am
Tags: ,

If you have a web page with full of your copyrighted photos and do not want to visitors to save images in (easy way!) to their local computers. Let me show a trick about it.

In the photo (img) section of the page, we have always something like as following;

     <img id="myImg"
      src="http://www.google.com.tr/logoyapsana/images/templates/google_logo_01.gif"
      width="667" height="472"
      style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;">
      </img>

On the image, when we right-click to the mouse and click to “Save Image As” command, we can save the image to our local disk. However, if we create a basic css style with a div below of the image, we can prevent this.

The important thing is in here: blank/point image’s dimensions has to be same with original image dimensions and css class of the component should include the following properties.

.BlankPixel { 
     position: absolute; 
     top: 0;
     left: 0; 
}
<div id="Photo">					
      <img id="myImg"
      src="http://www.google.com.tr/logoyapsana/images/templates/google_logo_01.gif"
      width="667" height="472"
      style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;">
      </img> 
	</div>
       <div class="BlankPixel"><a href="#"><img src="https://akdora.files.wordpress.com/2011/04/point.gif" width="667" height="472"></a></div>

That’s it. This trick is an only basic measure for basic internet users. If someone want to save the photo, since the resource is downloaded to your computer to show up on the screen. It can be saved in any way.

Here is the full html example:
Copy the code and create a html page called “a.html” and open it. Try to save Google logo and see what happens ­čÖé A file dialog box will ask you a location to save “https://akdora.files.wordpress.com/2011/04/point.gif&#8221; file! Not Google Logo!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>My Title</title>
    <style type="text/css">
	.BlankPixel { 
		position: absolute; 
		top: 0;
		left: 0; 
	}
	</style>
  </head>
  <body>
    <div id="Photo" class="Photo">					
      <img id="myImg"
      src="http://www.google.com.tr/logoyapsana/images/templates/google_logo_01.gif"
      width="667" height="472"
      style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;">
      </img> 
	</div>
	<div class="BlankPixel"><a href="#"><img src="https://akdora.files.wordpress.com/2011/04/point.gif" width="667" height="472"></a></div>
  </body>
</html>