Office ORA

オフィスORAの新サービス Spritebox.IO


Spritebox.IOは、CSS Sprite手法をWebサイト・Webアプリ・スマホアプリなどで利用するためのオンラインサービスです。

無料でも利用できますので、まずはお気軽にお試しください。 本格的に利用されたい場合は有料プランをサブスクライブし、Spritebox.IOの機能を十分に活用してみてください。

CSS Sprite手法を導入するメリット

CSS Sprite(CSSスプライト)手法とは、以下のように複数の画像を1つの画像にまとめた画像を用意し(この例では3枚の画像を縦にならべて1枚の画像にしています)、CSSのbackgoundプロパティを利用することでまとめた大きな画像から対象画像のみを表示する。。というHTML+CSS手法です。

これを使うことで以下のようなメリットがあります。

以下の例を見てみてください。

これはSpritebox.IOのトップページのページロード時にロードされる画像の一覧です。
6個の画像がロードされるので、Webサーバーには6回のリクエストが送信され、6回のレスポンスがあったことを示しています。
データの転送量は、全部で1204.8Kバイトとなっています。

これは同様のページの一部の画像にCSS Sprite手法を適用した場合の一覧です。
home1.jpg / home2.jpg / home3.jpgをsphome.jpgというCSS Sprite画像にまとめました。
このことで元々6回のリクエストをWebサーバーに送り6回のレスポンスを受けていたページが4回のリクエスト・4回のレスポンスで済むようになりました。
データ転送量も、1204.8Kバイトだったのが445.8Kバイトに削減できました。
1ページのロードでリクエスト数を約65%に、転送量を約37%にできたわけです。
Webサーバーに対する負担がかなり減らすことができることがご理解いただけると思います。
データ転送量に課金されるAWS EC2などでサーバーを運用している場合、ランニングコストに大きくヒットするケースがありますので、是非CSS Sprite手法の導入を検討していみてはいかがでしょうか?
導入時にはSpritebox.IOが大きくあなたをお助けできると思います。

Spritebox.IOを利用するメリット

CSS Sprite手法のメリットをご理解いただいたところで、その導入にSpritebox.IOが如何に便利かをご説明したいと思います。
一般にCSS Sprite手法を導入するには以下の手順を踏まなければなりません。

そして、ページの更新や変更時には、、、

という作業が必要になります。
この作業の単調さや大変さでCSS Sprite画像の導入に二の足を踏んでこられた方も多いのではないでしょうか?
しかし、Spritebox.IOでは、上記手順リストの青文字の項目をSpritebox.IO上での簡単なマウス操作のみの作業に置き換えることができます。
1つのWebサイトでも、CSS Sprite手法を導入する作業には多くの人手(コスト)がかかります。
これを軽減できる、、、それがSpritebox.IOを利用するメリットです。