Thwart
| Thwart | ||
|---|---|---|
| 8 | Gallery Password | Give the keys to only those you know More |
| 9 | Opt Out | Turn on, tune in, drop out More |
| 10 | Hotlinking | Trust no one More |
| 11 | Shield | Shrinkwrap, rollover More |
| 12 | Encrypt | Obfuscate More |
| 13 | Disable Save Image | How do you like them apples? More |
Thwart Copying
Most unauthorized copying is opportunistic, and you can reduce that by making it harder to copy an image than a simple right-click-and-save. Here are some coding tricks to thwart, impede, hinder, discourage and even stymie any nefarious copiers.
None of these approaches is perfect as, ultimately, a displayed image can always be copied somehow, particularly with a screen print. But by making things difficult, you can disuade those that are the easily putoff.
- Disable IE image toolbar
- Disable right-click
- Tile images
- Shrinkwrap
- Hide images on rollover
- Hide the file name
- Encrypt HTML
- Disable print screen
8. Gallery Password
| WHAT | Only permit authorized people to see your images |
| HOW | Place images in a password-protected gallery |
| WHO | Wedding and event photographers |
| PRO | Effective at limiting print use. |
| CON | Requires some discipline. |
Put your images in galleries that can only be viewed with a password that you provide. This way, only the people you authorize can see your high-resolution images. Event and wedding photographers often do this.
Many photography website design sites offer password-protected galleries for security. You can lock pages, or even your entire site, from your gallery settings.
Drawback: Prevents potential customers that you don’t yet know from seeing and admire your work.
Apache Authentication, Authorization and Access Control
9. Opt Out
Prevent Search-Engine Indexing
If you don’t want Google or other sites to show your images in their search results, you can ask them not to.
There are several methods to opt-out:
- Robots.txt
- HTTP header
- Noindex meta tag
- Noarchive meta tag
- Ask search engines to remove your website
- Individual sites
Robots.txt file
Since 1994, there has been a way to instruct well-behaved web spiders not to index certain files and folders. The spider first looks for a file called robots.txt, which is a plain text file on the root (top) directory.
To prevent search engines from cataloging any files with the .jpg extension, and any files in the directory images, add the following code to robots.txt:
User-agent: *
Disallow: /*.jpg$
Disallow: /images/
To remove all images on your site from Google Images:
User-agent: Googlebot-Image
Disallow: /
To block files of a specific file type (for example, .jpg), use the following:
User-agent: *
Disallow: /*.jpg$
Drawback: This only works for self-censoring bots; it does not prevent unscrupulous robots, or people, from accessing your images.
For more information on robots.txt files, see Robotstxt.org.
HTTP header
Similar to the robots.txt approach, the following code can be added to the http header for an object:
X-Robots-Tag: noindex
Drawback: You might not want to mess with http headers; the robots.txt is an easier and possibly safer approach.
Noindex meta tag
The same thing can be done on an individual page, by adding the following meta tag to the <head> section of a HTML page:
<meta name="robots" content="noindex" />
This only works for the text on the page, not any referenced photos or other files.
Noarchive meta tag
For every page that they index, search engines store a copy, called a cache copy or archive. If you don’t want them to store copies of your pages, add the following meta tag to the <head> section of each HTML page:
<meta name="robots" content="noarchive" />
Ask search engines to remove your website
You can ask a site to remove a page from their search index. This is voluntary; a search site can deny your request as they may have a legal right to index what is available on the Internet.
For more information on listing your site with search engines, check out the webmaster tools for:
Individual sites
Some non-search websites also allow you to opt-out:
| <meta name="pinterest" content="nopin" /> |
10. Hotlinking
Bandwidth Theft
This sounds like a fun dating program, but this means bandwidth theft.
People don’t need to save a copy of your image on their server to display it; they can just link to the original image on your server. Now they’re not just showing your photo, they’re also stealing your bandwidth.
Directly linking to another site’s media files is called “hotlinking” or “bandwidth theft.”
| Image link | <img src="image.jpg"> |
| Hotlink | <img src="http://notmysite.com/image.jpg";> |
To prevent hotlinking, you can:
- periodically rename your image files or image directory
- replace a hotlinked image with one that says “Stop hotlinking!”
- in a website control panel such as Cpanel, use “Hotlink Protection”
- add a rewrite rule to your .htaccess file
Prevent hotlinking with a .htaccess file
You can control how other sites access your site by putting rules in the .htaccess file. This is a plain text file on the root (top) directory of an Apache server (it is hidden from normal view due to the period before the file name).
The following code stops hotlinking from most sites and displays a 403 Forbidden error code instead:
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mine\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*\.(jpe?g|jpg|png)$ - [F]
What is happening here?
- Line 1 introduces the rewrite rule
- Line 2 makes an exception for your own site (mine.com)
- Line 3 makes an exception for blank referers (visitors behind a firewall or antivirus program)
- Line 4 blocks any file with the extensions .jpeg, .jpg or .png
(All the weird grammar is a matching language called regex.)
By changing the rewrite rules you can decide what is prohibited. Instead of blocking all sites, you can prevent specific sites from accessing your images.
Drawback: You don’t want to be messing with your .htaccess file unless you know what you’re doing, as a slight typo can have unintended results.
For more information, see:
What is the difference between hotlinking and regular linking?
Hotling bad; regular link good.
A hotlink on a page displays a photo which is hosted on another server. The displaying page gets all the benefit (the eyes, the traffic, the revenue) and the other server gets stuck with the bill (the bandwidth and file storage fees).
A regular link passes the viewer over to the other website to see the photo in the way the photographer wanted it displayed, with the accompanying text and layout. The person who owns the photograph now gets the benefit of its display.
11. Shield
Shrinkwrap
An easy way to thwart copiers is to place an invisible shield over the top of your images. This is called “shrinkwrapping” and can involve using a clear, blank GIF image as a hidden, transparent foreground layer.
Shrinkwrap single images
Instead of using the “src” (source) attribute of an image tag, use “style="background..” and place a clear image in the “src”. For the clear image, you can stretch a single-pixel transparent GIF, use the equivalent data URI, or use nothing and really confuse the viewer.
with a clear GIF
Here we have a clear GIF stretched over the photo as a shield.
<img style="background-image:url('photograph.jpg');" src="clear.gif" width="500" height="250">
with a data URI
Instead of a GIF, you can use a data URI. This one is a 1px x 1px transparent GIF. Note that Internet Explorer 5-7 does not support data URIs.
<img style="background-image:url('photograph.jpg');" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP/ //yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="500" height="250">
with a div
This is the simplest of the three approaches. Instead of using the <img> tag, you use a <div> (division) and place the photo as the background. You have to specify the dimensions, otherwise the div won’t show (it’ll be 0px x 0px). When the viewer does a right-click-save, they get the entire HTML document rather than the image file, which should confuse them.
<div style="background:url('photograph.jpg'); width:500px; height:350px;"></div>
Shrinkwrap all images
You can add shielding elements to all images with one line in CSS. The following code places a blank division over the image. This uses a pseudo element (“:after”) and, to communicate the dimensions, a class.
-->HTML:
<img class="300x200" src="photograph.jpg" alt="" />
CSS:
img.300x200:after{
display:block;
content:"";
position:relative;
top:-200px;
width:300px;
height:200px;
margin-bottom:-200px;
}
Drawbacks: All these approaches require an explicit statement of the photo’s pixel dimensions, otherwise the photo won’t show. The photo’s file location is still stated in the HTML, so, by using View > Source, the image can still be copied directly.
Rollover
This approach is similar to shrinkwrapping but changes the displayed image when the user moves their cursor over it.
Rollover in CSS (all images)
This little piece of code hides all images upon rollover. Place this in the CSS file:
img:hover{visibility:hidden;}
or place this inside the HTML <head> tags:
<style type="text/css">
img:hover{visibility:hidden;}
</style>
Rollover with an event handler (single images)
With the event handler “onmouseover”, you can display a different image upon rollover. This could be a blank image, a copyright notice, or a warning message saying “To license this image..” or “Please don’t copy my images.”
<img src="photograph.jpg" onmouseover="this.src=’notice.jpg’" onmouseout="this.src=’photograph.jpg’"/>
Rollover with JavaScript (all images)
You could write a JavaScript to apply the onmouseover and onmouseout events to all images.
Tile Images
One way to thwart copiers is to break your image file into several different image files, like tiles. These can be displayed as one using HTML code, usually a table.
Drawback: This approach is more of a hardship to you than the copier. Each photo has to be manually cut up and reassembled using HTML code. Meanwhile, the user just has to do a simple screen grab to copy the combined image.
12. Encrypt
Hide the File Name
One problem with shrinkwrapping is that users can still find your image with View > Source. You can thwart this by hiding the image file location from the HTML file. There are various possibilities.
Hide file name in CSS
You can place the image file location in your CSS files, by passing a code for the photo and using the “background” attribute:
HTML:
<div class="picture1"></div>
CSS:
div.picture1{
background:url("..");
width:300px;
height:200px;
}
A user can still see the location by pulling up your CSS file, or using developer tools, but that requires a little more work.
Hide file name in JavaScript
Another approach is to use JavaScript to add a key piece of text. For example, a JavaScript could replace every instance of <img src="abc.." /> with <img src="def.." />, where abc is a fake location header or folder and def is the real one.
This requires someone to dig through your .js file, which is more work than a CSS file. I use a similar approach on my home page, not to protect my images but to reduce my page load time, by minimizing the number of images required for the initial page to load.
The obvious drawback of this approach is that it requires JavaScript to be operational for the images to display.
Hide file name in Flash
One way to hide the file name is to encase your images in an Adobe Flash file. Instead of seeing the .jpg file name, the user will see a .swf (ShockWave File) file name that is used as a wrapper. You can wrap several photos together as a nice slideshow.
Drawback: Flash can be blocked in desktop browsers, and is not supported on Apple iOS devices such as the iPhone and iPad. In 2010, Apple’s then-CEO Steve Jobs famously declared that “Flash is no longer necessary to watch video or consume any kind of web content” and that “new open standards created in the mobile era, such as HTML5, will win.”
Encrypt HTML
The truly paranoid, who are worried about people using “View > Source”, can encrypt their HTML.
Encrypt with HTML entity codes
A simple way is to disguise your image tags by replacing text with HTML entity codes.
| HTML entity codes | ||
|---|---|---|
| ASCII Character | HTML entity code | Description |
|   | space | |
| " | " | double quotes |
| . | . | period |
| / | / | backslash |
| : | : | colon |
| < | < | less-than sign |
| = | = | equal sign |
| > | > | greater-than sign |
| c | c | c |
| g | g | g |
| i | i | i |
| j | j | j |
| m | m | m |
| p | p | p |
| r | r | r |
| s | s | s |
| Source | ||
| Replace | with |
|---|---|
| <img src=" | <img src=" |
| .jpg" | .jpg" |
| alt="" /> | alt="" /> |
So that:
<img src="filename.jpg" alt="" />
becomes:
<img src="filename.jpg" alt="" />
Encrypt into JavaScript
In a similar way, you can encrypt your entire page into character codes by using a JavaScript.
- HTML encrypt a paid script ($9 license) for multiple file and sub-folder encryption.
- HTML Guard encrypt your HTML ($35 for Windows)
13. Disable Save Image
Disable Image toolbar on IE
There are two ways to do this. The easiest is to place this meta tag in the <head> section of your HTML page:
<meta http-equiv="imagetoolbar" content="no" />
If you want to disable only certain images, use this on your image tags:
<img src=".." galleryimg="non" />
Disable Right Click
This is a controversial approach. It removes some control from the user’s browser and many coders find that unethical and annoying. However, you have the right to control how your photos and website pages are viewed.
The “right click” is the ability of a user to bring up a menu of options by highlighting an element (such as a photo) and clicking on the right mouse button. One of these options is usually “Save Image As..” which allows a user to copy your photo to the desktop, whereupon they can use it however they choose. You can’t remove the “Save Image As..” option from the menu, but you can disable the entire right-click menu. Here are some code snippets.
Disable right-click on single images
A simple and non-javascript way to disable the right-click menu on an image is to use an event handler with the image tag:
<img src=".." oncontextmenu="return false;" />
Example:
Here’s the code:
<div oncontextmenu="return false">No right-click here</div>
Since this is an event handler, it is client-side and requires the browser to honor the request. But it doesn’t require JavaScript, which can be an issue for some uses.
Disable right-click on all images
There are JavaScripts which can target just the image tags, but they are a little complicated.
Disable right-click on the entire page
A simple JavaScript can disable all right-clicks on a page.
This line in the <body> tag of your HTML page can do the trick:
<body onload="init_start();" oncontextmenu="return false;">
Alternatively, you can add a custom JavaScript to the <head> section of your HTML page, or in a separate file which is called upon loading. Here’s an example;
<script type="text/javascript">
var message = "Right-click is disabled.";
function rightclick(keyp){
if (navigator.appName == "Netscape" && keyp.which == 3)
{ alert(message); return false; }
if (navigator.appVersion.indexOf("MSIE") != -1
&& event.button == 2)
{ alert(message); return false; } }
document.onmousedown = rightclick;
</script>
DynamicDrive offers a cross browser DHTML script that will prevent the default right menu from popping up when the right mouse is clicked on the web page. Use it to stop surfers from easily saving your web page, viewing its source, or lifting images off your site.
Drawbacks: Many people do not like JavaScripts which disable right-clicks across an entire page. The scripts can be annoying as they stop useful right-clicks such as for:
- dictionary lookup
- bookmarking
- text-to-speech
- previous page
Also, because they are client-side, the scripts don’t work if the user has JavaScript disabled, or if the browser is uncooperative. And a simple “View > Source” will reveal the image address anyway.
Comments
Reply by Account-soulk
December 28, 2019
Aged Twitter 2009 to 2015 Accounts For Sale - check new thread for new prices
The accounts are empty or with less than 50 followers.
2008 - 10$ Per Account
2009 - 9$ Per Account
2010 - 8$ Per Account
2011 - 7$ Per Account
2012 - 6$ Per Account
2013 - 5$ Per Account
2014 - 4$ Per Account
2015 - 3$ Per Account
with Format
Username:Password Twitter:Live Email:Password Email,
joindate,tweets,following,followers and likes.
Buy for testing accept! pls check with me before you buy
You Can Contact me via
Email - congmmo @ gmail . com
Discord : CongMMO#9766
Skype & Telegram : congmmo
ICQ : @652720497
Msg me on discord or skype for faster response.
Payments accepted PayPal,Payoneer or ETH,ETC,LTC or Another Crypto.
(Extra 5% transaction fee)
I will provide Username:Password Twitter:Live Email:Password Email of the account.
Accounts are delivered instant after paying.
Please don’t waste my time if u r not buying
Thank you!
Reply by Wist
December 4, 2013
Thanks so very much! I know next to nothing about code. but now I know that there are some approaches to consider to minimize copying of my images.
Reply by
November 16, 2013
Hi Mike, thanks for your help. Could u please help me to disable copying text from ipads, iphones.. Where right-click is not necessary
Thanks again
Reply by Andrew Hudson, PhotoSecrets
January 6, 2014
Hi.
You could place a transparent block (division) over the top. The coding could be:
HTML:
<div class="thwart"></div>
CSS:
.thwart{
display:block;
position:absolute;
width: (whatever the width of the text block is)
height: (whatever the height of the text block is, which, if not explicitly defined, might have to be added in JavaScript)
}
Reply by Ludivina Holt
November 10, 2013
i will add a link to thia blog, from mine, if you dont mind, please reply, thanks
Reply by Andrew Hudson, PhotoSecrets
January 6, 2014
Thanks Ludivina.
Reply by Mike
January 15, 2013
thank you for sharing this great write-up and collection of the various techniques.
you are a good person!
lotsa karma to you from this!