Блог компании "Selection Studio"

Все самое интересное из мира веб разработки

Лучшая защита картинок на сайте от копирования

 

Защита картинок от копирокания 


Как защитить картинку от копирования с сайта Всем привет. Совсем недавно один парень обратился ко мне за созданием landing page. У него довольно интересная ниша. Она связана с созданием уникальных, необычных, стильных печатей и штампов. Его идея мне сразу понравилась, он знает, чего хочет, составил, пожалуй, лучшее ТЗ из всех, что мне присылали, и сам создал прототип, на основе которого я и делал сайт. Когда он будет готов, оставлю ссылку в этой статье. Пусть это будет дополнительный бонус ему, но сейчас не об этом.

Дело в том, что одним из пожеланий, было то, чтобы попробовать сделать защиту от копирования его оттисков (печатей и штампов, представленных на сайте). Я сразу подумал о водяном знаке, но он немного не то имел ввиду...

Защита картинок от копирования

Задавшись данным вопросом, я нашел несколько способов, но о полной защите контента от копирования речь не пойдет. Мы можем лишь усложнить процесс и отсеять рядовых пользователей, которые не знают, что нажатием ctrl+u можно открыть исходный код и скопировать адрес картинки. И тут я задумался. Стоит ли внедрять подобный функционал? Ка думаете? Давайте рассмотрим хотя бы базовые способы защиты от копирования, а в конце статьи я выскажу свое мнение по этому поводу.

Отключения функции выделения текста и изображений

Одним из способов усложнения копирования вашего контента с сайта может стать отключение функции выделения. Наверняка вам попадались подобные сайты и возможно кто-то из вас не понимал в чем дело). Для того, чтобы отключить возможность выделения на вашем landing page, следует тегу body прописать :

1
<body onselectstart="return false;"></body>

Для всеми любимого IE. И в стилях прописать:

1
2
3
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;

Способ не плохой, но больше подходит для текста, так как простым перетягиванием картинки можно сохранять на рабочий стол или вызвав контекстное меню, нажатием правой кнопки мыши, сохранить нужное изображение. Давайте рассмотрим что-то более серьезное и запретим возможность выделения, отключим контекстное меню и отключим возможность перетягивания.

Повторяем процедуру, описанную выше, только перед закрывающимся тегом body вставьте следующий скрипт:

1
2
3
4
5
6
7
8
<script language="JavaScript" type="text/javascript">
   fimg = document.images;
     for(j=0;j<fimg.length;j++){
   fimg[j].galleryimg = "no";
   fimg[j].oncontextmenu = function(){return false;}
   fimg[j].ondragstart = function(){return false;}
}
</script>

Теперь контент вашего сайта надежно защищен от домохозяек, копирующих рецепты) Да, да! Именно так. Ведь любой уверенный пользователь может открыть исходный код и скопировать ссылку на картинку. А если у вас и будут воровать контент, то наверняка другие веб мастера и конкуренты, для которых это все не составит труда.

И теперь стоит задуматься снова. Смотрите. Мы же столько говорим о юзабилити сайт пейдж. И наверняка пользователям удобнее, например, скопировать адрес вашей почты, чем набирать его вручную. и т.д. Я прошу вас взвесить все за и против, а не бездумно сделать описанное в статье. Ведь в первую очередь ваш сайт рассчитан на обычных людей (клиентов), и удобство использования должно стать на первый план. А тому, кто задался целью скопировать ваш материал и картинки, в любом случае, не составит большого труда сделать это.

Гораздо эффективнее подтверждать авторство другими способами, о которых мы обязательно поговорим в следующих статьях. Всем сапасибо за внимание!

Комментарии (0)

Добавление комментариев закрыто.