Fireworksで画像の一部を圧縮してjpgに書きだす

()

ECサイトに携わっている場合、バナーを外部の様々な媒体に出稿することがあると思います。

その際、会社のロゴの圧縮率は80%以上保持したまま、50KB以内に抑えろというようなレギュレーションがあったりします。

Photoshopでそんな特定のエリアの圧縮率変えて、1枚の画像に書きだすなんて出来るの?と困惑しますが、ここではFireworksの出番です。

西東京名物スタ丼を例に、肉の部分の圧縮率を80%以上に保持したまま、それ以外の部分の画質を下げて、50KB以内に抑えるというミッションを遂行してみます。

元の画像はドコモのガラケーで撮影した、640x480の102KBある画像です。

西東京名物スタ丼
 

1. JPEGマスクの設定をする

ある特定の部分の画質を高品質に保つにはFireworksのJPEGマスクという機能を使います。変更 > JPEGマスクの設定 > 設定 からJPEGマスクを利用できるようにします。

JPEGマスクの設定をする1
設定画面が出たら、「圧縮率による画質設定を有効にする」にチェックを入れて、適当な数字を入力します。ここはあとで変更できます。

JPEGマスクの設定をする2


下にあるテキストの〜、ボタンの〜部分についてはアドビサイトを確認下さい。

 

2. 画質を保持したい部分にマスクをかける

高画質にしたい部分を選択ツールから選択します。

画質を保持したい部分にマスクをかける
そうしたら、変更 > JPEGマスクの設定 > 選択範囲をJPEGマスクとして保存 に進み、選択エリアにマスクをかけます。

画質を保持したい部分にマスクをかける2

マスクをかけると1の設定画面で出てきたオーバーレイカラーがエリアに反映されます。

画質を保持したい部分にマスクをかける3
 

3.最適化パネルから画質を調整

JPEGマスクを適用したら、マスク部分の画質を最適化パネルから設定します。

最適化パネルから画質を調整

1の設定画面で80と入力してあったので、80が設定されています。80%の圧縮率でよければこのままにします。

それ以外の部分の画質を下げるとプレビューとして反映されますが、ここでは実際のサイズを確認出来ないので、書き出し時にここは調整します。

 

4.画像プレビューからサイズを確認しつつ書き出し

ファイル > 画像プレビュー から書き出しの準備に入ります。

画像プレビューからサイズを確認しつつ書き出し

ここでJPEGマスク以外の部分の画質を調整しながら容量を目標数値に近づけます。意図した状態になったら書き出して完了です。

スタ丼完成ここではわかりやすくするために、肉の画質を80%保持して、その他の部分を20にして、約40KBに抑えました。

そんな感じです。

Webに最適化された画像はやはりFireworksでってことですね。

戦意

© 2012 戦意