コーディングメソドロジー

第59回 画像の書き出し(最適化)設定について

コーディングする際、地味ですが重要な工程として画像の切り出し作業があります。切り出し時のポイントして、「最適化」「効率化」「軽量化」が挙げられると思うのですが、軽量化以外については、google等で検索してみてもあまり詳しく語られているページにヒットしない印象があります。そこで今回は、実は意外と知られていない?!PSDからの画像の書き出し(最適化)設定についてご紹介します。

GIF/PNG8の場合の設定例

GIF/PNG8の場合の設定例
  • ファイル形式を選択。
  • 減色方法(使用色のサンプル方法)を選択。基本的に「特定」を選択。
    【知覚的】肉眼の知覚度を優先した方法。
    【特定】デフォルト設定。カラー保全が主体。使用色の範囲が広い。
    【割り付け】スペクトルの高いところからサンプリングするので、ある特定の色や色系統に集中している場合に有効。
  • 色数の設定。基本的には「256」のままでOK。
  • ディザ処理方法の選択。
    【ディザなし】カラーテーブル内のサンプルが256色以下の場合に選択。
    【誤差拡散法】色数が多いイラストやアイコン、サムネ写真などに有効。「誤差拡散法」の場合のみ、ディザの適用量を調整する。(切り出しにかかる工数を考えると、はギザギザに違和感がある場合のみでよい。)
    【パターン】グラデーションなど滑らかな色変化をする場合に有効。
  • 透明で抜く場合にチェック。
  • 半透明部分の背景がマット(単色)な場合、その色を選択。
  • 半透明部分のディザ処理方法を選択。基本的に「透明ディザなし」を選択。(「誤差拡散法透明ディザ」を選んだ場合は、ディザの適用量を調整する。)
  • メインビジュアルなど、画像のファイルサイズが大きい(表示に時間がかかることが見込まれる)場合にチェック。load中に画像が段階的に表示される。
  • カラープロファイルをsRGB(異なる環境間で色の再現性を確保する、色空間の国際標準規格)に変換する。基本的にチェックを入れておく。
  • 頻繁に使う設定は、「設定を保存」しておくと便利。(プリセットリストに入る)

以下は、余程のことがない限り、通常ではほぼ使わない機能なので割愛。
ディザを発生しにくくするための、近似カラーシフト量。劣化量(非可逆圧縮の適応量)

jpgの場合の設定例

jpgの場合の設定例
  • ファイル形式を選択。
  • ②③画質を選択する、もしくは数値を入れる。基本「80」で設定。画質を落とす/上げる場合、ここから数値を1ずつ変化させ、劣化具合をみつつ最適値に調整する。
    特に、文字の周辺や人の顔などは劣化が顕著に表れるので、注意しつつ調整する。(画質をある程度落としつつ荒れを目立ちにくくする方法として、ぼかし設定がある。ぼかし(ガウス)と同じ効果なので、0.1~なるべく最小限に抑える。)
  • ⑤⑥通常は最適化にチェック。メインビジュアルなど、画像のファイルサイズが大きい(表示に時間がかかることが見込まれる)場合に、「プログレッシブ」にチェック。load中に画像が低解像度表示から高解像度表示へと段階的に変化していく。
  • 元画像の透明部分(背景)の色の指定があれば設定する。
  • カラープロファイルを埋め込むとファイルが重くなるので、基本的にはチェックをはずす。
  • カラープロファイルをsRGB(異なる環境間で色の再現性を確保する、色空間の国際標準規格)に変換する。基本的にチェックを入れておく。
  • 頻繁に使う設定は、「設定を保存」しておくと便利。(プリセットリストに入る)
工数とクオリティのバランスを忘れずに
画像詳細設定を細かにご紹介しましたが、通常、必ず厳密に設定する必要はありません。最低限の設定を押さえておくだけでも、ムダに容量が増えることや、ムダな画像の劣化が回避でき、画像の質にあった出力ができるようになります。
  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム