Image Theft Protection

It should not be easy for the average person to steal images from a site and claim them as their own, for fun or for profit.

I have a client who is worried about their original graphics being stolen from their website. This particular client creates hand-made graphics and has had issues previously with other designers saving their images and tracing over them for their own use. In one particular example, the designer didn‘t see any ethical issue with stealing the artwork, but also took it a step further and sold digital versions of this same artwork...

So I decided to deploy a simple safeguard to make it a bit more difficult for them to take images using their right-click and save them directly by adding an .overlay div with some z-index. The current setup for a square image now looks like this:

<div class="media media--square">
  <div class="overlay"></div>
  <img src="https://via.placeholder.com/1000?text=Image cannot be right-clicked" alt="Don't steal this" height="1000" width="1000">
</div>

We also employ srcset with sizes for different screen sizes so this does make the markup a bit harder for potential thieves to steal. With this .overlay div now in place, I‘ve can employ a css stacking solution that prevents basic secondary-clicks on the image. This solution at least makes them search through the source code before taking the image.

:root {
  --color-foreground: 0, 0, 0;
}
.media {
  display: block;
  /* adding a background color gives an indication that an image should load in this container */
  background-color: rgba(var(--color-foreground), 0.3);
  position: relative;
  overflow: hidden;
}
/* You can combine this with other aspect ratios to prevent layout shift */
.media--square {
  padding-bottom: 100%;
}
/* images, videos, other media inside the container automatically get resized  */
.media > * {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.media > .overlay {
  z-index: 2;
}
.media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
}

In conclusion: don‘t steal others‘ artwork.

View Demo