独学で極める “Webデザイン”の技と心：第10回 CSS Spritesでサイトを高速化｜gihyo.jp … 技術評論社

今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites（CSSスプライト⁠）⁠」についてのお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは？ 通常、ウェブページを制作する場合、デザインファイル（psdやpngなどの画像）をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。 それらの画像を一つにまとめ、１度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。 このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま

[sumiko10b]

CSSスプライト

[kana321]

CSS Spritesでサイトを高速化

[oremega]

css sprites

[m_pixy]

CSSスプライトの話。

[igrep]

CSS Sprites。かなり凝ったテクニックかと。

[jbrfb447]

CSS Sprites

[kotaro-ono]

css sprites について。パフォーマンス。

[doublemac]

css sprite

[motimoti0912]

a

[namikawamisaki]

「CSS Sprites用の統合画像が，アルファチャンネルを持った透過画像となっている場合，そのままではWindows IE6で正しく表示できません。」

[shunhouse552]

csssprites

[www_taca]

CSSスプライトについて

[gothedistance]

こういうのがあるんだ。

[sin_cos]

CSSスプライトに関して。ゲームでスプライト使ったことはあれど、使い方を覚えないと。

[nagatou]

cssスプライトの利用

[nukky55]

CSS Sprites

[wackey]

CSS Sprites

[Akaza]

CSS Sprites / サイト内の画像を1ファイルに収め、表示位置をbackground-positionで指定

[wozozo]

sprites

[nasunori]

Googleで使われているアレ。画像のリクエスト数を減らせる。

[mosi_mosi]

Web開発

[yukung]

サイト高速化テクニックの一つ．

[webmarksjp]

ウ

[kirinxuda]

[via:mento.info]

[Bill]

-moz-image-regionが標準仕様で幅広く使えたらいいのになー。http://d.hatena.ne.jp/Bill/20061104

[kanehama]

画像の読み込み回数が減らせるのはいいね。

[kurosaki0826]

技術としては知ってるけどやったことなかった。こうやって記事になってるのを見ると、試してみようかな！と思えるのが不思議。「あとで読む」にしてるあたり本当にやるかどうかはわからないけど！

[blanc2005]

書き方の問題なのか、画像の並び順通りに座標指定したつもりが、表示順が狂う場合があるんだよな〜

[masakanou]

O'reillyの「ハイパフォーマンスWebサイト」にも載ってる。/使うときはメンテナンス性とアクセシビリティに注意って感じか。

[mooiboom]

「CSS Sprites」という名前だと知らなかった。知識として。