【何気に便利！】Webサイトで画像保存を禁止する方法についてまとめてみた
Web2016年12月14日
Webサイト内でタレントなどの人物画像を掲載する際、クライアントから「ユーザーが画像を保存できないようにしてほしい」というオーダーを受けることがあります。
対応方法はいくつかあるのですが、よく使われる方法についてまとめてみましたのでご紹介したいと思います。
方法①：jsで右クリックを禁止する
右クリックからの保存を禁止したい要素に対し、jsの記述を加える方法です。
サンプルコード
<img src="hoge.jpg" alt="" oncontextmenu="return false;">解説
ちょっと記述を<img>タグに追記するだけなので簡単です。ただしこの対応方法は、「右クリックの禁止のみ」であるため、スマートフォン閲覧時の画像長押しによる保存までブロックすることはできません。あくまでもPC閲覧時限定の保存禁止方法になります。
以下のようにclassだけ振れば機能するようにjsとhtmlを分けてもよいでしょう。
<img src="hoge.jpg" alt="" class="img-guard">(function () {
$("img-guard").on("contextmenu",function(){
return false;
});
})(jQuery);デメリットとしては、右クリック自体が禁止になるので必然的に画像保存する以外の機能までも制限することになります。また、jsを無効にしている環境ではもちろん機能しません。
方法②：cssで制御する
cssでのスタイル制御でスマートフォン時の保存を禁止する方法です。
サンプルコード
<img src="hoge.jpg" alt="" class="img-guard">.img-guard{
user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
-khtml-user-select:none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-webkit-touch-callout: none;
}解説
前述の右クリック禁止jsとこのスマートフォン用cssをあわせて実装することで、PCとスマートフォンのどちらも画像保存を禁止することができますが、このcssはiPhoneのみで機能し、Androidの一部端末には効果がありません。
- ※AndroidであってもブラウザがChromeであれば機能します
また、PCとスマートフォンそれぞれで処理を行う点は個人的にはあまり美しいとは言えないかなと思います。
方法③：透明画像をかぶせる
これが一番画像保存禁止という目的を果たすという意味では一番効果があり、実装方法もシンプルです。透明画像を表示画像の上にかぶせる方法です。
サンプルコード
<span style="display:block;background:url(hoge.jpg（実際に表示する画像）);background-size:contain;">
<img src="hoge_alpha.png（透明画像）" alt="">
</span>- ※透明画像は、実際に表示する画像と同サイズの画像で用意する必要があります
解説
表示したい画像は<span>の背景として表示し、この<span>タグ内に透明画像を<img>タグで配置します。
これにより、PCでの右クリックやスマートフォンなどタッチデバイスでの長押しによる画像保存において、強制的に見えている画像ではなく透明画像を保存させることができます。
PCやスマートフォンのデバイスを問わず対応でき、jsの有効/無効に左右されることもありません。
実装してみた
透明画像をかぶせる方法で実装してみました。スマートフォンで画像保存すると透明画像が保存されることがわかると思います。
まとめ
某アイドル事務所などは特にこの対応に厳しく、事務所自身のサイトはこれでもか、というくらい画像保存を禁止している実装が行われていることで有名です。
結局画面のスクリーンショットを撮ってしまえば意味が無いのですが、気軽に画像保存ができないよう画像保存の抑止を重視するクライアントも少なくありません。
画像保存禁止の実装を行う際は、どうぞ本記事の内容をご参考にしていただければ幸いです。