CSSスプライトで検索エンジン(機械)に画像認識させない方法
突然ですが問題です。この記事のトップに貼られている画像はなんでしょう？ ヒント：写真の対象は死んでいます。 正解の写真はこちら この記事のトップにある写真もリンク先の正解の写真も読み込んでいる画像は同じです。しかし後者はスプライトで位置を入れ替えて人間が見た時に写真が何かを認識できるようになっています。 検索エンジン(機械)は画面上にCSSスプライトで位置調整して表示された画像ではなく読み込んだ画像を収集するためCSSスプライトを使用すると何の画像か解析されることができなくなります。 現在の機械はゴリラと黒人の方の区別がつかないようなレベルだが、将来的には性別や人種までも高精度で判別できるようになる。 もしもサイトに画像を表示したいがロボットの画像認識を避けたい画像がある場合はこのような画像認識防止対策が現在のところ有効だ。 画像認識させない画像の作り方 1. 元画像を分割する 画像を10
独学で極める “Webデザイン”の技と心：第10回 CSS Spritesでサイトを高速化｜gihyo.jp … 技術評論社
今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites（CSSスプライト）」についてのお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは？ 通常、ウェブページを制作する場合、デザインファイル（psdやpngなどの画像）をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。 それらの画像を一つにまとめ、１度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。 このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま
[CSS]CSS Spritesに利用できる画像置換の実装例いろいろ | コリス
複数の画像を一枚にまとめて、スタイルシートで背景画像として指定するCSS Spritesに利用できる画像置換の実装例の紹介です。 画像置換する際には、CSSオフ時・画像オフ時・印刷時・音声ブラウザ対応・空タグ使用などを考慮する必要があります。 備考 コードは、参考サイトからサイズ指定などを変更しています。 画像置換元は、全てH3要素になっています。 H3は、テキスト(見出しのテキスト)もしくは画像(印刷用の見出し画像)です。 ブラウザに「背景画像」が表示されていれば、期待通りの動作です。 使用している画像は、次の通りです。 背景画像 印刷用の見出し画像 1pxの透過画像 名称は、Revised Image Replacementを参考にしています。 サンプル:01 -Classic FIR デモページ <textarea name="code" class="html" cols="60"
![[CSS]CSS Spritesに利用できる画像置換の実装例いろいろ | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
CSS Sprites化と画像減色でサイトを高速化 - エスカフラーチェLLC
開発裏話1、開発裏話2、と紆余曲折を経てリリースした Twister Alternative ですが、今回はgihyo.jp の連載記事にも関連し、デザイン面からみたサイトの高速化のお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。 デザイン面でサイトの高速化というと不思議に思われる方もいらっしゃるのではないでしょうか。 Google App Engine のリクエスト制限 Twister では当初、Google App Engine で動いていました。Google App Engine ではリクエスト数に制限があるので、1回のページ読み込み時に発生するリクエストは最小限にしなければなりません。サイトの至るところで使われている一つ一つの画像はリクエストを増やしてしまう原因となります。 そこで
CSS Sprite is good? | Webデザイン フリーフォント Prismtone
CSS（必要に応じてXHTML）に手を加えて、 ページの高速化+更新を楽にする。 ■CSS Sprite 画像置換の拡張版のような感じで、 背景画像を１枚の画像に統合してしまうやりかた。 そういう使い方ができるのはわかってはいたけれども、 ページ高速化も期待できるとは目から鱗。 独学で極める "Webデザイン"の技と心：第10回 CSS Spritesでサイトを高速化｜gihyo.jp http://gihyo.jp/design/serial/01/ss-design/0010 CSS Spriteを活用しよう - DesignWalker http://www.designwalker.com/2008/02/css-sprite.html 文字背景などで使う分には全く便利すぎるというか、 そうしていこうと思いましたが、 display: none;で文字を消すのはどうなんだろうと少し
CSS Sprite Generator, Editor, and Code
What are CSS Sprites CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. This technique can
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Sprites ～CSSの最新技術～ - SHOWTIME:WEB STUDY: とあるweb制作者のサイト
HugeDomains.com
CSS Sprites Generator Tool | Toptal®
CSS Spriteを活用しよう - DesignWalker