Discouraging users from copying images off a website?

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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.

Answer 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.

Answer 8

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.

Answer 9

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 ;-)

Answer 10

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.

Answer 11

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.

Answer 12

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.

Answer 13

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.

Answer 14

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:

  

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.}

Answer 15

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.

Answer 16

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.

Answer 17

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.

Answer 18

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.

Answer 19

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.

Answer 20

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.

Answer 21

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.

Answer 22

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.

Answer 23

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)

Answer 24

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.

Answer 25

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.

Answer 26

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.

Answer 27

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.

Answer 28

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).