43

Let me begin by stating that I'm aware it's extremely tedious or virtually impossible to prevent individuals from pirating content.

I'm working on a website for a client who is a relatively well known cartoonist. We're working on methods to prevent users from ripping off his work and republishing it, or more so from reproducing it offline, be it on mugs, or similar. I intend to use WordPress on the backend.

I was demonstrating to him how ridiculously easy it is to bypass the disabled right-click.

TLDR: I was wondering what are the other methods to discourage or deter a user from copying an image, and reproducing it?

(I'm aware of watermarking, but it really spoils how the image looks.)

I've already referred to these questions:

  1. Are there DRM techniques to effectively prevent pirating?

  2. Is it possible to prevent unauthorized copying or recording of data by photographing screens?

  3. Prevent Users from Downloading Javascript, Images

peterh
  • 2,938
  • 6
  • 25
  • 31
Satej S
  • 573
  • 1
  • 4
  • 8
  • 48
    Are you only interested in technical solutions, or are you open to legal/social solutions? Because as you've already seen, "virtually" is the wrong word: it is flat-out impossible to prevent it. Is there some sort of pain threshold that you're willing to put up with (and make your legitimate users deal with) in order to discourage some X% of infringers? Also, for context, what country are you in and in what countries do you want to prevent the offline reproductions? –  May 11 '16 at 07:10
  • I'm primarily interested in technical solutions. Legal solutions wouldn't be feasible.A large part of that has to do with us being in India. Like I understand disabling the right click, however so easy to bypass, deters the average Joe from saving the image. I'm looking for something along the line, or even more technical. – Satej S May 11 '16 at 07:14
  • 68
    Maybe this won't help, but one thing to do is to not upload it in higher resolution than absolutely necessary for the webpage. Depending on how big you want it on the webpage, it might be to small for a good print. – Anders May 11 '16 at 07:36
  • 52
    Look to HBO who benefited immensely from piracy of their content (by their own claim and until about yesterday). A clear author name and website branding on each image will likely do more for your customer than site legalese and easily by-passed technical solutions. If they later wish to use legal approach the authorship, copy right, and origin of the image are clear. – Dave May 11 '16 at 15:32
  • You could discourage screen-shots by fading the image after a couple of seconds, but do you want to make your audience love you or hate you? – Michael Kay May 11 '16 at 21:48
  • 25
    Hollywood can't even manage to do this. You have no chance whatsoever. – Michael Hampton May 11 '16 at 22:13
  • 6
    Watermarking doesn't have to spoil the image. I recently built a cartoon blog for a friend that auto-watermarks the image: http://acuteangle.me. It's on the bottom right and more noticeable in some comics than others. – djsumdog May 11 '16 at 22:23
  • Thanks, I appreciate the comments! @Dave, I think with video content, it's much tougher to get rid of the branding and water marks, I may be wrong. With a single image, branding on each image could ideally be photoshopped off, or even cropped enmasse? – Satej S May 12 '16 at 04:35
  • @Anders , that's a great solution and something I definitely have in mind.Thanks! – Satej S May 12 '16 at 04:36
  • @MichaelKay , the UX is definitely something important, love it is. – Satej S May 12 '16 at 04:43
  • @djsumdog, we're looking at wordpress plugins that do that as well. Although there's nothing that stops someone from cropping it off . – Satej S May 12 '16 at 04:43
  • 4
    Show creepy images of cartoon skeletons when you detect a right click or mouse down+move(pull) on the image. That will show them. – ASA May 12 '16 at 10:24
  • 5
    Your client should think about releasing his work under [creative commons](https://en.wikipedia.org/wiki/Creative_commons), and stop worrying about all this nonsense. @MichaelKay has a good point, I would never use Quora, because they put that greying out thing on their website until you log in... Firefox dev-tools, and you take it off in a second, still I think it's a sick mentality. Welcome to the internet... – Daniel Dinnyes May 12 '16 at 11:23
  • 1
    @DanielDinnyes, I think an issue is that he's had people use his work for coffee mugs, and other goods in the past, apart from bloggers or so simply flipping it . The latter can be dealt with , but I guess the earlier is a lost cause. – Satej S May 12 '16 at 11:48
  • Watermarking doesn't have to be visible. – JeffreyZ May 12 '16 at 16:26
  • Have you considered adding a watermark to the images? – user253751 May 12 '16 at 23:10
  • Yes we have considered watermarking. And watermarking that isn't visible won't help with people that print out the image and reproduce it. – Satej S May 13 '16 at 05:38
  • 8
    Disabling right click is a guaranteed way to make me take my business to another site. Right click is not only used to copy images and disabling ruins the functionality of my browser; I will not tolerate it. – Jack Aidley May 13 '16 at 09:37
  • The only way to publish something that people will not copy is to make your content so horrible that no one will want it. I have nephews and nieces who aren't even teenagers yet and they know how to use browser developer tools to copy images from sites. It's as hard as pressing F12, then going to a specific tab that lists all of the files that come with a page. – Script Kid May 13 '16 at 13:04
  • 1
    I actually tried this before, but the technology/hardware/algorithm just wasn't there yet. If you can alternate the pixels fast enough that 2+sequential colors visually blend to make the reader see the intended image, you could make screen shots useless. I never found any papers with a detailed analysis/study of time blending colors, so my attempt resulted in colors that were "off" and kindof jumped off the page... Screen shots became seemingly random colors, but a dude with a phone/disposable camera could still capture the image of the physical screen. Everything is hackable in the end. – technosaurus May 14 '16 at 04:14
  • @technosaurus I don't think this is feasible - remember that monitors have a finite refresh rate, and if it's happening in JS, render speeds will be a lot slower than that. I doubt you would get double-digit frames per second, and you'd probably set off epileptics. – SomeoneSomewhereSupportsMonica May 15 '16 at 13:03
  • 1
    I'm not sure any discussion about this sort of thing is complete without a reference to the "analogue hole" (https://en.wikipedia.org/wiki/Analog_hole) – mwfearnley May 20 '16 at 12:13

28 Answers28

96

There is no way to block saving of images, but here are some ideas to make it harder.

  • To prevent right-clicking the image to save it, you can overlay a transparent div on it. The user will then right-click the div instead of the image below it and the context-menu will not show "Save image as".
  • You could use a data URL to show the image so that there is no separate file on the server to link to.
  • You could use hotlink protection by checking the referer before serving images.

Even with all these countermeasures, any user can just make a screenshot of the page and crop the image out of it.

Given it is very easy to bypass these countermeasures, you may consider not implement any anti-downloading functionality at all. Use of the images is already protected by law.

Sjoerd
  • 28,707
  • 12
  • 74
  • 102
  • 2
    Comments are not for extended discussion; this conversation has been [moved to chat](http://chat.stackexchange.com/rooms/39676/discussion-on-answer-by-sjoerd-discouraging-users-from-copying-images-off-a-webs). – Rory Alsop May 12 '16 at 14:12
  • 11
    You should note anyone savvy can just remove the div using inspect element, or visit the resources tab of the developer tools and view all images on the page. This works for data URLs too. – Insane May 12 '16 at 14:45
  • 11
    Data URLs are also "Save image as..."-able. That just protects against hotlinking. – Kroltan May 12 '16 at 15:05
  • @Insane - ummmm... or if you aren't savvy you just print screen and paste. – blankip May 12 '16 at 20:38
  • @blankip Yes but then you get a horrible quality image, cropped with paint (you're not savvy remember). Which brings us to Anders point from the comments: only upload the size image you need for proper display. – Insane May 12 '16 at 20:49
  • 9
    Copyright laws, like the patent laws, are OFFENSIVE (not defensive) weapons. This means that the burden is on the IP owner to go after the infringer. Even if you decide to go after someone copying an image (which is hard unless you have info about that person), it's a lot of work. Multiply that by a few thousands if you have a public site. Remember, nothing and no one is a virgin as soon as their on the web. – Zuzlx May 12 '16 at 23:39
  • 6
    Please don't use referrer checking, there are people who prevent referrer headers for privacy reasons. – xorsyst May 13 '16 at 15:22
  • 1
    I'd like to add `pointer-events: none` to this list. Without JavaScript it disables right click and dragging. – Sandy Gifford May 13 '16 at 19:46
  • 1
    Applying the images via css as background-image will not show save as either and keep the rest of the context menu intact. Images can still be extracted via inspect element. Even if you could prevent that one could still get the image from cache files. – Kimmax May 14 '16 at 21:56
60

You are seeking a technical solution to a social problem, if you want to call it one, which is often folly.

One of the fundamental rules of security is that once you give the user something, they have it. Obfuscation and client-side "protection" (AKA DRM) do not work.

If you want to display an image on user's screen screen, them saving that image can be no harder than print screen and opening paint. No matter how intolerable you make your website, you cannot sidestep the fact they already have the image.

So the question is why you would go out of your way to make the website less usable to prevent what you already cannot. All of the normal tactics, like blocking right click, obfuscating the HTML-CSS, using flash, etc. have major usability implications. Going off the rails with some of the more extreme solutions suggested begin to present performance and compatibility problems.

And all this you're asking the user to deal with. I can't speak for everyone, but I refuse to visit any site that begins tampering with my input. I consider right click blocking one of the greatest sins on the internet, and it's a practice that simply needs to end. We don't need new and innovative ways to annoy the user.

  • 8
    I agree! I personally hate the whole right click disabling, cause it doesn't serve the intended purpose. It can be easily bypassed, but I guess that's what happens when people with non technical backgrounds try to come to technical solutions, which they clearly don't understand. – Satej S May 12 '16 at 04:54
  • 2
    Just out of curiosity (I generally agree with your answer) - I take it you don't use Google Drive because it overrides the default right-click? – Shaamaan May 12 '16 at 09:00
  • 3
    @Shaamaan No, I do not use it, and yes, that is related. It wasn't so much of a problem with Drive because it has such a simplistic purpose I never noticed they broke right click there specifically, but the last time I used the connected Google Docs, not only had they broken standard right click behavior, they hadn't replaced it with a working alternative. I don't consider a word processor that can't copy and paste fit to purpose; and that just illustrates the dangers of fiddling with user input. If Google can't get it right, it's probably a bad idea. –  May 12 '16 at 14:04
  • Also, at least in case of Google Drive in Chrome on Mac, if you hold the Command key while doing the right click, you get the original system context menu. So while Drive replaces the normal right click menu, it doesn't block the system one. – dunni May 12 '16 at 16:14
  • @dunni That's interesting. I don't know of a Windows or Linux version of such. Although I do know there are settings on some browsers can block the blocking/replacement; they work about 70% of the time in Firefox, from my experience. –  May 12 '16 at 17:01
  • 6
    On Chrome in Windows, you can Shift-Right-Click to get the browser's right-click menu. – Dan Henderson May 12 '16 at 18:26
  • @DanHenderson Interesting tip. I'll have to try that. –  May 12 '16 at 20:15
  • 3
    "One of the fundamental rules of security is that once you give the user something, they have it. Obfuscation and client-side "protection" (AKA DRM) do not work." - on the contrary, it works extremely well, if you have full control of the boot process, which as a website developer you do not. – user253751 May 12 '16 at 23:55
  • @immibis It only works then with full boot encryption on a user-supplied password/key - but as we might remember from recent Apple-related news, even then is often not exactly hardened against attacks. Once it's in the attacker's hands, it's only a matter of time until they break it if they are determined to do so. The question is mainly if the attacker thinks the value justifies the time/cost, and if the time required makes the attack irrelevant. Of course, that *is* all meaningless for a comic strip website. –  May 13 '16 at 13:54
  • @WilliamKappler No, the key is stored in tamper-proof ROM. (Remember we're protecting from the user here, not protecting the user. What good would it be if the user had the key?) – user253751 May 13 '16 at 21:50
  • 1
    @immibis No such thing as tamper-proof. Maybe, maybe, tamper-resistent. Just ask game console developers. –  May 14 '16 at 03:19
  • @WilliamKappler Tamper-resistant, fine. I haven't heard of anyone breaking Secure Boot yet. – user253751 May 14 '16 at 03:42
47

If your problem is actually "convincing your client," try this thought experiment:

  • Put a cartoon on a web page with a red border around it and a few diagonal stripes to partly obscure the image (just enough to make it ugly but still legible).
  • Tell your client, "I've added unbreakable copy protection."
  • Give your client a piece of paper and a pencil and ask them to freehand a copy of the cartoon.

It may be too depressing to them (so think twice before trying it), but will drive home the magnitude of what they're asking you to do. The ease of copying someone else's hard work is why Intellectual Property laws exist.

Very applicable to your current situation: in the USA, characters from the popular Calvin and Hobbes comic strip are commonly seen, even though the creator has steadfastly refused to license them. But they're easy to copy, and the IP is difficult (and expensive) to enforce. Your best bet will probably be a social solution: convincing the users that it's in their own best interest to not copy the images

I know that's not the answer you want, and I'm sorry.

  • 59
    Or take the alternative approach, strategically brand the images and allow them to get copied and use the ensuing fame to make real money of subscriptions, hardcover books, etc. Seems to work for xkcd and a few others. It's also a common approach amongst youtubers who have other people rip their content. – wireghoul May 11 '16 at 08:42
  • 7
    ... unless you're into Reacting videos... – Canadian Luke May 11 '16 at 17:24
  • 1
    The plagiarismtoday link was interesting! I understand enforcing IP is difficult. The fact that he is based in India makes it 10x worse. – Satej S May 12 '16 at 05:07
  • 2
    Interesting to note - the *lack* of licensing on the part of Bill Watterson meant that his syndicate wouldn't bother fighting violators. – Wayne Werner May 13 '16 at 19:04
20

Before doing things like this you always have to ask yourself: What is your actual goal?

It is impossible to stop a determined attacker from getting your images, what you can do is make it harder for your average site visitor to get to the image.

What does this gain you?

  • Your artwork is still just as vulnerable to commercial exploits as it was before.
  • You made life for your actual fans harder and made word of mouth advertisement harder.

Does that sound like something where you want to invest lots of time and money in, instead of making the site better? Exactly. To protect your commercial interests, you have many better legal options.

Marginally off-topic rant following:

One might very well argue that giving away your comics for free (and making that as easy as possible) is a great business opportunity! It doesn't cost you any money, but gives you lots of good PR and extends your brand and following. The most famous example of this being Randall Munroe (of xkcd fame). Randall is licensing all his comics under Creative Commons-Non Commercial 2.5 and prominently mentions the hotlink URL for every comic. Despite - he says because of it - that he makes a good living off his comic.

Another possibly less ideologically influenced example would be Penny Arcade: They don't have a CC license, but they don't do anything to stop you from copying/saving/hotlinking their comics either. And they are a company employing a dozen or so people these days.

Voo
  • 651
  • 5
  • 14
  • 3
    Don't forget The Oatmeal, who has a following that has been known to bring web servers to their knees, and even set crowd funding records. – JustinM May 11 '16 at 20:04
  • 5
    @Phaeze Oh I could think of many, many more examples. What I can't, is think of a single popular web artist that tries to make sharing their work as hard as possible. There used to be some sites that used flash (awfully UX generally even on desktop), but I can't even remember their names... stopped following them with the advent of mobile and the availability of vast swaths of easier to access content. – Voo May 11 '16 at 20:40
  • 16
    It's worth noting that Randall uses a CC *Non Commercial* licence - in other words, people are free to copy and distribute his comics (and even make derivative works, as far as I know) but cannot sell them (including prints, t-shirts, mugs, etc.). Also worth noting is that people are more likely to respect a "Non Commercial" stipulation on a CC licence than a "don't under any circumstances copy this image, and I've made it has hard as I possibly can for you to do so" statement because the content producer is showing them trust and respect by using a CC licence. – Micheal Johnson May 12 '16 at 07:30
10

There is nothing you do which makes it impossible for users to view the content without being able to save it.

The best you can manage is to make it more difficult. And if you make it more difficult than acquiring legitimate usage rights then some (not all) of the people trying who might otherwise steal the content will pay for it - i.e. if you think the content has value then make it easier for people to buy it!

The overlay doesn't help much in isolation. Disabling the right click doesn't help much in isolation.

One possible solution is to split the image into multiple images in such a way they can be recombined and rendered on a canvas with Javascript (with right click disabled and an overlay) such that the original image is recovered. e.g. divide it into 50 pixel strips, XOR each strip alternately with one of N reference images (also same width) and repeat the process on the client to get the original.

There's nothing to stop the user implementing their own code to repeat this in a saveable format, nor does it prevent them from simply capturing a screenshot.

Using steganography to identify the provenance of an image is workable, indeed I believe that some methods even persist in a photograph of the screen. But even if you can tie this back to an identifiable individual, what can you actually do about it? Not very much probably.

Addendum

Rather than spending a lot of time trying to protect the image content (unless you are getting paid by the hour) you might consider investing some effort in protecting the site as a whole from rippers/autoleeches.

symcbean
  • 18,278
  • 39
  • 73
  • 7
    "There's nothing to stop the user implementing their own code to repeat this in a saveable format". They don't have to implement anything - after all you by definition have to send them the code to reassemble the picture. – Voo May 11 '16 at 19:45
  • 1
    Never mind reverse-engineering or extracting the code — if the image displays in a browser, it is vulnerable to screenshots.  Watermarks may be useful to identify the precise source of a stolen image, but how is that relevant to this question? A drawing of a tiger is either recognizable as Hobbes or it isn't. If it is, what more proof do you need? If it isn't, it's probably distorted enough to have contaminated the watermarks. And, if a watermark is not visible to the naked eye on the web page, then it probably won't be recoverable from a printed image, like a mug or a tee shirt. – Scott - Слава Україні May 14 '16 at 14:58
10

I've been faced with that problem several times. The best solution we found was to drastically reduce the image quality. Make it acceptable for the screen but too low quality to print out - even if it's a screenshot.

This works very well for art work (paintings and photographs) but I'm not certain how well it will work for a cartoonist. The above solution (drastically reducing image quality) may not work on something as simple as a cartoon with a few lines and text.

Mayo
  • 286
  • 1
  • 10
  • 5
    Certain image filters or vector processing could probably make simple cartoons workable unless the quality is *very* low. – Alexander O'Mara May 11 '16 at 15:05
  • 3
    i was thinking along the same line about reducing quality, but cartoons, unless very detailed, are easily vectored – RozzA May 11 '16 at 22:06
  • 3
    His cartoons are extremely detailed and heavily colored(if that makes a difference). I do believe reducing the image quality will have a considerable impact. – Satej S May 12 '16 at 05:02
  • 4
    Of importance: don't reduce the image quality below the image display size. Meaning the browser should not be scaling up the small image to fit the image tag. But remember this hurts usability because people on high resolution (e.g. retina) screens are seeing a blurry image. – Keavon May 15 '16 at 07:30
7

Consider that an comic artist's business model is fandom. They make money by having fans*. Not so much because of the sales: sales happen because they have fans willing to pay.

As such, limiting options, like lowering quality and so on, are the wrong solution to the problem. What you actually want is more fans willing to buy comics/merchandise etc.

The solution is to give fans a good impression. Then make buying into fandom in a easy and non-condescending step.

I have, at one time or another, been asked to rebuild art from all the methods described here. Even the flash one. The thing is that the only thing one cannot do is build a print resolution image out of low res picture. If the user can see it, they can steal it. So, the only solution is to degrade quality, but this does not bode well for the business case.

Don't make the mistake of concentrating on the sale that you cannot make. Instead, concentrate on the one you can make. What you want to do instead is to periodically do a reverse image search and remove people who commercially abuse your images on the internet. Crooks rarely bother to do much to the images. I have seen low res jpegs printed on t-shirts and there's nothing you can do about that.

You could also limit the substance of your promo material. Maybe only showing a certain part. But again, this degrades quality. The bottom line is having a good business plan makes your information safer or at least "sacrificable".

* or by making works by commission, but that is a different business model. If that is the case, then you need to show style to new clients.

schroeder
  • 123,438
  • 55
  • 284
  • 319
joojaa
  • 475
  • 4
  • 11
  • 1
    while a useful business approach, it does not address the technical question being asked – schroeder May 11 '16 at 22:15
  • @shroeder it does not? It answers that all ways except making small images are easily circumvented. – joojaa May 12 '16 at 03:56
  • I don't think you actually that "all ways except making small images are easily circumvented" – schroeder May 12 '16 at 03:58
  • @shroeder i did try to make it subtle as not to underline it but i have clarified things will clarify more. – joojaa May 12 '16 at 04:06
  • 8
    `Don't make the mistake of concentrating on the sale that you cannot make` , this is actually a very valid point. – Satej S May 12 '16 at 04:59
6

I'm surprised no-one has mentioned Digimarc or the EURion Constellation yet.

Digimarc

Digimarc is a human-imperceivable digital watermark that embeds authorship information into a raster image. Adobe Photoshop (until the CC release) had the Digimarc Reader plugin built-in and would scan every image opened and display a warning to users if they opened a watermarked image. This was a great coup for Digimarc because it created a huge market for their product overnight. Unfortunately, Adobe removed this plugin since the first CC release, so it's of less relevance today.

EURion Constellation

https://en.m.wikipedia.org/wiki/EURion_constellation

This technique requires more trickery, as you would need to embed the Constellation into the images yourself, and in a robust manner - but if you can pull it off then Photoshop, printers, all kinds of image processing tools will refuse to handle your images.

Dai
  • 1,686
  • 1
  • 13
  • 20
  • Probably the most effective answer here. Basically uses anti-counterfeiting technology. – doug65536 May 13 '16 at 14:33
  • I tried to print the EURion wikipedia page once, the image came out fine. I'm not convinced it's actually effective for anything. – xorsyst May 13 '16 at 15:29
  • He did mention watermarking in the OP, and said it wasn't good because it affected visible quality. – JDługosz May 15 '16 at 18:25
  • What good is that going to do? At best, with a lot of effort, you'd be able to track who is pirating your images. And then what? Suing your potential customers is an idea so stupid that [even the RIAA stopped doing it 8 years ago](https://hbr.org/2008/12/why-the-riaa-stopped-suing/). Meanwhile, you've spent a lot of effort on money on something that, at best, does nothing and at worst, alienates fans and potential customers. – HopelessN00b May 16 '16 at 14:58
5

Well, i've tackles this a few times. It's impossible to stop. I can bypass all these measures in 2 seconds, but they would scare me off because of the doubt if you are serious about persecuting.

  • Use a canvas to draw the image from a byte stream supplied by a websocket.
  • Disable right click via css.
  • detect when printscreen has been pressed($(document).on('keyup',function(e){if(e.which == 44) { SHOWLEGALWARNINGFUNCYOUWILLBEPROSECUTEDTOTHEFULLEXTENDOFTHELAWfunction();logipdetailsforpresecuting()}
  • show really scary legal warnings in the source code of any who inspects, naming law firm and lawyer who will prosecute. Scare them.
  • Detect when f12 is pressed. do the legal warning function thing just as with printscreen
  • Run a continuous scan for foreign javascript objects registered against window.
  • have all your rendering take place form an inaccessable anomynous object wrapped in an anomynous function, so no value can be read from it.
  • use unique use once keys to request an image from the websocket, if it's reused, flag and prosecute
  • Have the image hide out of view when tab is blurred/inactive
  • Post a reporting tool on the website for the fans:
    • We are very popular, and we are curious where you have found us! Let us know the website, shop, newspaper where you saw us and make a chance to win a signed copy of cartoon! disguised as a contest, you let people do the sleuthing for you, which you can push through to your lawyers to cash in.

This makes it tricky, and shows you're willing to prosecute, which will deter a lot of oppurtunists.

Try to implement a bit of social engineering. trick the copycats into giving up their credentials so you can prosecute them. It's all fair to lie about your intentions imho. They shouldn't be so stupid then to give up their details ;-)

Tschallacka
  • 293
  • 1
  • 9
4

His cartoons are extremely detailed and heavily colored

Creative solutions:

  1. Adapt the old map-making trick of hiding cartographer's name in a detailed area (see top answer on this GIS question). 'Supersize' it to spell their name across the cartoon. Promotes them without putting watermark across artwork.
  2. Try to match a grey watermark to the horizon/other area of the image and fade it so that it partly blends in. Idea is to mark images in a way that's visible but doesn't get in the way of the cartoon. See this example photo.
Dub Scrib
  • 41
  • 3
3

If right-click is disabled and the image can't be copied from a simple screen cap then your best bet is to make pulling the image from the browser buffer a nightmare. You can programmatically vivisect the image and have the image sections that get stored in the buffer require painstaking effort to rebuild into the original, emphasis on pain. Use the whole toolbox to subdivide the original image; scale, invert, rotate. It's labor intensive to have the script reassemble the image, but the users pay in CPU Clocks rather than bandwidth. With random seeding the one script is infinitely reusable.

  • 3
    Why do you think that copying an existing script that someone else wrote is "painstaking effort"? You're aware that for every single transformation you do, you have to send the user an executable program that undos it and assembles a complete picture? They only have to copy that code. – Voo May 13 '16 at 06:18
  • @Voo You make a great point, but it would need a developer. I doubt anything can stop a developer from getting the image from a web page. Screenshot would work though :( – doug65536 May 13 '16 at 14:25
3

If you are looking for things that make the image slightly harder to copy and arn't worried about handling things like screenshots, which are by definition lossy, then you may be interested to to try BASE64 encoding the images and putting them into the page's source.

See here: https://stackoverflow.com/questions/1207190/embedding-base64-images

This seem fairly straight forward and allows you to not have a separate URL for the image. Pairing this with overlaying a transparent div, may be a relatively effective solution against non-developers.

Once again, this offers zero defence against screenshots, but I don't think you will find a good solution that is technical in nature.

sixtyfootersdude
  • 530
  • 3
  • 11
  • 5
    Since when screenshots are lossy? – Oleg V. Volkov May 11 '16 at 23:49
  • 4
    it's a good thing that it's **totally impossible** to write a program to extract base64 encoded images from a HTML file and save them to image files. Mission Accomplished. – cas May 12 '16 at 03:33
  • 3
    @cas he does preface the suggestion with "slightly harder to copy" – schroeder May 12 '16 at 04:23
  • 1
    people looking into using the user's art to make money out of it aren't going to be deterred by *slightly harder to copy* – njzk2 May 12 '16 at 13:32
  • 2
    `screenshots, which are by definition lossy` I took a screenshot of this answer and pasted it into Paint. Then I took a screenshot of the Paint window and pasted that in its place. I saved the result as a PNG file, then opened that file in Windows Photo Viewer, took a screenshot of it, pasted that into Word, took a screenshot of Word, pasted that into an email and sent it to myself. Then for good measure, I forwarded the email in my inbox to myself again, and took a screenshot of that email, and pasted it into Paint. Guess how much loss there was? – Dan Henderson May 12 '16 at 18:38
  • 7
    (Hint: [this much](http://i.stack.imgur.com/5OBGV.png).) – Dan Henderson May 12 '16 at 19:07
  • 1
    @njzk2 it depends on the risk evaluation of the OP – schroeder May 12 '16 at 22:07
  • @cas - In response to your comment, I have **BOLDED** part of my initial answer that I think is relevant. – sixtyfootersdude May 12 '16 at 23:23
  • @DanHenderson - Ok agreed. – sixtyfootersdude May 12 '16 at 23:24
  • 1
    s/non-developers/non-developers who can't use google/ - your idea is trivially overcome, wastes bandwidth for both the site and the user (base64 increases file sizes by at least 1/3) and just annoys legit users by slowing down their browser making it decode the images with javascript. – cas May 13 '16 at 00:17
  • @cas even then - browsers allow opening of base64 encoded images ANYWAY. It's not an actual measure. Not only that but it's actually easier to save them than doing the JS tricks and overlaying random stuff on top. The browser already decodes them and treats them as images - right-clicking allows to save immediately. Essentially, all that bas64 encoding would do security-wise is nothing at all. All you've done is make the payload bigger and the users have as easy time getting the image. The only "problem" they face is that if they copy the URL (agian - right-click) they get a really long string – VLAZ May 13 '16 at 10:41
  • Opera can simply save Base64 resources as images, or even open them in a new tab. – Stephan Bijzitter May 15 '16 at 13:58
3

As mentioned in symcbeam's and Mike Manfrin's answers, if you want to make it impossible to download the image directly, you could break it up into several pieces and reassemble them on the page.

This means there is no single element to save, which makes it significantly less convenient to make a copy of it, although of course it's still definitely possible to screenshot and crop. But that is probably enough to discourage a lot of casual readers.

I would consider this a fairly polite way to prevent downloading, because it doesn't violate the user's control of the page in the same way that right-click blocking would. As long as it's implemented in a robust enough way that it doesn't hinder other people's experience of the page.

mwfearnley
  • 132
  • 6
2

Another easily-defeated trick is to create an “animated” GIF with a delay of 0 and a loop count of 1.  For example, download this:

   Scott's cat

and look at it in something other than a browser.  (I presume that there are tools that can get to the picture of the cat easily enough, but Microsoft Paint is not one of them.)  A slightly advanced version of this trick combines with the “break the image into pieces” trick, adding fragments of the picture as additive partial frames.  Note that this works even if the user has JavaScript disabled, but  might fail if Animated GIFs are disabled.

GIF created at EZGIF Animated GIF Maker.

  • It took several tries, but I finally managed to find a program that would fail to display the cat: LibreOffice. All the image viewers I tried showed it just fine. – Mark Jan 25 '18 at 23:10
1

It won't stop the "screenshot and open paint" approach but one thing you can do is to watermark the images and then when displaying the images in the web browser overlay another image over the first that removes the watermark.

So one image on its own you see the cartoon with watermark. Second image on its own you just see the negative of the watermark. Put the two together and you see the cartoon without watermark.

The other answers are correct though that this is not possible to solve with a technical approach. You can prevent the less technically inclined users from accessing the images but anyone who knows how to screenshot will always be able to get them. In order to display the image you have to send the image in some form. Once it's on the computer to be displayed a sufficiently determined individual can copy it.

Tim B
  • 446
  • 3
  • 5
1

Break up the image in to multiple smaller images, and then use your frontend code to stitch them together.

You will not need to implement blocking right clicks with this approach (which is horribly annoying). This form of protection will have no visible effect on the website, but will make it very difficult for people to simply take the images.

People will still be able to take screenshots, and in that case you can add JS listeners to the common button presses associated with screenshots (Shift + Command on mac) which will then hide or obscure the cartoon.

Mike Manfrin
  • 111
  • 2
  • 1
    I actually think breaking up the image could function as a fairly reasonable and polite deterrent - it requires the user to take a screenshot, crop and save (or save multiple images and reassemble), which is significantly harder than the usual method. But trying to preempt a screen capture event - there's so many different ways to capture a screen, you might as well just let them do it if they're prepared to go to that much effort. – mwfearnley May 12 '16 at 21:39
  • Yeah, this is a battle you simply cannot win. – Mike Manfrin May 12 '16 at 21:42
  • Yeah. But I thought I'd mention it anyway, just because JS listeners is a distinct suggestion, and I'm not sure I'd put it in the same post. – mwfearnley May 12 '16 at 22:50
  • You're definitely right though - blocking right clicks is horribly annoying. But I think that JS listeners could end up being annoying in the same way. – mwfearnley May 12 '16 at 22:52
1

An idea: There is a watermark on money called the EURion constellation that tells printers not to reproduce it as one of the many safeguards against counterfeiting. A printer that sees this mark anywhere in an image should lock up, and it can be pretty small and innocuous.

A quick google search shows that it's not always supported by printer manufacturers, but apparently Photoshop will lock up, throw an error, and refuse to edit the file.

But I have to say that I agree with the general consensus that it's not worth giving your fans a hard time to guard from pirates. If an image can be displayed on screen, it can be screenshot-ed, it can be printed. Only use a reasonable resolution for the web, to make sure pirated prints are low quality, but beyond that, pirates are an issue you either have to deal with through the legal system or just accept as a price of business.

Matt O'Tousa
  • 111
  • 3
1

You can use all the techniques you mention and to a certain extent it will hold people with less skills back, but the images are out there and in the last stage its up to the persons decision. So, don't forget to inform them. If they know there is copyright they can make an informed choice. Otherwise they just don't know if licensing applies.

How can I inform people?

My advice is to add copyright information at Exif level. Exif is a metadata format for images. Exif has fields for author and copyright, among other details. I think that in general more and more people are aware of copyright issues. Speaking for myself, when I need images I often google for them based on copyright information. Adding this kind of data in Exif will allow the copyright to travel with images (and not exist only in your website where the link will be lost once the image is copied. Another advantage is that Google and other search engines/software will be able to display your images and/or warn about copyright issues. Most people, at a professional level at least, will be reluctant to use a copyright image. This holds particularly true with the size of the organization and impact of the image in the market. If you don't do this people just won't know. Specially if they get the image in second or third hand and you can't "blame" them.

I know this is not a very fancy or high tech solution, but security starts with information. Sometimes people just "step on the grass" because they are not aware they shouldn´t. This holds particularly true in new areas where "etiquette" is still very rough and new. This is not the final, best, ultimate solution but it's a good principle. If people don't care than there is something different, but start by stating a policy, in this case under the form of copyright.

nsn
  • 726
  • 5
  • 8
1

Ask nicely

As the other answers here show, this is a social problem that isn't fully solved with technology alone.

Consider adding a message such as:

This artwork is my livelihood - if you like it, please buy a copy here (link to store)

This can be just one part of your overall strategy - watermarking can be added just to the free-to-view versions, and removed from the paid versions, for example.

Alex Shroyer
  • 233
  • 3
  • 8
1

We're working on methods to prevent users from ripping off his work and republishing it, or more so from reproducing it offline, be it on mugs, or similar.

Sadly people either don't know, or don't care that it is illegal to steal someone's work and try to use it on mugs, shirts, etc, and try to sell it, as if it was their own...


One easy step to checking if someone is using your images is

You can easily do a Google image search to see if someone is trying to use the work in such a way as to make a profit on your work.

By Google Image searching you will find any related images to the one you have posted, and if someone is trying to make money off of your designs, you should be able to find it, but sometimes Google Image search isn't perfect, but it does a great job.


As for "how to stop someone from selling your designs" there is a really simple method, besides technical stuff...

That is sell Mugs, shirts, etc YOURSELF.

This way, if someone does try to rip off the work, there is no way that they will be able to make money, because you are the "Official Store" and who is going to want to risk a 3rd party, instead of the artist's store?


Now, as for technical aspects, towards comments such as "republishing" his work, there are a few steps you can use to at least make it harder for people to steal his work.

  1. Watermark

  2. resize/lower-quality of the images

  3. Link images from another site, which I believe will not have it as a loaded resource, but I could be wrong.

  4. Disable print-screen. I am not sure how to do this, but I have seen it happen before, but there might be ways around that, but still makes it harder for users.

  5. Detect action of print screen, right click and trying to save the image, etc, and call a command that would either overlay something over the image to block screen shots, or replace image to stop saving the image(have not tried this, so not sure how doable it is, but think it could work). You might also be able to detect and block the inspector, or be able to alter the source, but again not too sure.... I'm going to try this stuff out myself as well, so it's just theory for now.

  6. Embedding special meta-data information into the Image that provides author information and copyright jazz. I don't know about this in detail, but have heard about companies doing it... This will only help if someone tries to sell the image online, offline wont help you.

  7. You also can implement other things such as disabling right clicking, and even if some of these things can be bypassed, the question is "are they smart enough to bypass it?"

Some security is better than none


Overall, there are a bunch of different options to at least make it harder for someone to not only steal the images, but try to make a profit.

I say if you make a store yourself, you will eliminate the biggest threat that seems apparent, and that is people trying to make money off of your designs. People only want to make money, so if that avenue is impossible, since you are already doing it, then they would probably try their time somewhere else.

Coupled with added protection against stealing the images, potential thieves will most likely look elsewhere, as they don't want to waste time, on something that isn't going to be profitable.

XaolingBao
  • 897
  • 2
  • 9
  • 21
0

I agree with everyone who says that there's no point in doing it technically and that you should rely on existing copyright law.

Having said that, I once asked a S.O question, which I can't find, or recall the answer to (although I suspect it was "don't try, rely on the law"), where I suggested dividing the image into squares, like a chess board, then randomly displaying some as parts of the image and others as transparent, quickly enough so that the human eye thinks that it sees an image, but screen capture won’t be viable.

I don't know if this would work, or what sort of refresh rate you would need, but you are welcome to try (please post back here if you get it work).

Personally, I wouldn’t – indeed didn’t –bother.

  • I believe the dividing up the image is a pretty good suggestion. Regarding the copyright laws, enforcement in the host country would be nearly impossible. – Satej S May 12 '16 at 07:56
  • You are welcome ot the idea. If you get it workimng, could you post back here? Maybe even link to a demo? Good luck! – Mawg says reinstate Monica May 12 '16 at 08:09
  • 2
    And if copyrighi won't help in your conuntry, maybe better marketing would? Just accept that there will be rip-offs, but offer a better product, sell it direct from the artist's web page, etc? Rip-offs will tend to cheap & sell in street mrkets, not better stores, so target them (with better quality products)? – Mawg says reinstate Monica May 12 '16 at 08:12
  • 1
    I can take many screnshots and median filter it out and see exactly what the eye sees or just read your source files. – joojaa May 12 '16 at 09:12
  • A very good point (+1), but even if this method can't prevent it, it can make it very difficult & time consuming. Imagine having to do that wit say 64 images for eahc cartoon. – Mawg says reinstate Monica May 12 '16 at 12:31
  • 6
    I expect the flicker would be noticeable and you can guarantee at lease some users noticing and being put off by it. The last thing you need is to trigger epilepsy or something! – Tim B May 12 '16 at 13:08
  • 1
    Wah! I didn't think of epilepsy! Scratch the whole idea. – Mawg says reinstate Monica May 12 '16 at 13:11
0

In addition to some of the prevention methods already mentioned - disabling right click and using a transparent overlay - you can embed the image with metadata about the owner, author, company etc.

It doesn't prevent them from copying the image, but it does make it much easier to find and prove they copied it if they do. It's funny to see just how many people rip off images (innocently, ignorantly or on purpose) who don't strip out the metadata.

I think metadata is at least part of the information that Google's algorithm uses to find visually similar images.

Ultimately, I agree with what others have said - you can't stop someone who's truly determined to get the image. You couldn't stop me if I was so inclined. After all, once it's been served to them, the data is already on their computer. If they know html they'll get it, and if they know about metadata they'll strip it, but at least you can make it much more difficult than the simple right-click, save as..., preventing the average user.

Dom
  • 300
  • 1
  • 2
  • 9
0
  1. Put a notice that you take copyright infringment seriously
  2. Take copyright infringment seriously
  3. Put protection for occasional users (you prevent just 90% of problems)
  4. Even hardest protections can be breaked

Note that most copyright infringiments are due to users that want just to have some cool image to be posted on a forum or on a blog and may be simply in good faith, so a simple protection is enough for 90% of cases, said that: if you make sure copying image is not trivial, then you can even more easily find real copyright infrigiments and make a DMCA complaint to search engines and use proper forms for most common platforms

Most users just reblog content so you have probably to do DMCA complaints to several different platforms at once (google, youtube, tumblr. etc..)

Be sure to notify in some way that, users will then

  1. Be discouraged for future infringments
  2. There is the chance you get material removed without DMCA

In the end:

  1. Be aware that copyright infringment may be in reality a phishing tecnique (the same way some bloggers get caught when they visit links "linking to their blogs").
  2. Always think how much doing Copy-protection harms you (you spend time and resources that maybe are not worth it)
CoffeDeveloper
  • 516
  • 3
  • 12
0

Ultimately, if you put an image of a certain quality on a screen there will always be some way of copying it. This is especially the case for cartoons etc where it is usually fairly trivial for a competent draftsman to copy a style, even if you make it difficult to download the digital image.

I think that the pragmatic approach is to think strategically about how the value of the intellectual property works for the business rather than treating it as an abstract 'right'.

There is also a potential issue that being excessively litigious or aggressive with IP protection can end up alienating fans and becomes self defeating as you are losing real sales for the sake of protecting imaginary ones.

The approach I use is just to accept that any images that go on a website are in the public domain and select them accordingly. Similarity it may actually be better in the long run to explicitly grant an open license for non-commercial use. That also has the advantage that you can permit limited use without running the risk of compromising ownership due to not enforcing copyright and you still have the option to prosecute blatant commercial infringements.

In this case a prominent but unobtrusive watermark may be the best option eg the name of the website. This means that you still get exposure, credit and publicity from sharing by fans and removal of the watermark makes any case for deliberate infringement much clearer i.e. if somebody goes to the trouble of deliberate removing a watermark then it it much harder to claim fair use or an honest mistake.

Similarly if illegal merchandise is a concern then clearly the website should emphasise the legitimate products which are available and clearly signpost users to legitimate sources. Also just spelling out your position on copyright on the site in a friendly and non-aggressive way can help to build relationships with fans.

Ultimately the best way to preserve the genuine value of intellectual property is to build a loyal and connected customer base where both sides see the value in the same way.

Chris Johns
  • 1,226
  • 1
  • 8
  • 5
0

You can go the Deviant Art / Shutter Stock route and put a big watermark over the image when it is displayed on the public internet. Then have a paywall where users can then download unwatermarked original highres versions.

Allison Wilson
  • 429
  • 2
  • 9
-1

One option is to add animation to your images. You can't screenshot animation. That also makes it a problem for selling hardcopy versions in comic form, though: fans will say "eh, it's not as good as on the web."

There are plugins to record, for instance, YouTube videos, and flash files can be saved. However, the work required to create an animated tshirt or mug is beyond most cafepress users, so animating answers the original request, which is not "help me stop people copying the graphics" but "help me stop people from putting the graphics onto mugs".

However, for a comic artist, "become a cartoonist" is arguably not a valid response to the question "how do I stop my comics from getting put on mugs?".

In which case, the second option is to provide a hotlinking URL for the image at the bottom of the page, and allow people to use and perhaps even remix it under a Creative Commons noncommercial license. Then when you find people selling mugs, ask for a hefty slice of the profits.

Dewi Morgan
  • 1,340
  • 7
  • 14
-2

Create an animated GIF from the image. Each frame shows part of the cartoon. Increase the GIF speed to the maximum possible. So, that way, to recreate the cartoon the person will have to copy-paste some pieces of the image. But it'll be fast enough so that the website user won't notice it's some animation.

If you use few frames (say 3 up to 5), the GIF will be very fast.

woliveirajr
  • 4,462
  • 2
  • 17
  • 26
  • 4
    The fastest reliable flicker rate puts it square in the middle of what will trigger epileptic seizures. – Mark May 12 '16 at 20:37
-8

If you use adobe flashplayer to display the images, it would be impossible to right click and download (it just shows adobe flash player options). Other methods might be able to get around it, but it would be difficult, especially if you only allow adobe flash player and admin to access the img's url. (if it has the right ip, then let it through, else, throw the 401.4 or 403 error codes (blocked by filter or forbidden, respectively).

PMARINA
  • 117
  • 3
  • As Sjoerd said, people can always take screenshots. You could show a low res image online, and only allow high res if a consumer pays for the design or gets your approval. You could also just add his/her signature to the image and make it overlap to an important part of the comic, so that photo editing it out is a pain/obvious – PMARINA May 11 '16 at 13:39
  • 4
    This is a valid answer - however, do you really want to put your visitors at risk by asking them to install flash? – Lukas May 11 '16 at 13:41
  • @Lukas, good point. Flash is widely used so I think it isn't too much of a risk, but then again, plug-ins can always be risks. – PMARINA May 11 '16 at 13:44
  • 12
    Many browsers don't support flash so they wouldn't see anything at all! – David Glickman May 11 '16 at 13:45
  • @DavidGlickman the major browsers do, and I'm guessing that the majority of users will be using such browsers such as chrome, opera. (Yes, I know that plugin support is being taken away, but until then, this should work) – PMARINA May 11 '16 at 14:00
  • 7
    Major mobile browsers don't, and support is on the decline. Downloading a SWF or monitoring the URL requests it makes is also relatively easy, even if a screenshot is easier. – Alexander O'Mara May 11 '16 at 15:01
  • 7
    Designing a site to require flash is a good way to design a site to fail in the next 5 years, if you don't consider it to have already failed in that it will work on almost no mobile device. –  May 11 '16 at 19:58