How to add photos to a site and not allow them to be downloaded

May 27, 2010 6:23 AM

How to post photos on a web page so that they can't be downloaded and saved?

I've seen some websites that have a photo gallery on the site, but don't allow users to download the photos, but I'm not sure how they do this. Clicking on the picture brings up a "gallery" of photos, but they cannot download from that screen (or the earlier screen). Does anyone know how this works?

posted by alternateuniverse to Computers & Internet (33 answers total)

They do it with Flash photo galleries. But you can still take a screenshot of anything that appears on your screen, so it's basically impossible to show someone an image via the internet but prevent them from copying it.
posted by EndsOfInvention at 6:27 AM on May 27, 2010 [1 favorite]

If you are concerned about users taking your images, you should probably add a watermark and copyright notice to each one. At least then, no one can claim that they thought the image was public domain.
posted by kaudio at 6:33 AM on May 27, 2010

If you really have to, put a watermark on it. If you want people to see it, they're already downloading the photo.
posted by Threeway Handshake at 6:38 AM on May 27, 2010

Viewing photos on a webpage *is* downloading them. All you can do is make it hard for unsophisticated users to save them. Anybody with half a clue will just press the print screen button and paste it into paint or photoshop.
posted by callmejay at 6:38 AM on May 27, 2010 [1 favorite]

How does Flickr do it? Even if you disable Flash, right-clicking a photo does not give Save Image or Save Background Image options It looks like they are just using a standard img tag so I assume it's some fancy CSS or Javascript around it.
posted by smackfu at 6:40 AM on May 27, 2010

Response by poster: Ends of intervention -- how do you put a Flash photo gallery on a page? Is it something you can just add into the HTML? (Forgive me, I'm a real novice at web stuff.)
posted by alternateuniverse at 6:41 AM on May 27, 2010

Response by poster: Smackfu, exactly... that's the kind of thing I'm looking for. Any answers on that one?
posted by alternateuniverse at 6:42 AM on May 27, 2010

Some places (like flickr) will also overlay the picture with a single-pixel transparent gif in a <div> tag so that right clicking and saving it will give you only the single-pixel transparent gif. It's weaselly bullshit, but there you go. You can get around that with a pretty trivial bookmarklet, but it's still enough to thwart the average user.

Well, the average user who can't form thoughts into words and then type those words into google, anyway.
posted by mhoye at 6:43 AM on May 27, 2010 [3 favorites]

You can still download the "protected" photos from flickr very easily. Or are you only wanting to protect your photos from my grandmother?
posted by Threeway Handshake at 6:44 AM on May 27, 2010 [2 favorites]

I just went to Flickr and couldn't find an image I couldn't either drag to my desktop, or just right click and save. Not sure what I might be missing?
posted by Phyltre at 6:46 AM on May 27, 2010

Here's an article called "19 Free Flash Photo Galleries". Probably a good place to start.
posted by kaudio at 6:47 AM on May 27, 2010 [1 favorite]

Ah, I forgot - you can also do this with a snipped of javascript that iterates through the images in a DOM and catches right-clicks.

Basically, though, why do this? It's an annoyance, not a security measure.
posted by mhoye at 6:48 AM on May 27, 2010

Note that there's very little that will stop a determined, knowledgeble person from getting the photos; even with a Flash gallery it is possible to track down the absolute path to the image, although it is quite tricky.

If you just want a basic deterrent to stop Joe Average copying the files, flash or the flickr overlay method is the way to go. Otherwise, watermark them.
posted by fearnothing at 6:56 AM on May 27, 2010

A very long time ago I saw a photo protector widget I could not beat. The image was somehow loaded through Java (yeah, a Java applet, not Javascript) and the usual print-screen nonsense did not work. I spent five minutes plunking at it and gave up. That's probably all you can ask for.
posted by adipocere at 6:59 AM on May 27, 2010

The Flickr image overlay is what you want to use to deter (not prevent) casual copying. Anything more complicated is a waste of time, because all the user has to do to defeat whatever complicated Flash magical wizard of copyright gallery you build is press the Print Screen key on their keyboard.

Again, just so this is clear: All it takes is pressing a single key on the keyboard, no matter what you do on your end.
posted by Jairus at 7:05 AM on May 27, 2010

So far, these have been technical answers. Whenever I hear this particular question asked, I wonder about the motivations, and what 'worst case' scenario the user is actually trying to solve.

* If it is to make sure people don't link to the image directly (using your bandwidth), you can do hotlink protection.
* If it's to make sure there is proper attribution, then watermarking is probably a good solution. By 'good' I mean, "good enough for stock photo companies, who make their living off this stuff."
* If it's, OMG, I'm giving up something to the internet! Then you're probably out of luck, since as others have pointed out, right-click catching, pixel overlay etc., actively annoy users, and if you can see it on the screen, you can get the image, if you're determined.

Think about why you're putting the image on the internet in the first place, and determine what you want to accomplish before looking for a technical solution.
posted by gregglind at 7:10 AM on May 27, 2010 [2 favorites]

Response by poster: Thanks, everyone!

I'm just trying to deter Joe Average -- nothing fancy. How do you implement the Flickr overlay thing? Can I do it in HTML?
posted by alternateuniverse at 7:12 AM on May 27, 2010

The Flickr thing is called spaceball BTW. I assume it's an overlayed div, so right-click save gets the div with the highest z-order, which contains the 1x1 gif.
posted by hungrysquirrels at 7:20 AM on May 27, 2010 [1 favorite]

I just went to Flickr and couldn't find an image I couldn't either drag to my desktop, or just right click and save. Not sure what I might be missing?

It is actually an option on your Flickr account, somewhere, to say whether people can save images. Also, we're just talking about the photo pages, not the All Sizes one.
posted by smackfu at 7:27 AM on May 27, 2010

Joe Average can press "Print Screen" like everyone else, you know. Making pictures uncopyable is very close to the most Sisyphean task on the internet.
posted by Aquaman at 7:38 AM on May 27, 2010

It is actually an option on your Flickr account, somewhere, to say whether people can save images. Also, we're just talking about the photo pages, not the All Sizes one.

Wait a minute -- I believe one of the consequences of selecting this option in Flickr is that there is no "All Sizes" page for users to go to.

But I assume that's not what the OP wants because it's within Flickr. Actually, the question doesn't specifically say whether this has to be implemented on a website made by the OP from scratch or whether Flickr would be OK.
posted by Jaltcoh at 7:51 AM on May 27, 2010

Joe Average can press "Print Screen" like everyone else, you know.

Actually, I'll bet a significant percentage of users don't know about this function. And even among those who know about it, some percentage of them would never think of it as a workaround for downloading photos. (You might find it ridiculously obvious, but many users are less savvy than you and don't make connections like that.) Even among those who know about this workaround, many of them would find the extra trouble of taking a screen capture to be enough of a hassle to dissuade them from downloading a photo they would have otherwise downloaded. So it is worth implementing this.
posted by Jaltcoh at 7:56 AM on May 27, 2010

Some places use JavaScript to disable the oncontextmenu event.

(downside: turn off JavaScript, image is downloadable; presents accessibility problems, confuses people when their browsers suddenly don't work like they normally do)

Some places hide their images inside a Flash slideshow or wrapper

(downside: Flash is not universal, adds to download size, can be overcome easily by seeking out the xml file with the image paths, or just downloading the flash movie )

Some place blank images or divs over the top of images

(downside: turn off CSS and the blank image divs more right out of the way)

Some put the images in the CSS "background-image" of an element rather than as image tags

(downside: Firefox in particular makes it easy to display a background image, images may not be indexed)

Some sites add special HTTP referer (sic) checks into their server configuration to prevent hotlinking

(downside: actually, this often works pretty well, but it can screw with people with certain security software, or people viewing your site via RSS feed or other alternative venues)

Some sites actually break up the images into tiles, then present a group of images to the user so it appears as one image

(downside: more complicated server set up, your images will not be correctly indexed by Google Images)

Some sites simply don't put up any images that are high quality

(downside: cutting off your nose to spite your face, people miss out on your images)

So which of these awful measures sounds the best? They're all pretty user-hostile. Starting off your website thinking your site visitors are going to steal from you is philosophically sad. What if there's a way to harness people's enthusiasm for your site and discourage behavior you don't want, while still allowing people to share your cool stuff.

I think you would be better off to add an unobtrusive copyright and watermark to your larger scale images to help people identify their origin. I think it would be also useful to post your copyright information in your galleries as well. Then for the images that you are concerned about, you can use a tool like Tin Eye to seek out copies that you don't like, and your images have a built-in "hey, don't use me improperly!" as part of them.
posted by artlung at 8:04 AM on May 27, 2010 [1 favorite]

This is why I use Firefox's Page Info utility that has all the loaded page media in absolute reference and for download. Oh wait we're talking about not being able to download them? Then just use a flash gallery. And for the love of god don't put a popup when you right click that says PICTURES ARE COPYRIGHTED as that just gets annoying.
posted by msbutah at 8:07 AM on May 27, 2010

I have no competence with any tech stuff but a simple google search will tell you how to get rid of Flickr spaceball to get the photo. Flash seems to be effective, though there is always a screen shot if you really want the photo.
posted by Postroad at 8:15 AM on May 27, 2010

Bottom-line, if you don't want your photos to be shared, don't share them online. Personally, I'm flattered when a shot gets picked-up and shared to a wider audience. It's more satisfying to find that one of my shots is being shared and enjoyed. But, I've done it as a hobby, recognizing it's very hard to make money from these days, so it's just done for my own enjoyment.
posted by hungrysquirrels at 8:29 AM on May 27, 2010 [1 favorite]

Simple example with CSS . This example places each image as the background of a div, and places a div with a clear gif background on top. This way you cannot drag the image or right click to save as. It's a bit of a pain as you need extra code on each image, and can't do it automatically. If you're just doing a small site this would probably be your best option.

Of course anyone can open your source and ferret out the url. You'll also want to set up your hosting so that direct files cannot be downloaded outside of an html file on your site.

Here's a JS that creates an "image protecting class". Less coding on each page.

Another oldschool/lo-fi way to protect images is to slice your image, and stitch it back together with a table. Photoshop will actually automatically save you the HTML and sliced images. This way your image stealer can still save the images, but will have to go through the effort of stitching them back together. Sliced images also saves you hotlinking problems, which used to be a bigger problem than it is.

Of course, all of this is null when you consider screen capturing. I'm pretty sure my grandma knows how to do that. One image protector I saw actually animates sprinkles with flash over your image to prevent a clean capture. Of course if determined enough, you could take several captures and stick together the non-obstructed pieces.

If you post an awesome, high res photo, people will pretty much do whatever they can to get it. This suggests two, kindof unsatisfying solutions: no-high res photos, and watermarks. Both hinder your audience from seeing the images in all their glory.

I'm a designer, and had a fine art/drawing web portfolio that got ripped off a few times, (at least to my knowledge) from hotlinking. (Of course you get to have fun with that by changing the image to something less flattering...) I've kinda come to live with it.

Embrace that everything digital is a copy. With out copying there is no digital. CC helps keep a zen attitude about it.
posted by fontophilic at 8:37 AM on May 27, 2010 [1 favorite]

If you want a Flickr overlay type "protection", why don't you just use Flickr?
posted by like_neon at 8:41 AM on May 27, 2010

Some questions that would be important to understand in order to better help you:

Question 1.
Where are you planning on putting the images?
A) A site that you fully control?
B) Hosted on a site you don't fully control?

If A) then how skilled are you in web site development?
a) none
b) understand basic HTML
c) above + basic CSS, and layouts
d) above + basic javascript

if B) then it would be important to know who the host is.

Question2.
Exactly what is it that you're concerned about that blocking downloads is important?
A) You offer images for sale or they are otherwise valuable and you don't want users taking them for free?
B) You don't like the idea of users using your images in ways you don't control?
C) The images are tied to some branding and you don't want the brand diluted or damaged by users misappropriating the images?

if A) - rather than blocking downloads (hey free marketing!!), then I would recommend considering watermarks and degraded quality

If the answer to Question 2 is B) or C) and the answer to Question 1 is A with at least a skill level of c THEN the Flickr effect is probably your best option.
If you don't understand the explanation above of placing a transparent image in a DIV with a higher Z index over your actual image, then you're skill level is not sufficient. You can study up on CSS or find somebody to do it for you.

Personally I'd opt for either putting them up and hoping or not putting them up at all, but if for some reason I felt it was important to put up a barrier to downloading, I'd go with the transparent DIV overlay, YMMV.
posted by forforf at 8:41 AM on May 27, 2010 [1 favorite]

Simple example with CSS

1. View source.
2. Copy URL of image.
3. Paste URL into new browser window to load image.
4. Right-click to save.

It's always going to be possible to get the image.
posted by kirkaracha at 8:50 AM on May 27, 2010

...Some sites actually break up the images into tiles, then present a group of images to the user so it appears as one image

(downside: more complicated server set up, your images will not be correctly indexed by Google Images)...

I have to say, this method was effective in thwarting me from copying a set of images to my HDD.

A content provider had a gallery of high resolution images up and each image was broken into ~200 tiled "sub-images" so that right clicking any particular part of the image only let you save that one piece. The "mosaic" of sub-images was not scaled by the browser and the "mosaic" was big enough that you had to scroll around to see all of it. I would have had to do 3-4 print screens per image and then re-assemble them in a graphic editor to get all of each image.

Must have been an interesting programming exercise for someone to automate the breaking of the images into "tiles" and generating the HTML to display them correctly...
posted by de void at 9:00 AM on May 27, 2010

Like everyone says, it is always going to be possible to download an image that is displayed on the screen.

Using a simple program like Snag-It you can just screen capture anything you can see from complete widows to a specific area (i.e. your picture). Perfect? No, but pretty damn close and basically idiot-proof.

The watermark/copyright embedded on the image itself is the only way to combat theft if that's what you want to do.
posted by 543DoublePlay at 9:03 AM on May 27, 2010

Using a simple program like Snag-It

Or the Snipping Tool which is installed with Windows 7. So easy even my mom (Josephine Average) does it.

This train has left the station. Watermark your stuff and hope for the best.
posted by SuperSquirrel at 3:21 PM on May 27, 2010