Hacking Hockney Images |

As a photographer and Web Designer/Developer the most frequent question I am asked “is how can I protect my pictures from being stolen?” The question recently arose again when I showed a client the David Hockney website and thus encountered its somewhat forbidding entrance way:

Immediately the client said “That is exactly what I want to put on my website!” For photographers and web developers a nagging concern is how to protect their pictures from being pilfered and pirated for by others. Now to protect myself I will cite 5 reputable sources on what can be done about protecting images displayed on a website:

Greg Cope at Nature Focused states bluntly – “Put plain and simple: the only way to protect your images from being downloaded or stolen off a web page is to not put them online in the first place.”
Skinny Artist says – “After scouring the web, it turns out the only 100% foolproof method of protecting our work from these thievin’ bastards is to avoid putting your stuff on the internet in the first place.”
Tara Hornor at TutsPlus – “As a photographer, one of your biggest concerns with putting your work online is probably that it can be stolen so easily. No matter how well you try to protect your intellectual property (IP), once it is on someone’s screen, there’s not much you can do if they’re serious about stealing“.
Carolyn Wright at Lynda.com = “Taking photos is fun—but sharing them over the Internet is what photography is all about these days. Unfortunately some people want to share your photos more than you’d like them to. ”
Jeff Chandler at WPTavern – “Although copy protection plugins or copy protection in general prevents the average website visitor from being able to steal content, they come with a lot of unnecessary baggage. In essence, they do more harm than good, especially from an accessibility stand point, as common keyboard shortcuts are disabled. If you don’t want to have your content stolen online, don’t publish it.”

As you can see there is a consistent pattern here – if you don’t want something stolen the collective recommendation is “don’t make it publicly available on the Web” But surely in 2015 there must be some effective methods to curb if not outright curtail photo piracy. But to solve this “damned if you; damned if you don’t” problem lets take a look at how images get stolen and then some potential remedies.

Methods of Photo Pirating

At first there seems to be dozens of ways to pirate photos. And in some cases vendors may want copy/pirating – the more copying the better especially when promoting a product or service. But in too many cases pirating is just exploitation and often from afar.

The number one problem is that pirating of images is greatly enabled by all of the major browsers. Take the right mouse click. Use it on any website image and users get a Save Image As command that facilitates the download of your image by any user of your website. Unfortunately, there are a lot more pilfering permissions made available by most browser. The following table introduces increasingly effective pirate methods and their deterrents.

Image Stealing and Deterrence
Pirating Method	Potential Deterrents
Keyboard Copy & Paste commands in browsers allow easy copy of text and/or images	JavaScript to trap keypress or keydown events Add the following code to your < head > block. This provides the template for which keypresses you want to trap and turn away.[html] <script language=”javascript”> document.onkeydown = overrideKeyboardEvent; document.onkeyup = overrideKeyboardEvent; var keyIsDown = {}; function overrideKeyboardEvent(e){ switch(e.type){ case “keydown”: if(!keyIsDown[e.keyCode]){ keyIsDown[e.keyCode] = true; // do key down stuff here } break; case “keyup”: delete(keyIsDown[e.keyCode]); // do key up stuff here break; } disabledEventPropagation(e); e.preventDefault(); return false; } function disabledEventPropagation(e){ if(e){ if(e.stopPropagation){ e.stopPropagation(); }else if(window.event){ window.event.cancelBubble = true; } } </script> [/html] Note this may disable legitimate uses of CTL+C and other keyclicks in other blocks of HTML code. Be careful! . Downside: Some legitimate usability may be lost.
Right Mouse Click[Ctrl+click on Mac] + Save Image as popup expedites stealing images.	JavaScript to disable right mouse click Add the following code to your < head > block[html] <script language=”javascript”> document.onmousedown=disableclick; status=”Right Click Disabled”; Function disableclick(event) { if(event.button==2) { alert(status); return false; } } </script> [/html] Note this disables legitimate right mouse click events as well as image theft ones. Downside: again legit options are blocked too.
Drag and drop image to desktop or file browser	CSS change on images draggable=’false’
Print Screen image capture	JavaScript to disable PrintScreen or Word Press plugin Downside: Easily defeated by screen image capture as described below.
Print Screen Image and other methods of screen image capture are very simple and yet very hard to defeat. PrintScreen disablers wipe out so many regular browser and OS commands they can become too punitive to use . But the other screen image capture methods are equally hard to deter. For example using a screen grabber like Snagit or taking a picture of the screen with a high resolution digital camera are nearly impossible to defend against. The Hockney opening page image [see above] was captured using Snagit. In sum, screen image capture is cause for most severe vulnerability of Web pictures. See below for some methods of deterring but not completely defeating image capture thieves.
Get image from Browser cache or source code	Close RSS Feed combined with Click to see CSS Substitution Protection CSS class will make the Pillow pic non-downloadable. The pic123.png matches the exact dimensions as the pillow.jpg. [php] <style> cssimage { /* This code hides the image in a protected directory / background-image: url(“https://photofinishes.ca/images/pillow.jpg”); } </style> <script language=”javascript”> / This script disables right mouse click – reducing usability but protecting images / document.onmousedown=disableclick; status=”Images ©copyright JBSurveyer, all rights reserved”; function disableclick(event) { if(event.button==2){ alert(status); return false; } } </script> [/php] Downsides:* Usability decrease and greatly increased development time
Get image file address from browser’s Inspector or Sourcecode dump	htaccess Cutoff , disable right mouse click and the above CSS Substitution method Downsides: Greatly increased development time, website usability suffers
Suppress use of RSS Feed	Click to see how to cancel RSS Feed Add the following code to your theme’s function.php file:[php] function fb_disable_feed() { wp_die( __(‘No feeds are available on Tester WP42,please visit our <a href=”‘. get_bloginfo(‘url’) .'”>homepage</a>!’) ); } add_action(‘do_feed’, ‘fb_disable_feed’, 1); add_action(‘do_feed_rdf’, ‘fb_disable_feed’, 1); add_action(‘do_feed_rss’, ‘fb_disable_feed’, 1); add_action(‘do_feed_rss2’, ‘fb_disable_feed’, 1); add_action(‘do_feed_atom’, ‘fb_disable_feed’, 1); add_action(‘do_feed_rss2_comments’, ‘fb_disable_feed’, 1); add_action(‘do_feed_atom_comments’, ‘fb_disable_feed’, 1); [/php] Also be sure to remove RSS and Meta widgets from any sidebars as they will no longer work.
Use image address for pirating	.htaccess file lock can limit access to images in a protected directory Add the following code to the .htaccess file that protects the directories where your images are stored. If there is not a .htaccess file in the directory create one containing these commands:[php] SetEnvIfNoCase Referer “^http://www.your-domain-name-here.com/” locally_linked=1 SetEnvIfNoCase Referer “^http://www.your-domain-name-here.com$” locally_linked=1 SetEnvIfNoCase Referer “^http://your-domain-name-here.com/” locally_linked=1 SetEnvIfNoCase Referer “^http://your-domain-name-here.com$” locally_linked=1 SetEnvIfNoCase Referer “^$” locally_linked=1 <FilesMatch “\.(gif\|png\|jpe?g)$”> Order Allow,Deny Allow from env=locally_linked </FilesMatch> [/php] If there already is a .htaccess file, just append the above lines.
Users are not aware images are protected and proprietary.	Remind them with watermarks and warning messages. Unfortunately, most visible watermarks are intrusive and can be defeated by top photo editors.

WordPress Plugins for Image Protection

WordPress has a number of plugins for image and general copy protections. the following table summarizes their use and effectiveness.

WordPress Plugins for Image and Copy protection
Use	WordPress Plugin	Use and Effectiveness
Transparent layer over image protects original image from download	PhotoProtect	Plugin works for some but not all images- e.g images used in sliders or grids
Disable Ctrl+ commands, right mouse click, draggable, Prtscreen	FCP, WPCDP, WPCCP,	Plugin works easily for all page, posts, widgets and custom post types but no selectivity to choose specific pages or posts.
Disable Ctrl+ commands, right mouse click, draggable	WPCCPNRC	Same functionality as above except it does not prevent PrtScreen attack. But does provide easily managed selectivity on HomePage, Pages, Posts, Links, Text, Textareas, Text Fields, and Headlines
Disables Ctrl+ commands, right mouse click	Content Protect. CCP	Plugin works easily for all page, posts, widgets and custom post types but no Prtscreen nor draggable protection or selectivity of pages/posts/widgets to apply protection to.
Disable unauthorized iframe use of your website page/post	WP noFrames for Copy Protection	Plugin did not block either localhost or hosted WordPress page plagiarism by means of Vitaly’s iframe plugin
Demo only which simply did not work	Secure Image protection	Read what “success” others had with this plugin
Apply watermark on upload & Media bulk edits	Image Watermark, Easy Watermark	Watermark is applied in bulk but not browser upload; does not apply to Nextgen Gallery images.Extensive watermark sizing, position, and opacity controls.Disables right mouse click and image draggable property.. Easy Watermark worked erratically some ops good; others nogo??