PCだと右クリックやドラッグ&ドロップ、スマホでは長押しによる画像の保存を禁止する方法をご紹介いたします。

稀に、対策として実装してほしいと頼まれることがあるので備忘録として残しておきます。

CSSによる画像保存の禁止

CSSで右クリックやドラッグ&ドロップ、長押しを禁止する場合、pointer-eventsを使います。

以下のように記述することで、画像に対するクリックなどの操作ができなくなります。

img {
  pointer-events: none;
}

jQueryによる画像保存の禁止

jQueryを使った方法では、以下のように記述します。

$(function () {
  $('img').attr('onmousedown', 'return false');
  $('img').attr('onselectstart', 'return false');
  $('img').attr('oncontextmenu', 'return false');
});

あとがき

対策をしても回避はできてしまうので、完全に画像保存を禁止するのは難しいですね。

右クリックやドラッグ&ドロップなどを禁止しておくことで、ある程度の効果は見込めると思いますので、なるべく画像を保存されたくない場合はぜひ参考にしてください。