CSS Sprites のために画像を一枚に結合する

CSS Sprites とは

CSS Sprites(スプライト)というのは、複数の画像を一枚に結合することで、サーバーへの負荷を減らしウェブページの高速化を目的とするCSSを利用した技術のことです。

本来ページ上で使用する画像が複数ある場合、HTTPリクエストが画像ごとに発生してしまいますが、一枚ならHTTPリクエストも一度だけになるため、画像の結合がウェブページの高速化につながることになります。

複数の画像を結合する

複数の画像を一つに結合するのは、GIMPなどの画像編集ソフトを使用すればできますが、少し面倒です。

そこで今回は、複数の画像を結合してくれるオンラインサービスを紹介しておきます。

CSS Sprite Generator | Project Fondue

外部リンクCSS Sprite Generator | Project Fondue

c-059_logo

このサイトでは、結合したい画像をあらかじめ zip 形式で圧縮して送信し、「スプライト画像とCSSを作成」のボタンをクリックすることで、結合された画像のダウンロードリンクとCSSが表示されます。

色々細かく設定できますが、日本語表示できるため説明もいらないと思うので省きます。

Build Direction だけ訳されていないのですが、これは結合する際の方向のことです。Vertical (縦方向)/ Horizontal(横方向)

CSS Sprites Generator

外部リンクCSS Sprites Generator

  1. まず「参照」から結合したい画像を一つ一つ選択。

    足りない場合、「NEED MORE?」のボタンを押すことで増やせます。

  2. 次に「±options」のボタンを押すと、option が表示され細かく設定できます。
    c-059-otpion
    • Padding between elements / 画像間の余白
    • Border around the whole image / 結合後の画像の余白
    • Align elements / 画像の並び順
    • Background color / 背景色
  3. 設定が終わったら「GENERATE!」のボタンを押すことで、結合された画像へのリンクとHTMLへの表示方法が現れます。

結合された画像から表示させる方法

一枚に結合された画像は、background-position を用いた表示方法が一般的のようです。(現にオンラインサービスから画像とともに表示されるCSSソースもその方法ですし。)

とはいえ、私は clip を使用した方法で結合された画像から切抜き表示しているので、background-position による方法はあまり詳しく無いため説明を省きます。

サイト内関連ページ

スポンサードリンク

inserted by FC2 system