Effective image protection?

Question

css

I understand that it is impossible to exclude the possibility of downloading and looked at many resources before asking for help. Once upon a time I saw a way to complicate copying a picture to a phone, but I forgot how to implement it. All I needed was this and nothing else.

I have a goal to protect images on the site from copying and downloading, banning the context menu is enough for a PC, but I didn’t find a solution easier and better to save from phones than overlaying a transparent image on top of the pictures ... And here is the problem: this image does not adapt with all pictures. Maybe there is a way to stretch the picture to the whole <div>or make it dependent on its size?

PS
For me, canceling the context menu on the PC is enough, I'm just looking for a way to make the process of saving a picture to my phone not so simple. Using watermarks is not an option.

Answer 1

If it is enough for you to cover the image with a transparent overlay, then you can wrap each image in a wrapper and attach an overlay to it through a pseudo-element

<div class="img-wrapper">
  <img src="img/category/cat3.jpg" alt="">
</div>

.img-wrapper {
  position: relative;
}
.img-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

Answer 2

if the task is to complicate the download a little - make the images a background for the block, so positioning and resizing will be easier to set up, and downloading by right button / tap will not work.

Answer 3

What?
The goal is to protect the image from copying and downloading?
Better drop that goal.
Everything that gets to the client can be spayed.

Answer 4

The problem has no solution.
The picture is always in the browser/proxy cache. You can make the download a little more difficult, but it is impossible to completely protect against downloading . Protect me with a photo of the picture with my phone :) or PrintScreen in the host machine when the picture is displayed on the virtual machine (this is generally a killer method)

Answer 5

You understand that in order to display an image in the user's browser, he needs to first download it from the server?
Therefore, there is no possibility to prohibit downloading completely, but there is a smarter option - temporary links. If the browser does not refer directly to the picture, but to the file that will decide whether to give this picture, you can issue a lifetime or a limit on downloading a link. This will definitely protect against copywriters, but it will not save you from direct hands.
Conventionally, you access index.php, it determines which links to images will be, writes them to memory, then the browser accesses these addresses with images and the url burns out. Accordingly, in order to display, you need to make a request for index, without this, nothing. This is enough to load the page, but after loading it will not work.