サイトから画像をダウンロードさせない方法

サイトから画像をダウンロードさせないためには、いくつかの対策を組み合わせるのが効果的です。 ただし完全に防ぐことは難しく、スクリーンショットなどで取得される可能性はあります。 以下の方法を試してみてください。

右クリック禁止

JavaScriptを使って右クリックメニューを無効にする。

<script>
document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
});
</script>

デメリット：JavaScriptを無効にされたり、開発者ツールを使われると回避される。

画像のドラッグ＆ドロップ禁止

CSSを使って画像のドラッグを無効にする。

img {
    pointer-events: none;
    -webkit-user-drag: none;
}

デメリット：ブラウザの開発者ツールを使えば回避可能。

画像の上に透明レイヤーを置く

画像の上に透明な div を重ねて、画像を直接クリックできないようにする。

<div style="position: relative; display: inline-block;">
    <img src="image.jpg" alt="Protected Image">
    <div style="position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%; 
                background: transparent;">
    </div>
</div>

デメリット：開発者ツールでdivを削除されると回避可能。

画像をCSSの背景に設定

.protected-image {
    background-image: url('image.jpg');
    width: 300px;
    height: 200px;
    background-size: cover;
}

デメリット：CSSのソースコードを解析されると画像URLが分かる。

画像を分割して表示

大きな画像を複数の小さな画像に分割し、それらをCSSで組み合わせて表示する。 デメリット：手間がかかるが、スクリーンショットには無効。

透かし（ウォーターマーク）を入れる

画像にサイト名やロゴなどの透かしを入れておく。 デメリット：画像編集ソフトで消される可能性があるが、抑止力にはなる。

JavaScriptで画像を暗号化

画像データをBase64エンコードし、JavaScriptでデコードして表示する。 デメリット：ページの読み込み速度が遅くなり、開発者ツールを使えば復元可能。

サーバー側でリファラーチェックを行う

.htaccessやサーバーの設定で、自サイト以外から画像に直接アクセスできないようにする。

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^https://yourwebsite.com/ [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [F]

デメリット：開発者ツールで画像を直接取得される可能性がある。

CDNのホットリンク防止機能を使う

CloudflareなどのCDNを利用すると、ホットリンク（外部サイトからの直接リンク）を防ぐ機能がある。