8Gallery PasswordGive the keys to only those you know More
9Opt OutTurn on, tune in, drop out More
10HotlinkingTrust no one More
11ShieldShrinkwrap, rollover More
12EncryptObfuscate More
13Disable Save ImageHow do you like them apples? More

Thwart Copying

By Andrew Hudson Published: May 25, 2012 Updated: October 20, 2016

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.

  1. Disable IE image toolbar
  2. Disable right-click
    1. for single images
    2. for all images
    3. for the entire page
  3. Tile images
  4. Shrinkwrap
    1. in HTML
    2. in CSS
  5. Hide images on rollover
    1. with CSS
    2. with JavaScript
  6. Hide the file name
    1. in CSS with background images
    2. in dummy text with JavaScript
    3. in Flash
  7. Encrypt HTML
    1. with HTML entity codes
    2. into JavaScript
  8. Disable print screen

8. Gallery Password

WHATOnly permit authorized people to see your images
HOWPlace images in a password-protected gallery
WHOWedding and event photographers
PROEffective at limiting print use.
CONRequires 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:

  1. Robots.txt
  2. HTTP header
  3. Noindex meta tag
  4. Noarchive meta tag
  5. Ask search engines to remove your website
  6. 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

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:

Pinterest<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="";>

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 (
  • 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


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.


<img class="300x200" src="photograph.jpg" alt="" />


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.


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:


or place this inside the HTML <head> tags:

<style type="text/css">

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:

<div class="picture1"></div>


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
"&#34;double quotes
<&#60;less-than sign
=&#61;equal sign
>&#62;greater-than sign
<img src="&#60;&#105;&#109;&#103;&#32;&#115;&#114;&#99;&#61;&#34;
alt="" />&#97;&#108;&#116;&#61;&#34;&#34;&#32;&#47;&#62;

So that:

<img src="filename.jpg" alt="" />


&#60;&#105;&#109;&#103; &#115;&#114;&#99;&#61;&#34;filename&#46;&#106;&#112;&#103;&#34; &#97;&#108;&#116;&#61;&#34;&#34;&#32;&#47;&#62;

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;" />


The context menu displays when you right-click in this box..
..but the context menu never displays when you right-click in this box.

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;

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.



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


You could place a transparent block (division) over the top. The coding could be:


<div class="thwart"></div>





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!

Add Your Comment



Email (optional):

Submit your comment: