OWIEです。ごく稀に「ウェブサイトに掲載している画像を保存されたくないんだけど、なにか対策できないか」というご要望をいただくことがあります。
基本的にどうしようもないよな〜と思うんですが（究極的に画面自体を外部から撮影すれば間接的にですが保存は可能ですし）、かといって「出来ません！」と返答するのもいかがかなと思うので、方法を考えてみましょう。
パッと思いつく限り、ウォーターマークを付けたり、JavaScriptなどで対応したり、背景画像にしてコマンド操作をさせないという方法がありますが、どれも作業的に面倒ですし、ウェブサイトを運用していく上ですべての案件を自分たちが受け持つわけではないので、一度設定すれば放りっぱなしに出来て、かつ楽に実装できることが肝要です。
一行追加してイベントを無効化する
そこでcssプロパティ pointer-events: none; を使います。
img{
pointer-events: none;
}
これは『値を none に設定すると、要素がポインターイベントのターゲットではないことを示すのに加え、ポインターイベントが要素を「通過」して、代わりに要素の「下」をターゲットにすることを指示します』というプロパティです。
参考：MDN Web Docs Project pointer-events
自分は主にリンクの無効化に対して使うことが多いのですが、冒頭のような要望があった場合に即時的に使えるんじゃないかなと思いました。とはいえcssを無効化させると当然pointer-eventsは動かないので、そのあたりはきちんとコンセンサスを取る必要がありますね。
