ドット絵1,723枚を個人で描いて
iOSアプリを出した話

ドット絵は食材・調味料・料理・UIアイコンまで全て描き下ろしです。 品目カタログが1,182種あるので、「豚こま」と「豚バラ」で別の絵が要る、という調子で増えていきました。

開発中はシミュレータで快適に動いていました。ところが実機に入れて、食材がタイル状に並ぶ画面を 勢いよくスクロールすると、ドット絵がギザギザに崩れて、そのうえ動作も重くなる。 最初は描画のレイヤー構成や再利用まわりを疑ったのですが、そこをいくら直しても改善しませんでした。

画像そのものを調べたところ、書き出していた PNG が 192×192 のトゥルーカラーで、 しかも1枚あたり 6,000〜13,000 色使われていました。

ドット絵風の絵にこの色数は要りません。見た目には数十色しか使っていないのに、 アンチエイリアスや書き出し時の変換で中間色が大量に混ざり、 結果としてPNGの圧縮がほとんど効いていない状態でした。 総容量は 68.4MB（平均 40.6KB/枚）。これが読み込みの詰まりとして表に出ていたわけです。

やったことは一つだけで、PNGをパレット化（truecolor+α → PNG-8）しました。 ドット絵は元々「限られた色を並べる」絵なので、パレット方式と相性が良く、見た目を保ったまま容量だけ落ちます。

最初、パレット化するときに色数を明示的に指定しました。少ないほど軽くなるからです。 ところがこれをやると、変換に使っていた sharp が絵によっては4bit（16色）まで落としてしまい、 冷やし中華の紅生姜が茶色に変わりました。赤が消えたわけです。

最後まで残っていたのが、スクロール中に一瞬出るギザギザです。 これは画像そのものの劣化ではなく、PNGの読み込みが間に合わない間に表示される 16×16 の下敷きでした。 つまり「低解像度のものが一瞬見えている」だけで、画像が軽くなって読み込みが速くなれば自然に見えなくなります。 容量の問題と見た目の問題が、同じ一つの原因から出ていたことになります。

• ドット絵風の絵でも、書き出し方によっては1枚に1万色以上入っていることがある
• その状態ではPNGの圧縮が効かない。パレット化するだけで-73%になった
• 色数を数値で絞ると絵として致命的な色が飛ぶことがある。品質指定に留めるほうが安全
• 「描画が重い」の原因が画像の作り方にあることは十分あり得る