Protect Your Images with CSS Watermarks
Blog » CSS/XHTML » Protect Your Images with CSS WatermarksProtect Your Images with CSS Watermarks
December 3rd, 2008
This is an extension to my previous tutorial regarding enhancing images with CSS. What I went over was how to visually achieve the watermark on your image, but now let’s take a step further and protect the image from it being downloaded.
Let me be upfront with the downside of the technique, it’s not fully steal-proof. Anyone with knowledge of CSS and that are web savvy can still easily take your images. This only prevents the average Joe from taking them.
I will be going over two methods that are easy to achieve with some simple CSS.
Method 1
One popular site that uses this similar technique is Flickr.com. What we are doing is simply overlaying a transparent 1×1 pixel stretched to fit the size of the protected image. When a user tries to right click and save the image, they are only able to get the blank image that is layered on top.
HTML
<div class="watermark"> <img class="blank" src="blank.gif" alt="" /> <img src="homeland-longbeach.jpg" alt="" /> </div>
CSS
.watermark {
background: #000 url(watermark.jpg);
width: 500px;
height: 341px;
margin: 0 auto;
display: block;
position: relative;
}
.watermark img.blank {
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0;
top: 0;
}
.watermark img{
filter:alpha(opacity=90);
opacity:.90;
}
This is very simple to implement, but one major flaw in this technique is that the image is clearly shown in the source code. Anyone that is web savvy will be able to follow the path of the image and snag it.
Method 2
This second method takes a blank image and applies the protected image as a background. For those thieves who are familiar with HTML, will find that the image referenced in the source code is only the blank image and they would have to follow the style sheet to find the protected image.
HTML
<div class="watermark"> <img class="blank homeland" src="blank.gif" alt="" /> </div>
CSS
.watermark {
background: #000 url(watermark.jpg);
width: 500px;
height: 341px;
margin: 0 auto;
display: block;
position: relative;
}
.watermark img.blank {
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0;
top: 0;
}
.watermark img{
filter:alpha(opacity=90);
opacity:.90;
}
/*--Method 2--*/
.watermark img.homeland {
background: url(homeland-longbeach.jpg) no-repeat;
}
Note that this technique is only recommended for small galleries. Since we need to create a class for every image, this can be tedious to add manually. For large sites running a dynamic image gallery with hundreds of images, it’s probably better to go with method 1.
Conclusion
These are just some techniques you can use to protect your images with CSS alone. To fully protect the images, using JavaScript or Flash to combine the two images (Watermark + Protected Image) together into one is probably the best way. If you have any comments, suggestions, or concerns, please let me know!
Related Posts
Tags: Tutorial
This entry was posted on Wednesday, December 3rd, 2008 at 9:29 am and is filed under CSS/XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Popular Posts
Recent Comments
Great Tip. Method 2 in both cases doesn’t work in IE, but who cares.
Bah! Thanks for catching that, fixed!
Was missing (Left: 0; top: 0;) :-p
Nice techniques, but for the more web savvy it’s really easy to bypass these methods.
A nice addition to this would be the .htaccess configuration for avoiding hot linking!
Depending on your browser, disabling CSS is 1 to 3 clicks away. That’s usually enough to keep Joe user at bay though :p
Thanks Patareco for your htaccess suggestion~
Mathieu, your right. If they disable the css its free game!
This tutorial was only meant to keep the average user off of your images, the savvy peeps will get their hands on it no matter what~ :-p
nice tip, but i can see in source code where is your image … so it is not bulletproof
Your pics is here
http://www.sohtanaka.com/web-design/examples/water-mark/homeland-longbeach.jpg
Just a simple ctrl+i on firefox.
Web is share not restrict
(But nice post anyway thanks).
Flickr also uses similar technique
First of all, I’d like to say, great article! I really like reading about this stuff and the idea’s some people come up with.
But… I also wanted to point out, that all these protections are useless against a visitor with Firefox. Just open the Demo page, go to Tools > Page Info. Tada.
Nevertheless, it’s a very nice solution and will prevent a lot of less web-savy people from stealing the images. But, in the end, if you don’t want people to steal your image, you shouldn’t put in online.
http://www.sohtanaka.com/web-design/examples/water-mark/homeland-longbeach.jpg
A quick source search got me that, so this is easily exploitable. Also as @Soh has said, if they disable the CSS it’s also there in the open for them to grab. I think CSS is a poor way to go about protecting an image. The only fool proof way is to water mark the actual image or photo.
But great proof of concept, and it looks like it was a fun little experiment. Thanks for sharing!
Not to speak on behalf of Soh, but I think he fully understands this method is not bulletproof and can be hacked by someone who knows even the slightest HTML or is good with a browser.
I think his main point of this was to show a very quick way of watermarking with css. In my opinion, one other great thing this illustrates is the power of PNG overlays. They can be extremely powerful. For example http://www.webdesignerwall.com/tutorials/css-decorative-gallery/
Great post Soh!
Not to speak on behalf of John, who is not speaking on behalf of Soh, but… People! Read the second paragraph “Let me be upfront with the downside of the technique, it’s not fully steal-proof. Anyone with knowledge of CSS and that are web savvy can still easily take your images. This only prevents the average Joe from taking them.” Why take the time to comment that just how easy it is to steal an image? Why? Why am I commenting now? I am wasting my ti-
great work
Another way to protect your photo is by using free online image watermark. This tool (called Batch Watermarker) can automate the whole process of image watermarking. If you are away from your PC and don’t want to download any software, you can just use this online version of watermarking tool for free. It’s quick and it’s easy to use.
You can also download their full version of Batch Watermark software program if you want to watermark multiple image files in a folder with just a click of the mouse.
I want to know css’s position in my blog layout.
I mean, in body or head maybe