[optipng] CSS spliteの画像は縦に並べるか、横に並べるか

なんかタイトルが某映画のタイトルみたいになってしまいましたが、



打ち上げ花火、下から見るか?横から見るか? Third Edition(DVD) ◆22%OFF！

CSS sprite の画像を作成する時に、縦にするか、横にするかは
どうでもいいけど、ちょっと悩んでしまいます。

Yahoo!のフロントエンド・エンジニアNate Koechleyが@media 2008で講演したときに使ったスライド

CSS Sprite

* 画像の敷き詰めは水平方向にする。
o 上下方向よりもサイズが節約できる、ことが多い

本当なのか、とりあえず、自分で画像を作成し、
optipngで圧縮してみた。

1. 水平方向

OptiPNG 0.6.1.1: Advanced PNG optimizer.
Copyright (C) 2001-2008 Cosmin Truta.

** Processing: ./css/icons.png
1008x16 pixels, 4x16 bits/pixel, RGB+alpha
Reducing image to 4x8 bits/pixel, RGB+alpha
Input IDAT size = 45231 bytes
Input file size = 45422 bytes
Trying:
zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 27378
zc = 9 zm = 8 zs = 1 f = 0 IDAT too big
zc = 1 zm = 8 zs = 2 f = 0 IDAT too big
zc = 9 zm = 8 zs = 3 f = 0 IDAT too big
zc = 9 zm = 8 zs = 0 f = 5 IDAT too big
zc = 9 zm = 8 zs = 1 f = 5 IDAT too big
zc = 1 zm = 8 zs = 2 f = 5 IDAT too big
zc = 9 zm = 8 zs = 3 f = 5 IDAT too big

Selecting parameters:
zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 27378

Output IDAT size = 27378 bytes (17853 bytes decrease)
Output file size = 27557 bytes (17865 bytes = 39.33% decrease)

2. 垂直方向

OptiPNG 0.6.1.1: Advanced PNG optimizer.
Copyright (C) 2001-2008 Cosmin Truta.

** Processing: ./css/icons.png
16x1008 pixels, 4x16 bits/pixel, RGB+alpha
Reducing image to 4x8 bits/pixel, RGB+alpha
Input IDAT size = 43963 bytes
Input file size = 44154 bytes
Trying:
zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 26818
zc = 9 zm = 8 zs = 1 f = 0 IDAT too big
zc = 1 zm = 8 zs = 2 f = 0 IDAT too big
zc = 9 zm = 8 zs = 3 f = 0 IDAT too big
zc = 9 zm = 8 zs = 0 f = 5 IDAT too big
zc = 9 zm = 8 zs = 1 f = 5 IDAT too big
zc = 1 zm = 8 zs = 2 f = 5 IDAT too big
zc = 9 zm = 8 zs = 3 f = 5 IDAT too big

Selecting parameters:
zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 26818

Output IDAT size = 26818 bytes (17145 bytes decrease)
Output file size = 26997 bytes (17157 bytes = 38.86% decrease)

今回の画像では、垂直方向の方が、若干サイズを抑えることが出来た。

css spriteの目的は、1つの画像になっていることが大切なので、
この程度のサイズの差なら、あまり気にする必要はないかもしれない。

css spriteは、手動で画像をつなげてcssを書き出して、、、とかやってると
時間がいくらあっても足りないので、スクリプトにするのが必須と考えている。

そのスクリプトを、起動オプションによって、
画像を垂直に並べるか水平に並べるかを指定して、
それに応じたCSSも出力できるようにするのがよい、ですな。