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” 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>
Akdora's Blog 
Is there possible to add this, when I use a website in WordPress.COM.(where you can edit only the css). My idea is, that it applys to all of the photos on the website, by using one css code. Can this be done?
If someone views the source code of the page, it can still easily be clicked and saved. Aren’t there any better idea to obscure the link that leads to the original image in the “view source code” page?