検索エンジン(機械)に画像認識させない
突然ですが問題です。この記事のトップに貼られている画像はなんでしょう？
ヒント：写真の対象は死んでいます。
この記事のトップにある写真もリンク先の正解の写真も読み込んでいる画像は同じです。しかし後者はスプライトで位置を入れ替えて人間が見た時に写真が何かを認識できるようになっています。
検索エンジン(機械)は画面上にCSSスプライトで位置調整して表示された画像ではなく読み込んだ画像を収集するためCSSスプライトを使用すると何の画像か解析されることができなくなります。
現在の機械はゴリラと黒人の方の区別がつかないようなレベルだが、将来的には性別や人種までも高精度で判別できるようになる。
もしもサイトに画像を表示したいがロボットの画像認識を避けたい画像がある場合はこのような画像認識防止対策が現在のところ有効だ。
画像認識させない画像の作り方
1. 元画像を分割する
画像を100くらいに分割する。やり方はいろいろあるが画像分割専用のフリーソフト（分割結合「あ」など）を使用すれば簡単に分割できる。
2. 画像を結合してCSSスプライトで表示
CSSスプライト画像を簡単に作成できるCompassやGlueがおすすめ。作成されたCSSスプライト画像はファイル名の番号順ではなくバラバラに順不同で結合して出来上がる。
その後、元画像のサイズのwidthとheightを指定して、その中身にfloat:leftを指定すれば分割前の画像が表示される。
人間には効かない
人間にはPrintScreenという、どんな画像でも画面をキャプチャして保存することができる秘奥義があるためこのやり方は効かない。
あくまで機械が画像を認識して判別できないようにするための手法である点に注意。
しかしこの方法で使用するとブラウザによっては配置した画像の隙間が表示されてしまうのであまり見た目が良くないことがある。（ということにあとから気づいた）
CSS3のフィルターで階調を反転させる
画像の隙間を表示させて見た目を悪くするのなら画像の階調を反転させたものをCSS3のフィルターで階調を反転させて表示させたほうが有用か。
このやり方でも検索エンジン側はCSSスプライトを使用したやり方ほどではないが画像認識が困難なはずだ。
※この画像はCSS3のフィルターで階調を反転させています。
.hanten {
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
filter: invert(100%);
}
画像にCSS3のフィルターで階調を反転させないときの表示。
