Эффективная защита изображений?

Question

[Tomayo]

Я понимаю, что исключить возможность скачивания нельзя и просмотрела много ресурсов прежде, чем просить помощи. Когда-то давно видела способ усложнить копирование картинки на телефон, но забыла как его осуществить. Мне нужно было только это и больше ничего.

У меня есть цель защитить картинки на сайте от копирования и скачивания, запрета контекстного меню достаточно для пк, но для спасения от телефонов не нашла решения проще и лучше чем наложить поверх картинок прозрачное изображение... И тут проблема: это изображение не адаптируется вместе со всеми картинками. Может есть способ растянуть картинку на весь <div> или сделать ее зависимой от его размера?

P.S.
Для меня отмены контекстного меню на пк достаточно, просто ищу способ сделать процесс сохранения картинки на телефон не таким простым. Использование водяных знаков - не вариант.

Comments

[Кирилл Никитин]

От банального скриншота вообще ничего не спасёт.

[Василий Банников]

Боюсь что нет смысла так заморачиваться. Раз вам не страшно, что кто-то скопирует картинку, то ничего ценного в них нет. Усложнять лишний раз смысла тоже нет - ЦА может тупо сделать скриншот и вставить в ворд. (Ну или вообще фото экрана сделать)

Answer 1

[Антон Литвиненко]

Если вам достаточно накрыть картинку прозрачным оверлеем, то можно завернуть каждую картинку в обертку и ей приделать оверлей через псевдоэлемент

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

Comments

[Tomayo]

Как привязать это к изображению?

[Антон Литвиненко]

Tomayo, я ж написал, завернуть картинки во враппер img-wrapper

[Tomayo]

Антон Литвиненко, не сработало, либо я что-то не поняла

[Антон Литвиненко]

Tomayo, Переписал ответ, а то вы вполне могли не заметив, что у меня в SCSS написано, взять и просто скопировать

[Tomayo]

Антон Литвиненко, Спасибо за пояснение, сработало, но на обернутой картинке появился путь к элементу

<style>
	
	.img-wrapper {
  position: relative;
}
.img-wrapper::after {
  content: "images/Empty File.png";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
</style>

<div class="img-wrapper"><img src="images/pic11.jpg"></div>

[Антон Литвиненко]

Tomayo, ну та вы же прописали его в контент, зачем

[Tomayo]

Антон Литвиненко, а, ой. он просил написать.

[Tomayo]

Антон Литвиненко, Все работает идельно!!! Спасибо большое, вы гений! : ) То, что я искала!

Answer 2

[ThunderCat]

если задача немного усложнить скачивание - делайте изображения бэкграундом для блока, так и позиционирование и ресайз будет проще настроить, и скачать по правой кнопке/тапу не получится.

Answer 3

[CityCat4]

Задача не имеет решения.

Картинка всегда в кэше браузера/прокси. Можно немного усложнить скачку, но полностью защитить от скачивания невозможно. Защитите-ка мне фото картинки телефоном :) или PrintScreen в хостовой машине, когда картинка отображается на виртуалке (это вообще убойный способ)

Comments

[Tomayo]

Задача решена : ) И состояла она в том, чтобы немного усложнить скачивание картинки с телефона и пк, а не полностью исключить такую возможность ( :

[CityCat4]

Tomayo, Ну, в такой постановке она конечно решается :)

Answer 4

[Александр]

Вы ведь понимаете, что что бы отобразить картинку в браузере пользователя, ему нужно ее сначала скачать с сервера?
Поэтому возможности запретит скачивание полностью нет, но есть вариант поумнее - временные ссылки. Если браузер будет обращаться не на прямую к картинке, а к файлу, который будет решать отдать ли эту картинку, вы сможете выдавать время жизни или ограничение по скачиванию ссылки. Это точно обезопасит от копирайтеров, но от прямых рук не спасет.

Условно, вы обращаетесь на index.php, он определяет какие ссылки на картинки будут, записывает их в память, следом браузер обращается по этим адресам с картинками и url сгорают. Соответственно для того что бы отобразить нужно сделать запрос на index, без этого ничего. Для загрузки страницы этого хватит, но после загрузки уже скачать не выйдет.