2007 . 12 . 08

Webページ内の画像を保存させない方法

先日、あるサイトでページ内にある画像を保存しようとしたところ、これがうまくいきません。
ソースを開いて見て、納得と同時にあまりの単純さに感動。
そんなシンプルながら効果大な方法をご紹介します。

簡単に云ってしまえば、イメージタグで本来の画像を指定せず、スタイルシートでその背景に画像を指定するというものです。

では、実際にどのようになるか示したものが、⇐この画像と⇓その部分のソースです。

通常、画像を指定すべきイメージタグに、ダミーの画像ファイルを指定しておきます。
このダミー画像の実体は 1px X 1px の透過GIFで、これに実際の画像サイズを指定して使用します。
そして、これを段落タグ<p>で囲い、この段落タグのstyle属性で本来の画像を背景画像として指定してやります。
加えて、正しく画像を表示させるために、style属性では背景画像のパス指定だけでなく背景画像の並び方など、一通り他の指定もしておきましょう。（ここでも height, width の指定を加えた方がよいかも？）
こうすることによって、右クッリックから普通に「名前を付けて画像を保存」などとしても、保存されるのはイメージタグのダミー画像という具合になる訳です。

この方法の問題点は、スタイルシートを無効にしている場合と、そして何より決定的なのはソース自体を確認されたら何の効果もない、ということです。
訪問者の画像保存を徹底して阻止するには、もはやFLASHやJavaScriptの導入を考えざるを得ませんが、これらのような大そうな仕掛けを施すまでもないようなケースでは、今回の方法は非常に簡単で単純な割に、それなりの効果を発揮できる、秀逸なトリックではないでしょうか。

CSSの画像置換えに関する情報はとても多くありますが、そのテクニックをWebデザイン的な目的以外で、こういったことに用いてみるのもオツなものだと思います。

最後に、「CSS的に甘い」とか「SEO的にはどうなの？」というツッコミもあるかと思いますが、そこら辺はご容赦を。