先週、あるフォルダが届きました。中身は商品画像312枚。サイズは800×800から5472×3648までまちまちで、JPGとPNGに加えてHEICも数枚混ざっています。モールからの要件は「1600×1600のJPG、2MB以下」でした。同じ種類の仕事に、ブログの引っ越しがあります。PNGのイラスト200枚あまりをWebPに変換し、幅を1600以内に収めるというものです。別の作業に見えて、使うパイプラインは同じです。

工程を分けると画質が落ちる理由

直感的なやり方は、ツールを3つ続けて使うことでしょう。リサイズしてダウンロード、フォーマットを変えてダウンロード、最後に圧縮してまたダウンロード。どのツールも一括処理には対応していますが、工程が終わるたびにファイルが再エンコードされてしまいます。JPGは非可逆圧縮なので、エンコードのたびに情報が少しずつ失われ、3回も繰り返すと拡大したときに輪郭のブロックノイズやにじみがはっきり見えてきます。

正しいやり方は、エンコードを最後に1回だけにすることです。画像をいったんビットマップにデコードし、リサイズ・トリミング・形式変換はすべてメモリ上で行い、最終ステップで初めて指定のフォーマットと品質でファイルに書き出します。画像一括処理はこの考え方で作られています。6つの手順が決まった順序で並び、途中に劣化する工程はありません。

3つのツールで個別に処理した場合と、パイプラインで1回処理した場合の画質比較
同じ画像を3回再エンコードした場合(左)と、1回だけエンコードした場合(右)

シナリオ1:ECモール向け商品画像300枚

目標は、1600×1600、JPG、2MB以下、右下に店名入りです。手順ごとに設定していきます。

  1. サイズ:「1600×1600を埋める」を選びます。横長や縦長の画像は、まずこの枠をちょうど覆うところまで縮小されます。
  2. 比率でトリミング:1:1。正方形からはみ出した部分は中央から切り落とされるので、被写体が中央にある商品写真は影響を受けません。
  3. 透かし:オンにして、テキストに店名を入れ、位置は右下、サイズ4%、不透明度50%にします。
  4. 出力:JPG、品質85%。ファイル名は「name-001 形式にリネーム」を選び、プレフィックスにはSKUやカテゴリ名を入れます。

312枚は、ふつうのノートPCで3〜4分ほどで終わります。結果は200〜600KBに収まり、上限の2MBをはるかに下回ります。HEICの原本もそのまま読み込めるので、先に変換する必要はありません。ダウンロードしたZIPにはファイル名がきれいに連番で並んでいて、管理画面にアップロードする前に名前を直す手間もありません。

商品によっては被写体が片側に大きく寄っていて、中央トリミングだと切れてしまうことがあります。そうした画像は別に取り分け、画像トリミングで手動で範囲を決めてから、単独でパイプラインに通してください。1回のバッチでは、たいてい1割に満たない数です。

シナリオ2:ブログのギャラリーをWebPに移行する

目標は、すべてのイラストをWebPにして、幅を1600以内に収めつつ、スクリーンショットは鮮明なまま保つことです。最初のシナリオよりも設定はシンプルです。

  1. サイズ:「幅 1600」を選び、「拡大を許可」はオフにします。もともと1600より細い画像には手が加わりません。
  2. 出力:WebP、品質80%。
  3. ファイル名:元の名前のままにします。そうすれば記事内の参照は、拡張子を.pngから.webpに書き換えるだけで済みます。

200枚のPNGをこの設定で変換すると、たいてい容量が70%以上減ります。気をつけたいのは、背景が透過のロゴやアイコンだけです。WebPは透過に対応しており、パイプラインもアルファチャンネルを保持するので問題ありません。ただし出力をJPGにすると透過部分は白で塗りつぶされるため、そうした画像はPNGのまま残してください。

変換が終わったら、結果から2枚を画像形式変換に入れて、古いブラウザでどう表示されるかを確認しておきましょう。手間も少なく、安心できます。

「埋める」「収める」「長辺」はどう選ぶか

リサイズモードは、もっとも選び間違えやすい項目です。よく使う3つのモードは、それぞれ向いている場面が異なります。

  • 長辺:画像が大きすぎなければよく、縦横比は気にしないとき。ブログ用画像や共有アルバムに向いています。
  • 幅×高さに収める:画像全体をトリミングせずに枠の中へ入れたいとき。一辺に余白ができることがあります。サムネイルやスライドに向いています。
  • 幅×高さを埋める:枠を隙間なく覆い、はみ出した分は切り落としたいとき。モールのメイン画像、アイコン、比率固定のカード画像に向いており、たいてい「比率でトリミング」と組み合わせます。

簡単な見分け方があります。プラットフォームの条件が「○ピクセル以内」なら長辺か「収める」、「ちょうど○×○でなければならない」なら「埋める」を選びます。

実行前の2つのチェック

1つ目は、リアルタイムプレビューの確認です。パイプラインは1枚目に現在のすべての設定を適用して表示します。透かしの位置、トリミングで被写体が切れていないか、色味が変わっていないかが、ひと目でわかります。問題なければ「すべて処理」を押してください。300枚を処理し終えてから、店名が商品の上に載っていたと気づくのは避けたいところです。

2つ目は、元の画像を残しておくことです。パイプラインが元のファイルを書き換えることはありませんが、再エンコードされた出力にはEXIFや撮影情報が含まれません。ZIPをダウンロードする前に、原本がどこかに保存されているか確認してください。位置情報を消したい写真にとっては、むしろ好都合です。詳しくはEXIFメタデータとは何か、なぜ削除するのかをご覧ください。

画像の一括リサイズと形式変換は、突き詰めれば「一度設定し、全体を実行し、途中でディスクに書き出さない」の一言に尽きます。あとは、3つのリサイズモードと2つの出力フォーマットから選ぶだけです。