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.

Enjoy!

1. No Right-Click(js):

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

How to:
http://www.dynamicdrive.com/dynamicindex9/noright.htm
http://dynamicdrive.com/dynamicindex9/noright3.htm

2. Shrink wrap your images(html):

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

How to:
https://skinnyartist.com/how-to-shrink-wrap-your-images/

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;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Further reading:

Stop stealing my sh*t!
https://skinnyartist.com/stop-stealing-my-images/

How Can I Protect My Images Online?
http://creativeartsadvocate.com/how-can-i-protect-my-images-online/

A Comprehensive Guide to Protecting Your Photos Online
https://petapixel.com/2016/12/09/comprehensive-guide-protecting-photos-online/

Behind the Scenes

The font in use is Ultra by Astigmatic