10+ Ways To Protect Images From Being Stolen
Protecting images online is a difficult, almost impossible, mission to accomplish. At the end, the image is there and a "print screenshot" command can grab it & no way to stop this.
But, there are various ways to harden the process & make it not worth trying like disabling right clicks, using images as backgrounds, adding watermarks to them & more.
Here are the good practices of these options:
Hide The Images
Put A Blank File Over The Real Image
This method will make the real image unreachable unless checked from the source.
You can use the original image as a background & put a transparent-blank file over it that matches the size of the real image.
For ex:
<div id="image1" style="background-image: url(originalImage.jpg);">
<img src="blank.gif" height="250px" width="300px">
</div>
So, when the image is right-clicked, it will be the blank.gif that can be reached.
There are also 2 JavaScript framework ready solutions for this:
Auto-Slice The Images
Super Simple Image Tiles
This is a very effective image protection method.
An image is automatically sliced into pieces but presented as a whole. The original image is also hidden as watermarked.
Some serious disadvantages of this method are:
- adding a relatively more overload to the server as multiple requests will be made
- you’ll have lots of image files
Using Watermarks (Pre-Generated)
Adding a watermark to an image is an effective way of protecting images.
Besides the cons like:
- image not being presented clearly (there will be a watermark on it!)
- can be downloaded and cropped
as the source file is marked, there is no way to get the original image.
There are several solutions to watermark images with ease. From modifying it via Photoshop, GIMP, etc. to some web-based watermarking services like:
PicMarkr
A free service to watermark images online.
Multiple images can uploaded once or they can be grabbed automatically from Flickr.
It is possible to apply a text or an image watermark.
WatermarkTool
Another web-based free watermarking service.
You can upload images to be watermarked, customize the watermark text to be applied & download the updated images.
Using Watermarks (Generated Server-Side)
It is possible to automate the watermarking process at the server level. Once applied, this is the easiest method to use.
To mention, implementing these methods require at least a bit of scripting knowledge.
Here are several libraries & examples for this:
Asido: PHP Image Processing Library
Asido is a PHP image processing library that can work with GD2, Magick Wand & Image Magick.
Here is a detailed information on watermarking capabilities of Asido.
Other PHP solutions:
- Put watermark on images using PHP
- Watermark your images with PHP 5 and GD
- Watermark images on the fly in PHP
ASP.NET Solutions:
- Thumbnail and watermark images on the fly with ASP.NET
- Watermarking Images in ASP.NET with an HttpHandler
- CoolWatermark (paid)
Ruby Solutions:
Use Flash To Show The Images
swfIR
swf image replacement displays images inside a Flash file which makes right-click impossible.
And, images can still be styled with CSS properties
On the other other hand the image source is mentioned at the source which again can not provide a total protection.
Browser Based Image Protection
Disable Right Click
Disabling right click via JavaScript is a way to start protecting images. But it is a simple step which can stop novice users as it is possible to disable JavaScript or get the path to the original image by reaching the source.
Is this a good method? Definitely no as you will be disabling all the right-click options like print, copying the link, etc. (updated 23 Jan 2009)
It may be a better solution to disable only save functions which this jQuery plugin can help.
Disable IE6 Image Toolbar
When an image is hovered for a while, IE6’s image toolbar appears automatically with an option to save the image. This can be disabled too.
Add the following code between the head tags of the webpage.
<meta http-equiv="imagetoolbar" content="no">
Any more image protection solutions you want to share?
- Tags:
Photoshop Php Ruby Watermark
- Filed under: Extras, Info, Other License
- 42 Comments
42 Responses for "10+ Ways To Protect Images From Being Stolen"
Awesome, exactly the thing I was looking for. Thanks alot!!
Most of this is useless since you have access to all media of a webpage via Firefox’ media manager, regardless if you try to protect them in any way mentioned above…
So you have to live with the fact that content on the web is downloaded to your browser to see it and thus can easily be stolen.
Thanks for the hints anyway.
)
Excellent article. I think watermarking is the better one out of all because that way you can still get the advantage from Google Image Search.
One point that should be mentioned about ImageTiles is that the user can choose how many tiles to make from each image. It can be made into as few or as many as you’d like.
Also, the source is then watermarked, so even the FF media manager cannot recover a full, unwatermarked image.
using flash to display the images is also an option!
@dirk,
Thanks for that. I knew that something serious was missing. Added that to the post.
@dirk,
many people think that flash creates a blackbox that doesnt allow users to find image paths.
The truth is with tools like Safari’s activity monitor, or FF web dev toolbar, you can see all the files flash loads in.
unless you compile each image in the SWF, it can be found in an unprotected form
Another option is to configure your web server to check the referrer – if its not from your site then refuse to serve it. This can be used effectively to stop people using your images remotely on their site.
You say “almost impossible.” Sorry it is _absolutely_ impossible because of the way the internet works. All these techniques are a waste of time. If you don’t want people downloading your images, don’t publish them on a publicly accessible website. That is the only fool-proof way but once a copy is downloaded, you have no control over it thereafter so even if the copy originated from a private site, it can still end up in the public. The best you can do is prove authorship through watermarks, but even those can be removed or would be destroyed through derivative works. Plus there’s absolutely no protection against a user simply taking a screencap and pasting into a graphics program. The concept of digital “property” is a farce and can only be propped with dubious legislation. Stick with physical media (at least until the universal assembler is invented). You’re better off using digital copies as a marketing tool to advertise your services and (higher-resolution) physical works.
I agree with everyone who has pointed out how easy it is to rip off images, regardless of the protections that one puts on them.
But the notion of “protecting” images on the web is kind of a misnomer anyway. The appeal (and purpose, really) of the internet is the exchange of information…and of course, people want that information for free and will get it for free whenever (and however) possible. So if you have images you don’t want ripped off, don’t put them on the web, or watermark the hell out of them. Such an approach, of course, will make you immediately irrelevant to most everyone, but at least your precious pictures will be protected…
I hate to say this, because you’ve obviously put a lot of effort into this post, but really people should give up trying to protect their images. There’s really no effective way.
Some of the above solutions are easily circumnavigated (there’s a Firefox plugin to re-enable right click if it’s been disabled, I can grab a screenshot of a flash image), some of them lower the quality (ie watermark), some of them confuse accessibility (slicing your image into 6 pieces mean you need 6 alt tags to validate, so what do you put into them?).
Now hotlinking can be prevented as per Eno’s comment, but if you really want to stop someone actually getting the image, don’t put it on the Internet!
@Brian, @existdissolve, @Stephen Cronin, @xanathon,
I totally agree that it can not be protected but it is sometimes worth to make it difficult.
Disabling right-click & running a warning at that time may have a stronger effect to mention that the image is copyrighted, or showing them behind Flash may prevent search engines from indexing them..
But at the end, I think the same, if it is on the web, then there is no safety.
Hello
Regrettably, there isn’t any way for a perfect image protection from being stolen, except of a good watermark. Indeed, a simple screen capture cancels all protections which not really touch the image (the watermark is also the only good one !)
On the other hand, there are some other solutions to “protect” (sic) images :
- add a hotlink detection (with a .htaccess file and a php script saving all referers of each image, for example)
- protect images directories on your website (with a simple “index.php” empty file)
I have written a similar article in french last year => http://blog.aube-nature.com/?2008/01/22/197-protection-photo-site-web
Nice post. Most of your suggestions could thwart a large percentage of casual users. But anyone who know’s what they’re doing can get past any of these in a second – use with caution.
I don’t think there is any truly secure way to show images online without interrupting them with watermarks. Even slicing the images up (while annoying for would-be content rippers) doesn’t really work because you can always screen-grab as a last resort.
There is no method to protect your imagery from being misused. If a user is able to see it, then there is a way for the user to download it. Calling it practically impossible is wrong, it is impossible.
All you can do is watermark your images, as discussed, to ensure people maintain proof of ownership. You can even embed extra data in some image formats (such as PNGs), without affecting its content.
“Disable Right Click” is one of the most useless relics of
the early browser days to still have some legs in web design. When you disable right-click, you disable right-click on everything. Which means people who wish to right-click links, or copy text, are completely screwed. Ultimately, when a use disables right-click, I just refresh the web page with Javascript disabled.
Using Flash to display the images is a poor substitute, as it not only requires a separate plugin (which a nightmare for some users), but it means your images aren’t getting cached by the browser (so your server load will increase). Plus, in the end your browser is still making a request for the image (via Flash), so you can intercept the full image URL regardless (this is how its still possible to rip music from sites like MySpace).
One option would be to encode your image data, deliver that to Flash, decode and display it. But, I can still press Print Screen or use Grab.
Totally agree with the comments about protection being the wrong way. Be happy if somebody really likes your work enough to share it with their friends. Rather anticipate on that to make it possible, give them a link to donate or something. And above all, put in an active effort yourself to get your work out there where it really counts, otherwise you would be better off printing it and putting it in a safe.
There´s no way to protect 100%.
Still have the Print Screen Button, View Source and a lot of FF plugins…
I’ve been watching this site for its great posts, and this one will really help out – it’s always so difficult to find something like this, and putting them together, makes it easy to use one.
Yeah I agree with many, but the in-experienced user doesn’t even know those shortcuts.
Stealing:
given to or characterized by theft.
Theft:
the act of stealing; the wrongful taking and carrying away of the personal goods or property of another; larceny.
What you are describing is not theft. Taking a picture of someone’s car does not deprive them of their car.
What you are describing is ‘copying’ at best and copyright infringement at worst. To call ‘right click->save as’ theft is a misnomer. Theft would be breaking into the server, downloading the art and removing it from the server.
90% or more of all image borrowing is for non-monetary gains. Get better at taking photos and worry less about being “borrowed”. Who cares if a kid puts up a blog post with your image? Call it flattery, I do.
Can we just stop screwing around with right mouse button. The technique is so useless and does absolutely nothing to protect the images but just irritates users because you remove legitimate uses of the menu. E.g. I may want to print the page or select and copy text or open a link in another tab/window. If you really want to protect your content you shouldn’t make it available online. If you do, someone who really wants will find a way to get it.
Nice. I had written a similar article with a web and desktop solution over here:
Watermark and Add Copyright Info to your Images on your Local drive using C# and VB.NET
Dynamically Add Text to Images Retrieved from the Database using an ASP.NET Http Handler
…or *10 Ways to Break Usability on the Web*.
People who actually want to copy your work for malicious or commercial use are going to have the skill to get around almost all of these options, even watermarking, unless you make it stupidly insidious.
So the only people this will really hurt are normal end users, who might just like the image, and want to print it, or save a local copy for their desktop, or any number of fair usages they will no longer have.
Congratulations on spreading more DRM.
Really, what we’re talking about is preventing people from *copying and archiving* of images.
In a sense, images are already copied so they can be displayed on the person’s computer (ie. a file is transfered from a web server to a local computer). Some people object to the user viewing the image out of it’s original web page context.
Personally, I feel that it’s better to focus on providing value (ie. more good images) then people will keep coming back (and clicking on ads, etc) than worry about individual users looking at locally stored images at a later date.
That’s totally crap. “Hotlink detection”, “traffic theft” vs. “prevent image copying”. Instead motivate your users to deep link to your file, the source is still there, it’s the url. No need for image destruction (watermarks) or other usability disasters (change mouse behaviour of _user applications_).
Don’t put information on your side, which should’t be copied. – It’s the internet, that’s how it works.
You can’t defeat the net, but your visitors and yourself.
Sorry, but this is a complete waste of time. There is *no* good way to protect your images and *all* of these methods have drawbacks that are either very user-friendly (let me use the right mouse button to select this piece of… wtf? ‘This image is copyrighted’?) or cripple the image (don’t get me even started on watermarking).
When you put something on the internet, accept that it might be stolen and used in ways that you don’t want.
Surprised to see this much “no protection must be applied” comments. I agree with most as I’m aware that there is no 100% success and in most situations think the same. But:
A talented thief can stole everything, whether it is an image or a masterwork in a well-protected museum.
Car producers create high-tech methods to prevent car theft like immobilizers, card entry systems, even alarms. At the end, they can be & they are stolen.
You can just make it difficult. And if that image needs to be shown but musn’t be stolen, for me, you should make it difficult.
The oldest right-click method, you can still make it work for you. If you apply it only to related images and display a warning that “the image is copyrighted” & show the real context menu later, this is something. You don’t break usability, don’t limit the user but acknowledge them.
For ex: if you’re an icon designer, then you need something (widely used: watermarking), because you can not market it without showing.
Like mentioned in the post, most methods are for preventing novice users.
And to be clear, “howmany times an image is stolen” is more important than whether it is or not.
wow..nice tips..
sky
I promise every designer here one thing, and that is if you disable my context menu or put your image inside a flash container, that will be the last time I ever, EVER visit your site. Reducing functionality is a cardinal sin.
If you are that worried about tracking your images, watermark. Anything else is downright hostile to your users.
Most of these methods (if not all) can be overcome by a user using Firefox’s plugin FireBug, which lets you edit the page HTML & Javascript on the fly.
thanks for the tips
Disable right click? Really?
@Timothy,
You read the post in a whole?
and what about a simple screen capture?
[...] una imagen, cosa muy molesta. Por eso es importante saber como protegernos. En Webresourcesdepot publicaron una lista con diferentes formas de que puedas proteger las imágenes de tu blog como mas [...]
I think you have forgotten watermarking by invisible signature. Its better because it doesnt damage photo impression and thiefs cannot crop the watermark so easily, because they dont know that it is watermarked. I prefer Digimarc or much cheaper SignMyImage. Btw. good article
F.
Wow, thanks for saving me time. Who knows how long I would of tried to protect them. Guess its just a waist. Post and go with the flow. Appreciate saving my the time. My computer is slow as it is.
Im creating a website and try to protect my images to and I found some ways but still I will be able to find the images to copy them. First of all i created my images in a DLL file so all images are show with a webresource.axd file.
Problem here is that if they save the axd file as a png file they still have the image.
Next what I try is place the pic online with a transparant png file on top of it and protect the image src code from being placed in the url to get image. Like this you cant get it by right clicking and not by pasting in the url.
Problem here is that you can put the image in an own html file (not online) and then take it from there.
Conclusion. You cant protect your images. Even I went on websites where they tried to protect images and still i was able to take it. I never saw a real website where its impossible to take the image.
Good grief there’s a lot of know-it-all whingers around. Yes we all know people can get around these protections. So what? People can get around the locks on my doors but that doesn’t stop me from using them to deter that happening.
When people take stuff from a website that is clearly marked NOT FREE then that is THEFT – just like taking an apple from a market stall without paying is called theft. There is no difference.
And get over this “everything on the net must be free” rubbish. Some stuff is free – some isnt. Why should it always be free just because it’s on the internet??? I like free stuff as much as anyone but it’s not some inalienable right of all internet users. How old are you people?
Do your own artwork or pay for it to be done if it’s worthwhile – and stop being such cheapskates and lazy scroungers.
Oh and thanks for the nice free information umut.
How do you protect images from the right-click functions and etc. on MySpace or Facebook?
This is impossible to protect the image don’t copy. Yours’ way maybe to make the image copy to be difficulty.
This is good to see protection of images.