モバイルサイトで使われる画像の容量を落とす方法

PC 用の画像を用意する場合は Photoshop で用意するだけで大丈夫なことが多いですが、モバイルサイトではそうはいきません。
Photoshop で容量を減らしてもキレイにはできないからです。

容量の減らす方法は2つあります。

・psdデータを Fireworks を使って減色する方法
・最初から Photoshop の鉛筆ツールを使ってドットで描いていく方法。

イラストを描いたものや写真、デコメ等、何を減色するかによって作業方法は変わります。

【01】 psdデータをFireworksを使って減色する方法

「livedoor Blog モバイル版」のデザインテンプレートのヘッダ画像を使って説明したいと思います。

ヘッダ画像の容量は4k 以内、拡張子は gif と jpg というレギュレーションとなっています。
今回は gif バージョンの説明をします。

1.まず photoshop で画像を作ります。

この時点で容量は9k 程度あります。

2.その後に Fireworks を使って減色作業に入ります。

大まかに青丸の部分で色数を減らした後、赤丸の様に、ひとつひとつ色を選択して類似した色を捨てて
容量を減らしていきます。

3.完成した画像はこちらです。

大体はこの作業で問題なく減色することができます。

ですが今回の場合は、最初の psd データと比べると花や小鳥の立体感が無くなってしまいましたね。。

そんな時は、

Fireworksである程度作業をした後、一度Photoshopで作業して下さい。

2の工程で類似した色を消しても思い通りいかない場合があります。
そういった場合は、一度大まかに減色をした後に、Photoshop の鉛筆ツールで色を付け加えたり、
同系色は同じ色に塗りつぶしたりします。
ある程度整えたら、もう一度 Fireworks で減色作業をします。

完成した画像がこちらです。

3番目の画像と4番目の画像を比べると容量は同じでもクリエイティブが違いますよね。

この2つのソフトを何度も使うことによって容量の少ないキレイな画像ができます。
ちょっとした手間をかけることが大事です。

【02】最初からPhotoshopの鉛筆ツールを使ってドットを描いていく方法

バナーやデコメではこういった作業を行います。
特にバナーでは2k 以内が多いため、最初からドットで絵を描かないと厳しいです。

鉛筆ツールを使って絵をドットで描くことによって、アンチがかからず余計な容量が増えません。

上の画像の絵は全てドットで描いたものです。

フォントも MS ゴシックなどアンチなしで書くか、ドットで直接描きます。
小さい画像サイズの場合は特にこういった作業が必要です。

上の画像もフォントを使って描いたものや手書きで描いたものです。

いかがですか？
少しの手間をかけることでキレイで容量の少ない画像を作ることができます。

様々な端末たくさんがあり、キャリアごとに仕様も違います。
上位端末、下位端末それぞれ表示できる容量も違ってきます。
１つの画像に対して様々なサイズ、拡張子は gif,png,jpg、いくつも必要になります。
そのため、最初に説明した作業を繰り返し行います。
意外に地味な作業が多いです。