Quick Tip: Protect the images of your website

Brown text on green background: Quick Tip: Protect the images of your website

First, I have bad news: there is no a super unfailable way to protect the images from stealing or downloading.
Second, you can prevent the downloading or image theft using some methods. I am presenting them here for you to explore and try on your own website. At the end, some related readings.


1. No Right-Click(js):

It disables the right click button in the mouse of the user.

How to:

2. Shrink wrap your images(html):

It adds a transparent cover to your image (as a png), protecting the real one.

How to:

3. Pointer Events (css):

It will disable the pointer when clicking the image or as Mozilla says: The element is never the target of mouse events.

How to:
It is so simple as declaring it in your CSS:

img {
    pointer-events: none;


Further reading:

Stop stealing my sh*t!

How Can I Protect My Images Online?

A Comprehensive Guide to Protecting Your Photos Online

Behind the Scenes

The font in use is Ultra by Astigmatic


Popular Posts