CSSやJavaScriptで画像の保存を防止する方法4種類

画像の保存を完全に防ぐことはできませんが、右クリックなどから画像を保存されにくくする実装方法を4種類試してみましたのでご紹介します。

■目次

画像の上に要素をかぶせる
pointer-eventsを使う
-webkit-touch-calloutとuser-selectを使う
contextmenuとdragstartを使う

1. 画像の上に要素をかぶせる

画像の上に要素をかぶせて、画像をクリックできないようにする方法です。

See the Pen img-protect01 by tam_yi (@tam_yi) on CodePen.

.img-protectの疑似要素を画像と同じ大きさにして、画像の上にかぶせるようにしています。

<div class="img-protect">
    <img src="http://via.placeholder.com/160x120" class="img-protect__image">
</div>

.img-protectにposition(static以外)とwidthの指定が必要になります。

.img-protect {
    /* 疑似要素をposition: absolute;で配置するため、static以外の指定が必要 */
    position: relative;
    /* 疑似要素の幅を画像の幅と合わせるため、画像の幅の指定が必要 */
    width: 160px; 
}
.img-protect::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

確認してみた限りPCとAndroidでは問題なさそうでしたが、iOSでは長押しからのコピペができるようでした。
画像毎に幅の指定が必要なので、画像数が多い場合は少し手間かもしれません。

2. pointer-eventsを使う

2つ目はpointer-events:none;を指定する方法です。
pointer-eventsは要素がマウスイベントの対象になるかどうかを指定するもので、noneを指定するとマウスイベントの対象にならなくなります。
※pointer-eventsはIE11からの対応になります。

See the Pen img-protect02 by tam_yi (@tam_yi) on CodePen.

画像の上に要素をかぶせる方法と同じく、iOSだと長押しからのコピペができるようでした。
手軽に使用できますが、IE10以下も対応が必要な場合は使用できません。

3. -webkit-touch-calloutとuser-selectを使う

3つ目は-webkit-touch-callout:none;とuser-select:none;を指定する方法で、Webアプリを作る時などに使われることがあるようです。
-webkit-touch-callout:none;は長押しで表示されるメニューの無効化、user-select:none;は画像を選択できないようにします。

See the Pen img-protect03 by tam_yi (@tam_yi) on CodePen.

iOSでは画像の保存を防止できていましたが、PCやAndroidでは効果がないようでした。
対応ブラウザが限定的なので、前述したようにWebアプリなどで使ってみるのはよいかもしれません。