画像の軽量化:マスクを用いた画像の最適化方法

PhotoshopでJPEGやGIF画像を書き出す際、マスクを用いて画像の最適化を行い、ファイルサイズの軽量化ができる方法の紹介です。

マスクを用いて最適化を行った画像

via:Optimizing JPEGs

pat-burt.comを参考に、いつものバナナ画像で最適化・軽量化を行いました。また、下記のadobeのページも参考にしました。
マスクに基づく最適化の変更[adobe]

まず、画像の中の重要な箇所をマスクのホワイト(抜き)に、重要ではない箇所をブラック(赤)にします。
※形状通りにマスクするのがベストですが、画像の劣化や容量をテストするため上下半々にしています。

マスクを用いた画像のキャプチャ

ファイルメニューより[Web用に保存...]を選択し、「画質」の右にある「マスクボタン」(下記画像の赤丸の箇所)をクリックし、「画質設定を変更」画面を開きます。

Photoshopの「Web用に保存...」画面のキャプチャ

「画質設定を変更」画面で、使用するチャンネルを選択し、画質の最小値と最大値を設定します。

「画質設定を変更」画面のキャプチャ

上記の設定で書き出した画像は82KB、100%JPEGで書き出した画像は101KBでした。
手間はかかりますが、ファイルサイズを抑えつつ、マスクで指定した重要な箇所は高画質で書き出すことが可能でした。

sponsors

top of page

©2018 coliss