- Coding Methodology
- 第59回 画像の書き出し（最適化）設定について
第59回 画像の書き出し（最適化）設定について
コーディングする際、地味ですが重要な工程として画像の切り出し作業があります。切り出し時のポイントして、「最適化」「効率化」「軽量化」が挙げられると思うのですが、軽量化以外については、google等で検索してみてもあまり詳しく語られているページにヒットしない印象があります。そこで今回は、実は意外と知られていない？！PSDからの画像の書き出し（最適化）設定についてご紹介します。
- GIF/PNG8の場合の設定例
-
- ①ファイル形式を選択。
- ②減色方法（使用色のサンプル方法）を選択。基本的に「特定」を選択。
【知覚的】肉眼の知覚度を優先した方法。
【特定】デフォルト設定。カラー保全が主体。使用色の範囲が広い。
【割り付け】スペクトルの高いところからサンプリングするので、ある特定の色や色系統に集中している場合に有効。 - ③色数の設定。基本的には「256」のままでOK。
- ④ディザ処理方法の選択。
【ディザなし】カラーテーブル内のサンプルが256色以下の場合に選択。
【誤差拡散法】色数が多いイラストやアイコン、サムネ写真などに有効。「誤差拡散法」の場合のみ、⑤ディザの適用量を調整する。（切り出しにかかる工数を考えると、⑤はギザギザに違和感がある場合のみでよい。）
【パターン】グラデーションなど滑らかな色変化をする場合に有効。 - ⑥透明で抜く場合にチェック。
- ⑦半透明部分の背景がマット（単色）な場合、その色を選択。
- ⑧半透明部分のディザ処理方法を選択。基本的に「透明ディザなし」を選択。（「誤差拡散法透明ディザ」を選んだ場合は、⑨ディザの適用量を調整する。）
- ⑩メインビジュアルなど、画像のファイルサイズが大きい（表示に時間がかかることが見込まれる）場合にチェック。load中に画像が段階的に表示される。
- ⑬カラープロファイルをｓRGB（異なる環境間で色の再現性を確保する、色空間の国際標準規格）に変換する。基本的にチェックを入れておく。
- ⑭頻繁に使う設定は、「設定を保存」しておくと便利。（プリセットリストに入る）
以下は、余程のことがない限り、通常ではほぼ使わない機能なので割愛。
⑪ディザを発生しにくくするための、近似カラーシフト量。⑫劣化量（非可逆圧縮の適応量）
- jpgの場合の設定例
-
- ①ファイル形式を選択。
- ②③画質を選択する、もしくは数値を入れる。基本「80」で設定。画質を落とす／上げる場合、ここから数値を1ずつ変化させ、劣化具合をみつつ最適値に調整する。
特に、文字の周辺や人の顔などは劣化が顕著に表れるので、注意しつつ調整する。（画質をある程度落としつつ荒れを目立ちにくくする方法として、④ぼかし設定がある。ぼかし（ガウス）と同じ効果なので、0.1～なるべく最小限に抑える。） - ⑤⑥通常は最適化にチェック。メインビジュアルなど、画像のファイルサイズが大きい（表示に時間がかかることが見込まれる）場合に、「プログレッシブ」にチェック。load中に画像が低解像度表示から高解像度表示へと段階的に変化していく。
- ⑦元画像の透明部分（背景）の色の指定があれば設定する。
- ⑧カラープロファイルを埋め込むとファイルが重くなるので、基本的にはチェックをはずす。
- ⑨カラープロファイルをｓRGB（異なる環境間で色の再現性を確保する、色空間の国際標準規格）に変換する。基本的にチェックを入れておく。
- ⑩頻繁に使う設定は、「設定を保存」しておくと便利。（プリセットリストに入る）
- 工数とクオリティのバランスを忘れずに
- 画像詳細設定を細かにご紹介しましたが、通常、必ず厳密に設定する必要はありません。最低限の設定を押さえておくだけでも、ムダに容量が増えることや、ムダな画像の劣化が回避でき、画像の質にあった出力ができるようになります。
