Published

Although there is no bulletproof way to stop people downloading images on your website I still get this request every now and again. If you really want to protect your images don’t upload them at all but if you must you can “protect” them by including a watermark in the center or uploading a low resolution copy. A popular, if somewhat notorious, method is to disable right-clicks on the website but I do not encourage this because it confounds what the user expects of the browser. It also does not prevent people from digging the image out from their browser cache.

But while I was in the shower this morning I had a silly, if naughty, idea to “protect” an image with nothing but HTML and CSS. Here’s the codepen:

Try right-clicking the image and saving it to your computer. Or open it up in a new tab/window. You’ll notice you get a different image.

Just to reiterate, this isn’t a foolproof way of protecting your image rather it’s just some fun. The downside is that for every image you want to protect you’d need to insert extra markup (which you could do with JavaScript).