原文: CSS スプライト: To Do or Not to Do?
翻訳元: スプライトするかスプライトしないか
免責事項: この記事で言及されている CSS スプライトはCSS スプライトです。このフレーズには、これを CSS スプライトと呼ぶ人もいます。不適切だと思われる場合は、試してみてください。今後も引き続き CSS スプライトと呼ばれます。シェンフェイ(ボーカル)
CSS スプライトはしばらく前から存在しており、Web サイトを高速化する方法として注目を集めています。 Steve Souders は、Velocity 09 で SpriteMe! を発表しました (canvas と toDataURL を使用してその場でスプライトを生成できるのに、なぜ CSS スプライト ジェネレーターやその他のサーバーベースのツールを使用するのかについて説明しました)。ただし、CSS スプライトについてはいくつかの誤解があり、主な誤解は、CSS スプライトには欠点がないということです。
CSS スプライトの基本原理は、Web サイトで使用されるいくつかの画像を 1 つの画像に統合し、それによって Web サイトに対する HTTP リクエストの数を減らすことです。画像は CSS の背景および背景位置プロパティを使用してレンダリングされます (これはタグがより複雑になることも意味し、画像は <img> タグではなく CSS で定義されることを意味します)。
CSS スプライトの最大の問題はメモリ使用量です。スプライト画像が注意深く整理されていないと、無駄な空白が大量にできてしまいます。私のお気に入りの例は、WHIT TV の Web サイトにあるもので、この画像がスプライトとして使用されています。これは 129915,000 ピクセルの PNG 画像であることに注意してください。また、非常によく圧縮されており、実際のダウンロード サイズはわずか約 26K ですが、ブラウザは圧縮された画像データをレンダリングしません。このイメージをダウンロードして解凍すると、約 75MB のメモリ (1299 * 15000 * 4) を占有します。この画像がアルファ透明度を使用しない場合、1299 * 15000 * 3 に最適化されますが、レンダリング速度が犠牲になります。それでも、約 55MB について話しています。この画像の大部分は実際には空白で、そこには何もなく、有用なコンテンツもありません。 WHIT ホームページをロードするだけで、その画像が 1 つあるだけでブラウザのメモリ使用量が少なくとも 75 MB 以上増加します。 ( PS: 残念ながら、ウェブサイトは最近改訂され、記事で言及されている写真はもう存在しません)
Web サイトを有利にする適切なトレードオフは存在しません。
もう 1 つの (それほど重要ではありませんが) 欠点は、CSS スプライトを使用するページが、一部のブラウザーが提供するページ全体のズーム機能を使用して拡大縮小される場合、ブラウザーはこれらの画像の端の動作を修正するために追加の作業を行う必要があることです。スプライト内の隣接する画像が露出するのを防ぎます。これは小さなイメージでは問題ありませんが、大きなイメージではパフォーマンスに影響を及ぼします。
CSS スプライトの明確な利点を示す例は確かにいくつかあります。主な例は、同じサイズの画像のバッチを 1 つのファイルに結合することです。たとえば、Web サイト上のさまざまなものを識別するために使用される一連の 16 × 16 のアイコンや、カテゴリ ヘッダーなどとして使用される 32 × 32 のアイコンなどです。ただし、サイズが大きく異なる画像、特に幅が広くて短い画像の隣に高くて薄い画像を組み合わせるのは決して良い考えではありません。
ただし、CSS スプライトにより、ページの読み込み時間は短縮されます (少なくとも最初のページ読み込み時とその後のページ読み込み時、ブラウザーは画像をキャッシュします)。何か代用できるものはありますか？残念ながら、代替手段はまだありません。多くのブラウザーはオフライン マニフェストのサポートを開始しており、リソースと対応する URL のリストを含むファイル (jar/zip ファイルなど) をダウンロードできるようにこれを拡張できる可能性があります。しかし、そのようなアプローチはしばらく見られないでしょう...
したがって、CSS スプライトを使用するかどうかを決定するときは、初期ページ読み込みパフォーマンス以外にも多くの要素があることに注意してください。一般的な経験則として、CSS スプライトの大部分に実際の画像コンテンツが含まれていない場合は、それに応じて使用しないようにする必要があります。同様に、メモリのバグやスプライトのパフォーマンスへの影響を回避しながら、ページの読み込み速度を維持しながら、将来起こり得る問題に注意してください。
その他の CSS スプライトの欠点
以下は、この記事のコメントで一部のネチズンによって言及された CSS Sprite の欠点の一部です。
CSS Sprite によって呼び出された画像は、RichB によって print ステートメントが @media に特別に追加されない限り印刷できません
Sprite で画像を変更したい場合は、画像全体を変更する必要があり、間違いなく Tom B の作業負荷が増加します。
使用中に他の CSS スプライトの不備を見つけた場合は、お気軽に指摘してください。