[B! CSS Sprite] amada717のブックマーク

amada717 id:amada717

CSS Spriteに関するamada717のブックマーク (2)

身につけておきたい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画像の例
amada717 2014/12/11
CSS Sprite

*WEB制作

performance

Retina対応
リンク
「CSS Sprite」で画像の表示速度を高速化する [ホームページ作成] All About
「CSS Sprite」で画像の表示速度を高速化する【ホームページの表示速度を速くする！】読み込む画像ファイルがたくさんあると、ホームページの読み込み速度が低下してしまいます。画像がたくさんあるなら、それらを「1つの大きな画像」に結合させてみましょう。すると、全体のファイルサイズも減り、通信回数も減るため、ページの読込速度が速くなります。複数の画像を1つにまとめ、スタイルシートを使って表示対象を選択するテクニック「CSS Sprite」の使い方をご紹介！ウェブサイト内の画像表示を高速化する「CSS Sprite」高速な回線が普及した今でも、ウェブサイトの表示速度は速ければ速いほど望ましいでしょう。ウェブサイトの表示が遅くなる要因の1つとして、「読み込む画像ファイルがたくさんある」という理由が挙げられます。画像1つ1つのサイズは小さくても、数がたくさんあれば読込完了までにかかる時間は長く
amada717 2012/05/04
CSS

CSS Sprite
リンク
1