Tutorials

Protect Your Images with CSS Watermarks

Tags: Beginner

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!