身につけておきたいWebサイト高速化テクニック #6｜HTTPリクエスト数削減テクニック02：CSS Sprite編 | DevelopersIO
はじめに 前回はHTTPリクエスト数削減テクニック01「インラインイメージ編」でData URI Encodeを使ったインラインイメージについて紹介しました。この記事をより深く解説した記事をCodezineさまに寄稿したのでこちらも参考にしてください。 今回はHTTPリクエスト数削減テクニックの2つ目「CSS Sprite」について解説します。 すでに定番のテクニックとなっていますが何となく使っていることが多いと思うので復習と思って読んでみてはいかがでしょうか。これから覚える方にも向けて丁寧に解説したいと思います。 1，CSS Spriteとは CSS Spriteとは、アイコンやナビゲーションなどのいくつかの画像を1つにまとめた画像（以降Sprite画像とする）を用意し、CSSのbackgroundプロパティを使って一部分のイメージだけを見せるテクニックです。代表的なSprite画像の例
CSSスプライト活用でリクエスト数を削減してスマホでも高速通信（Retina Displayにも対応） | DevelopersIO
CSSスプライトの利用について スマートフォンの普及に伴って、ネットへのアクセスは自宅のPCでのアクセスから出先の無線通信環境下でのアクセスへと移行している傾向が少なからずあるかと思います。 ウェブサイト等を快適に閲覧するための条件の一つに、より少ないサーバーへのリクエスト数が挙げられます。 複数の画像を集約した1枚の画像にまとめるCSSスプライトを活用することでリクエスト数を減らすことができます。 キャッシュに格納されたスプライト画像はページ遷移の際の高速通信につながりますので、 各ページで汎用的に使用されるアイコンなどをCSSスプライト化するとよいでしょう。 それらをRetina Displayのような高解像度ディスプレイに対応する方法を合わせて取り上げたいと思います。 方法 1.画像を用意する 非Retina Display用とRetina Display用の画像を2枚用意します。
『続・ハイパフォーマンスWebサイト』イベントに参加しました
こんにちは。Yahoo!検索の高林です。先日、書籍『続・ハイパフォーマンスWebサイト』（オライリー刊）に寄稿させていただいた関係でトークイベントに参加してきました。 お忙しいところ、たくさんの方々に出席していただき、ありがとうございます。 今回のイベントでは、「Yahoo!検索のパフォーマンス向上策全て見せます！」というテーマでYahoo!検索で実際に行っているTipsの紹介と現在、Yahoo!検索で検討しているシステム構成などを発表しました。 そのときの発表内容は、以下のリンクから確認できますのでご興味のある方はご覧ください。 『続・ハイパフォーマンスWebサイト』出版記念トークイベントのビデオを公開 (O'Reilly Japan) トークセッションでは来場者の方々にたくさんの質問をいただきました。今回はそのなかからいくつかピックアップしてご紹介したいと思います。 ――Q: Yaho
RsStudio Style - CSSSprite Extensionの紹介とドキュメント
2010/07/07 23:45 バグフィックス版 CSS Sprite Extension 1.1.2アップ 書き出しの際CSS中の画像への相対パスの算出方法を変更。深い階層においても正しく相対パスを生成できるようになりました。 2010/05/28 CS5対応版公開 旧バージョンを入れている方は上書きして良いか聞かれたら、上書きして大丈夫です。管理者権限のない方向け用VistaインストーラーはUninstallボタンを押して、再度swfを開くとInstallボタンが有効になります。新機能で選択した部分だけCSSをクリップボードにコピー出来るようになりました！ CSS Sprite Extensionは、Fireworks CS4とCS5に対応したFireworksの機能拡張でCSS Sprite(CSSスプライト)に適したCSSと画像を生成します。 この機能拡張が提供するのは、単純な3
CSS Sprites化と画像減色でサイトを高速化 - エスカフラーチェLLC
開発裏話1、開発裏話2、と紆余曲折を経てリリースした Twister Alternative ですが、今回はgihyo.jp の連載記事にも関連し、デザイン面からみたサイトの高速化のお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。 デザイン面でサイトの高速化というと不思議に思われる方もいらっしゃるのではないでしょうか。 Google App Engine のリクエスト制限 Twister では当初、Google App Engine で動いていました。Google App Engine ではリクエスト数に制限があるので、1回のページ読み込み時に発生するリクエストは最小限にしなければなりません。サイトの至るところで使われている一つ一つの画像はリクエストを増やしてしまう原因となります。 そこで
画像結合/CSS切出で転送量&HTTPリクエスト削減 - CSS Sprite Generator 2 | エンタープライズ | マイコミジャーナル
CSS Sprite Generator Ed Eliot氏およびStuart Colville氏は23日(米国時間)、CSS Sprite Generatorの最新版となるCSS Sprite Generator 2を公開した。CSS Sprite Generator 2はオーバーホールが実施されたメジャーアップグレードバージョン。以前のバージョンでは画像の結合にGDを採用していたが、新しいバージョンではImageMagicが採用されている。この変更で従来のバージョンよりも高品質な画像が生成されるようになったほか、発見されていたバグが修正されている。 またCSS Sprite Generator 2では追加機能として、PNGまたはGIF画像で利用する色数を指定できるようになったほか、JPEGに対する画動品質が指定できるようになっている。またPNGを使っている場合に出力を圧縮する目的でOp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
wearekiss.com
ゼロから学ぶ「CSS Sprite」
CSS Image Sprites Tutorial - Create Multiple Buttons With Rollovers
http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites
CSS Spriteを活用しよう - DesignWalker