タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

css spriteとCSSに関するufomapのブックマーク (2)

  • CSSスプライトで検索エンジン(機械)に画像認識させない方法

    突然ですが問題です。この記事のトップに貼られている画像はなんでしょう? ヒント:写真の対象は死んでいます。 正解の写真はこちら この記事のトップにある写真もリンク先の正解の写真も読み込んでいる画像は同じです。しかし後者はスプライトで位置を入れ替えて人間が見た時に写真が何かを認識できるようになっています。 検索エンジン(機械)は画面上にCSSスプライトで位置調整して表示された画像ではなく読み込んだ画像を収集するためCSSスプライトを使用すると何の画像か解析されることができなくなります。 現在の機械はゴリラと黒人の方の区別がつかないようなレベルだが、将来的には性別や人種までも高精度で判別できるようになる。 もしもサイトに画像を表示したいがロボットの画像認識を避けたい画像がある場合はこのような画像認識防止対策が現在のところ有効だ。 画像認識させない画像の作り方 1. 元画像を分割する 画像を10

    CSSスプライトで検索エンジン(機械)に画像認識させない方法
    ufomap
    ufomap 2015/08/31
    画像を100くらいに分割する。やり方はいろいろあるが画像分割専用のフリーソフト(分割結合「あ」など)を使用すれば簡単に分割できる。 CSS3のフィルターで階調を反転させる
  • CSS Sprites化と画像減色でサイトを高速化 - エスカフラーチェLLC

    開発裏話1、開発裏話2、と紆余曲折を経てリリースした Twister Alternative ですが、今回はgihyo.jp の連載記事にも関連し、デザイン面からみたサイトの高速化のお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。 デザイン面でサイトの高速化というと不思議に思われる方もいらっしゃるのではないでしょうか。 Google App Engine のリクエスト制限 Twister では当初、Google App Engine で動いていました。Google App Engine ではリクエスト数に制限があるので、1回のページ読み込み時に発生するリクエストは最小限にしなければなりません。サイトの至るところで使われている一つ一つの画像はリクエストを増やしてしまう原因となります。 そこで

    ufomap
    ufomap 2008/08/19
    膨らんだ画像サイズを最小限に抑える工夫
  • 1