аватар |

Статьи / JavaScript /

Как запретить скачивание изображений с сайта?


Как запретить скачивание изображений с сайта?


Скажу сразу - 100% защиты нет, но Можно максимально Усложнить жизнь тем, кто ворует или использует url изображений.

Вот несколько способов защиты:

1) При помощи Java Script. При помощи JS блокируем возможность вызова правой кнопкой мыши на изображении меню с Сохранить изображение. Как вариант против неопытных пользователей подходит.

<img src="image.jpg" oncontextmenu="return false;" />

2) Состоит в том, чтобы спрятать изображение и отобразить его в качестве background (фона) через стили. Его опять же можно скачать, но только просмотрев CSS-запись, а после введя соответствующий url в строку ввода адреса. Это уже существенно усложнит жизнь тем, кто скачивает Ваши изображения!

Код CSS. Создаём класс со скрытым изображением

.background {background: url('img.jpg') no-repeat; width: 150px; height: 150px;}

и код HTML. Вставляем в соответствующее дял изображение место.

<div class="background"></div> <!-- скрытое изображение -->

Можно стили сразу в div прописать

<div style="background: url('img.jpg') no-repeat; width: 150px; height: 150px;"></div>


3) Данный способ защитит от того, что url Вашего изображения используют на другом сайте, то есть прописывают адрес изображения Вашего сайта, а отображается оно у них. Такое явление называется - хотлинком. Как результат, каждое такое упоминание будет создавать нагрузку на сервер. Для предотвращения подобных действий откроем файл .htaccess в корне Вашего сайта и запишем туда выражение, которое будет Всегда все подобные ссылки перенаправлять на другое, ненужное изображение, да, можно неприличное.

RewriteEngine On
#Заменит ?yoursite\.ru/ на свой url
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mysite\.ru/ [NC]
RewriteCond %{HTTP_REFERER} !^$
#Заменит /images/empty.jpg на другое Любое изображение
RewriteRule .*\.(jpe?g|gif|bmp|png)$ /images/empty.jpg [L]


А как лучше?


Оптимальный путь всё-таки другой. Вы можете не препятствовать краже изображений, а использовать это с выгодой для себя. Для этого в любом графическом редакторе, например Photoshop, сделайте заготовку водяного (полупрозорачного) знака сайта, которую потом вставляйте отдельным слоем в том же Photoshop на все свои изображения. В результате, если их и будут красть, то всегда увидят адрес Вашего сайта!


Если хотите сделать на изображении водяной знак, не скачивая специализированных программ, то могу посоветовать он-лайн сервис, который описан в статье Как сделать водяной знак на изображении? Он-лайн сервис

Спасибо за внимание!
 



Похожие статьи


Комментарии к статье (vk.com)