People visiting your site can easily download or copy your copyrighted images without your permission using four different methods: hotlinkingright clickingscreen shots, and web archiving.

What follows is a description of each method including:

  • counter measures for inhibiting unauthorized copying
  • methods for circumventing the counter measures
  • potential incompatibilities / issues of implementing a counter measure
  • some of the system requirements for each counter measure.

Hotlinking

Description
Hot Linking is when someone sets the SRC attribute of an IMG tag to an image on your web site. Besides making it look like your images are on their web page, they also consume some of your allotted bandwidth.The following is an example of the HTML one would use to display an image from susansexton.com on their own web site.

<img src="http://www.susansexton.com/images/horse1.jpg" alt="" />

Counter Measures
Limit display of images to users who are visiting your site (your domain). This is accomplished by implementing two server-side technologies: Sessions and custom File Handler rules.

Sessions
When a user first visits your site, they are sent a cookie that uniquely identifies them. Before each image is sent to the browser, the system checks to see if the cookie has been set. If it has, the image is sent. If it hasn’t, no image is sent. This method requires users to view your images in the context of a web page on the first visit. From that point on, they can, theoretically, access the images directly by entering the image’s SRC attribute in their browser’s Location bar.
Custom File Handler Rules
This method can be modified so that images can only be viewed in the context of a web page. This is accomplished by telling the web server to handle image files using a custom script. The custom script looks for a unique key in the Session variable. If the key exists, the image is served. If not, it’s not.In practice, we set the key at the start of the page. The server then sends the image and destroys the key immediately after the image has been sent. If the key doesn’t exist, the images cannot be viewed and thus, cannot be viewed except in the context of a web page. This is accomplished in Apache by adding the following two lines to .htacces (for the directory you wish to protect):
Action blockhotlinking /hotlinkcheck.php
AddHandler blockhotlinking .jpg .jpeg

where hotlinkcheck.php is a PHP script that does what we’ve described.

Any anti-hotlinking counter measure incorporating both of these techniques will be very successful.

Circumvention Techniques
This technique can be circumvented by hacking the server, which is not the kind of activity people seeking to copy pictures are likely to engage in. This technique may also be circumvented by Web Archiving programs, but in our experience, if the script is written correctly, even these programs can be prevented from siphoning the images.
Potential Incompatibilites/Issues
Such a system makes designing the pages difficult because all images are “generated” on the fly and thus, cannot be viewed in the standard WYSIWYG HTML design program (such as Dreamweaver of GoLive). This system can be used, however, with automated image gallery creation tools such as iView Media Pro. Click here for more information. Also, users who don’t accept cookies will experience problems too. In fact, people with hotmail.com email accounts frequently experience problems since by default, Internet Explorer for Windows doesn’t allow framed documents from another domain to send cookies. The work-around is to include some JavaScript that breaks your site out of frames (keeps your site from being framed by someone else).

System Requirements

Server-side
 Any server that can be configured to handle image files using a custom script or with some sort of server-side scripting capabilities.This system does not require the GD library but could benefit from having it available.
Client-side
Cookies are used by default, but the system can be configured to use a transparent ID in cases where cookies are not allowed.

Right Clicking

Description
Users can right click on an image and choose to save it on their computer. This is the same as dragging the image to the desktop.
Counter Measures
There are four counter measures that can be used to inhibit right clicking or dragging and dropping of images: Spacer w/ Background Image, JavaScript Hide Source, Microsoft Meta Tag, and A Thousand Images. These counter measures can be used together or separately as they each address a different aspect of the right click feature.

Spacer w/Background Image
This is my personal favorite technique because it is widely supported, does not require any special JavaScript, fools most attempts at copying the image, can be used in a WYSIWYG HTML editor, and when used in conjunction with the hotlinking counter measures, is nearly foolproof. Basically, each image is displayed as a transparent GIF whose size and background image is set to the image you want to display. The result is that the user sees the image as she normally would, but when she tries to right click to save the image, she ends up saving the clear GIF rather than the actual image.
JavaScript Hide Source
Using JavaScript, the functionality of the right mouse button can be altered to prohibit downloading of images. It can also be used to hide the source code of a page so that the user can not navigate directly to the image outside the context of the actualy page. Because this is a very complicated topic, no examples of how to do this are provided here. Regardless, here are a couple of links in case you’re interested: hide source code and disable right click.
Microsoft Meta Tag
This doesn’t really disable right clicking, but it does disable the Microsft “Image Bar” that appears when Internet Explorer (version 6) users hover their mouse over an image. Simply put this code in the HEAD element of your web pages:
A Thousand Images
Adobe ImageReady (the web companion to Photoshop) allows you to slice images up into little pieces. You could slice each image up into individual pixels making it very time consuming to download each pixel and recreate the image. This may be more practical than it seems…
Circumvention Techniques
To view the source of a page that is using JavaScript to hide the source, you can either enter this into the location bar and press Enter: java script: alert ( document.body.innerHTML ); or you could visit the site with Mozilla and use the DOM Browser to view the source code as a Document Object Model tree (and thus see the SRC attribute of the image you are after) to get at the image directly.To view an image that is being protected by an invisible GIF (the first method on this page), just look at the source and point your browser to the actual image you wish to download (and the image will appear in isolation in its own window).There is no way, that I’m aware of, to circumvent the capturing of an image that’s been split into a thousand pieces, except downloading them one by one.
Potential Incompatibilites/Issues
Incompatible JavaScript versions: It is very, very difficult to write JavaScript code that works the same on all browsers and platforms. In all likelihood, any script you find or write yourself, will fail in one environment or another. Incompatible CSS/browser: Not all browsers will know how to display background images. Failure to do so means the users won’t see your image.
System Requirements
In any situation where JavaScript is required, you must include the tags with some sort of content that explains why JavaScript is needed.Similarly, you may need to test wheter or not Cascading Style Sheets in enabled before displaying your page, if you want to be sure that your visitors see what you intend.

Screen Shots

Description
The user presses PrtScr (Print Screen) on Windows or Command+Shift+3 (or 4) to capture the computer display as a separate image. On Windows systems, the screen is on the clipboard and needs to be pasted into an application before it can be viewed. On the Macintosh, the screen is saved as a file on the user’s desktop, usually named Picture 1.pdf.There are a variety of system utilities that also provide this functionality and it is important for people reading this to understand that it is very valuable to be able to take a picture of your screen and share it with someone else.
Counter Measures
Counter measures for this method are virtually impossible. This is because web pages have very limited access to controlling, or even being cognizent of when certain keys are pressed. You could, conceivably, swap the image out for a blank image whenever a key is pressed. Because this counter measure relies on JavaScript, you have to content with everything that entails (browser compatibility, noscript fallback tags, etc.)
Circumvention Techniques
Even if you could disable all keys and mouse activity, the visitor could write a script that opens their browser, goes to your page, and executes a screen shot, all without touching any of the keys or the mouse. This seems extreme, but it hints at the limited capabilities of browsers to control what their owners do.
Potential Incompatibilites/Issues
JavaScript implementations across browsers and platforms.
System Requirements
In any situation where JavaScript is required, you must include the tags with some sort of content that explains why JavaScript is needed.

Web Archiving

Description
Users save the page as a Web Archive (a self-contained version of the entire page, including all images) or print the page (or save it as a PDF).
Counter Measures
Same as Screen Shots, but even more limited; display image in modal window using a Java applet or Flash.
Circumvention Techniques
It depends on what kind of counter measure is used, but usually, taking a screen shot can circumvent them.
Potential Incompatibilites/Issues
Many people like to use Flash as the “player” for their images because it protects their images rather well (by disabling many of the methods, except for screen shots, listed on this page). For the most part, Flash is widely suppported (available on most computers). For people who use Java or who don’t have the Flash player installed, however, it can mean that they don’t see anything at all.
System Requirements
Depends on the method…

Originally Published around January 2002. I currently use Panther, Tiger, Leopard, Snow Leopard, Lion, Mountain Lion (and eventually Mavericks when a suitable update comes out) and am very happy with it (although I still miss one or two things in the OS 9 Finder).

Like many of you, I recently purchased a new Macintosh and was eager to start working in OS X for a variety of reasons.

Currently, I am a full-time Web Developer, but I didn’t start out as one. In fact, prior to buying my first computer (a Mac LC) in 1991 I knew almost nothing about computers. However, like many of you, I recognized the genius in the Finder (and a GUI file system in general). When comparing the Macintosh Finder to the Windows File Manager, the choice was obvious.

In the late 90s, when I learned that Apple was moving to a genuine Unix OS, I was THRILLED. “Finally”, I thought, “I will no longer be a second-class citizen in the development world! I will now have access to all of the professional development tools so many of my peers take for granted. God bless you, Apple!”

I’ve been using OS X exclusively now for the past eight months. I’ve seen it go from 10.0.4 through 10.1.5 and have appreciated the improvements provided in each of the updates (although the 10.1.4 update proved a little more problematic for me personally, than previous updates).

For a variety of reasons, primarily the announcement of Jaguar and what its new “features” will be, I’ve been thinking about my experience with this new Finder and the Aqua “interface”. In general, I have to say, I don’t like it. I don’t find it to be as easy to use as the most recent incarnations of the Finder in OS 9 and am not completely convinced buying this TiBook was really the right thing to do. For those of you who are curious, I’ve summarized my feelings about this new Finder (in general) in this article.

If you feel compelled to email me, you can send me email to any address at tedmasterweb.com and it will reach me. I’ll let you be creative with the username you choose.

Apple, if you’re listening, please consider bringing back those aspects of the Finder many of us have come to depend on. I’m afraid the withdrawal is more than we can handle, and given a choice, we may not choose Apple the next time around.

Things I hate about the Finder (and other system-level options) in OS X

Windows

The Situation: Multiple applications are open and running with multiple documents open and other palettes and windows are visible.

Problem: Clicking one of the windows in the background brings only that window to the foreground (makes only that window active) and allows the windows that were open in the original application to overlap the windows that are open in the application that is now the active application. (see screen shot)

Why This Is A Problem: If I have more than one window open at a time it is almost certainly because I need to see them all at once in order to be able to do my work. Making only the window that was clicked active rather than all the windows for the parent application seems almost counter-intuitive and always results in having to either click the application in the “dock” or select the windows from the Window menu. Regardless, it’s an extra click or three I never had to do before.

This was not how things worked in OS 7-9 (and OS 6 + Multi-Finder) and this is not about learning to work different(ly). Do I like being able to close windows that are in the background that I no longer need without bringing them to the front first? Yes, I do. It is a nice convenience, usually. Do I like the fact that inadvertently executing a command when trying to bring a window that is in the background to the foreground is possible? No, I don’t, at all! In fact, I hate it, that’s why it’s on this list.

The reason a window is in the background (and not closed altogether) is because I wanted to stop working on it temporarily while I did something else in another application. I don’t want anything to change while working in another application. If clicking the window to make it active also executes a command, well, without knowing exactly what context the command is being executed in, that can be a very dangerous thing indeed.

Updated 10/22/2002: Saw this mentioned on Macintouch.com and thought I’d point to it too. It brings back “normal” window behaviors: LightSwitch X

Non-Customizable Apple Menu

Well, there’s hardly anything more anyone can say except: if it aint broke, don’t fix it! The Apple menu may not have been perfect, but please, it was pretty damn close. I know people who have completely customized their Apple menu and couldn’t conceive of working without it. I’d love to see the usability justification for this one…

Updated 9/12/2002: A third party solution can be found here.

Speed (Or Lack Thereof)

I am embarrassed to tell you how much I spent on my TiBook last summer because as a web developer, it seemed like a really good choice, and it would be if I wasn’t constantly waiting for the spinning beach ball or for windows to resize. Some of the sluggishness may be due to the fact that I have a number of background processes running that most users probably do without (sendmail, mysql, to name a couple).

Additional Padding To System Widgets (Toolbars, Etc)

I realize that the additional padding added to these items is in order to be able to accommodate the day when we are working with higher resolution screens, but couldn’t the computer know that it’s outputting to a 72dpi device (or is it lpi?) rather than a 96dpi device and just adjust accordingly? I miss the screen real estate that is lost by this extra padding and find myself constantly moving windows around to try and compensate the lack of real estate.

The Trash (With References To Hitting A Moving Target)

We all know that the idea of dragging a disk to the trash to eject it was one of the more glaring holes in the original UI, but it was a forgivable convention much like actors speaking far too loudly when on stage. The suspension of disbelief wasn’t put in jeopardy and the metaphor continued to hold true. The user’s confidence was not lost.

Furthermore, if the user has Magnification turned on, the likelihood that the discarded item lands in the trash, rather than as a new item in the dock, is probably around 30%. I have magnification turned off as I’m not a very good aim, and even worse when using the trackpad.

But alas, this question goes much deeper than just the location of the trash. It harkens back to the whole question of how the user works with the computer to begin with. I can recall a multimedia training program I used with my very first Mac (the original Mac LC) that instructed me to move the documents I was working on out of their folders and onto the desktop and then, when I was finished working on them, to use Command+Y to move them back to their original location.

This was a very tidy solution to a very messy problem: document management. Microsoft’s answer was the My Files folder… or was it My Documents… or was it the Documents folder in the Start menu? You get the picture.

Would it be too much to ask that Apple just put the trash back on the desktop or at the very least, let the user decide where it should live?

Mouse Speed

Has anyone else noticed that the mouse moves MUCH faster in OS 9 than it possibly can in OS X? I guess we need to slow things down when trying to hit moving targets… another one for which I wonder what the usability justification was.

Column Widths In Finder Windows

I can’t recall exactly how it worked in OS 9, but I don’t recall it every being a problem so perhaps they had it right (but I say perhaps because it could also be that I didn’t have sentences for file names in OS 9 – a possible usability justification for being a file name Nazi, but I digress).

The problem is, it doesn’t seem to matter how much I fuss, the column widths when viewing files in List or Column view, never seem to stick after setting them. As soon as you open a subfolder (in List view) and come back out, the column width appears to have been reset to some mysterious default width. What’s really strange is that I have one folder with some long file names and the width of the name column is maybe 170 pixels (by default). I have another folder with only one file, whose name is index.php, and it’s width appears to be well over 250 pixels. What is going on here? Forget about resizing the Date Modified columns (and other columns as well). It just isn’t worth the click and drag.

Renaming Files

Is it me? When I click a file name to modify it, the system reacts by making the text editable for a fraction of a second, and then makes the name un-editable again requiring me to click it once more.

Updated 7/28/02: Apple appears to have made an attempt to fix this particular bug with the 10.1.5 release, and in many cases it has been fixed, but I am still able to reproduce it.

Keyboard Shortcuts In File Dialogs

It used to be you could type your way to the desired file by using the Command+arrow combo to get to the folder in question, and then type the name of the desired file to highlight it and hit Enter (or Return) to open it. That was great. It was fast and worked perfectly. That I know of, none of my applications do this properly or without some bugs (when trying this with Word while writing this, Word crashed – it’s never worked in BBEdit).

Function Keys That Don’t
Added 11/20/02

The G4 laptop I own sports a “laptop” version of a keyboard. For those of you who’ve never spent much time working on a laptop, this can be an unpleasant surprise.

The keyboard is much smaller than keyboards for desktop machines. Keys we may take for granted such as the number “keypad” or the Delete key are reduced in size far beyond anything we might find useful. In fact, the can even get in the way, particularly when you hit the Left Arrow key when you intended to hit the Up Arrow key.

For Macintosh users, you may really lament the loss of the right hand Command and Control keys. This renders command key sequences taking place on the left hand side of the keyboard cumbersome.

It might seem like you’re only losing two keys, but they are essential ingredients in at least 30 keystroke sequences. Letter keys ordinarily only participate in three potential keystroke sequences: lower case, upper case and as the target of a command key sequence. Naturally, we can’t exactly blame Apple for this and never having worked at length on a P.C. laptop, I’m in no position to really pass judgement.

Where I’m finding fault with Apple is in the remapped function keys. I suspect that this remapping of the function keys is an attempt to limit the number of buttons on the machine in general, and in the case in particular.

For the benefit of those who are not Mac owners, the function keys F1 through F6 have been remapped for Macintosh specific functions such as changing the volume of your speakers (F3, F4, F6) or the brightness of your screen (F1, F2). In theory, whenever a program says to hit F1 for the Help menu, you now have to hit a NEW key (fn) plus the original Function key to execute the command.

The problem, however, is that _some_ programs don’t appear to like that combination and don’t respond, or worse, respond in unexpected ways. “emacs” is the example that prompted me to write this blurb, but I’m sure some other programs exhibit similar behavior. This really is maddening considering the historic development of these keys.

My God! This is getting out of control! Apple’s own function key implementation fails right at the moment they instruct you how to use it! Go to Preferences->Keyboard->Full Keyboard Access and read the instructions. Right there it says:

“Use (Ctrl)+F7 to change setting temporarily.”

And yet, if you actually try it (OS X v10.1.5), it doesn’t work! What are we to make of this?

Things I love about the Finder (and other system-level options) in OS X

There is little I love about the Finder alone, but there are a number of things I love about OS X in general that are worthy of mention, so here they are:

Command+H, although without its own heading, is also a very nice feature, as is Command+Shift+Delete (Keyboard shortcut for emptying the Trash! We’ve been asking for this one for YEARS).

Protected Memory

I just cannot say how fond I am of watching one app crash and burn while the rest sing merrily along doing whatever they were doing in the background. This alone goes a long way toward making the hate list worth putting up with.

Unix Tools

As a Web Developer, and general tinkerer, there’s nothing like having the tools of the trade at my fingertips.

Mail’s Bounce To Sender Command

Ok, this one is pretty minor, but it sure is nice to think that spammers end up with a bounce message for my email address. Maybe, just maybe, bouncing spam actually helps reduce the amount you receive.

SMB File Sharing

It’s nice to be able to “natively” access Windows drives without having to buy additional software to do it or install Mac services on NT (those of you who have done it, or tried to do it, know what I’m talking about).

Open With Program

In a cross-platform world, there just is no getting around the file name extensions and the Windows solution for associating files with applications is just mind-numbingly arcane. Thank you, Apple, for making it easy to associate a file with an application.

Print Preview (And Especially Save As PDF)

Should be self-explanatory…

Picture And Document Previews

Should be self-explanatory…

Honorable Mentions

I can’t really say I love iMovie, iTunes, iPhoto, etc., because although they do what they say they do, and pretty well at that, there are other solutions out there that may well do those things just as well (or just as poorly as the case may be), but there is something to say for the care that’s been taken in designing these applications, in particular, in designing the end user EXPERIENCE, and for that, they do deserve some recognition. It just makes me wonder what the hell Apple was thinking when they recreated the Finder. Why didn’t they put the same amount of attention to detail into designing the end user experience for the Finder that they put into designing the end user experience for these other applications?

The Irony

In spite of the fact that the majority of the things I love the most are not the result of anything Apple has done, Apple has convinced me to buy yet another Macintosh, and spend a small fortune on it at that. Is feeling duped the end user experience Apple wants their customers to have? I doubt it, so please, Apple, if you’re reading this, address the issues raised on the other page, please.