Protect online images
Recently we were thinking of making an website for our marriage. Me and Wife were worried only one thing that, what if the photos are copied and can be used in wrong way?. We were worried due to this. But now i found one solution which could overcome this issue.
Here is the example:
Save the following image using the right click
Here’s how you may implement something similar for your own images:
The standard embed code for an image looks something like this:
<img src="photograph.jpg" width="500" height="250">
What you need to do is change the value of the src attribute to point to a blank image and then add a new style attribute to render the actual image. Also make sure that the value of the height and the width parameters are exactly the same as the actual image.
<img style="background-image:url(photograph.jpg);" src="data:image/gif;base64, R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width="500" height="250">
This is like overlaying a completely transparent screen over your photograph and anyone trying to save the image will end up downloading that screen instead of the image.
Obviously, there are simple workarounds to get around the above method. For instance, a copy of the full image will still be available in your browser’s cache. You may look at the HTML source or may even save the image using screen capture but again, these techniques may not always be known to the non-technical users of your website.
Here is the example:
Save the following image using the right click
Here’s how you may implement something similar for your own images:
The standard embed code for an image looks something like this:
<img src="photograph.jpg" width="500" height="250">
What you need to do is change the value of the src attribute to point to a blank image and then add a new style attribute to render the actual image. Also make sure that the value of the height and the width parameters are exactly the same as the actual image.
<img style="background-image:url(photograph.jpg);" src="data:image/gif;base64, R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width="500" height="250">
This is like overlaying a completely transparent screen over your photograph and anyone trying to save the image will end up downloading that screen instead of the image.
Obviously, there are simple workarounds to get around the above method. For instance, a copy of the full image will still be available in your browser’s cache. You may look at the HTML source or may even save the image using screen capture but again, these techniques may not always be known to the non-technical users of your website.
Cheers!!
No comments: