ネットショップの商品画像は、サイズ・比率・容量がバラバラだと一覧ページの見栄えが崩れ、表示速度も落ちます。 撮影した写真を「リサイズ→トリミング→圧縮」の順に一括処理する手順を、実務の流れで説明します。

1. 掲載サイズの基準を先に決める

作業を始める前に、商品一覧・商品詳細それぞれで使う掲載サイズと比率を決めておきます。 多くのECサイトは正方形(1:1)の一覧サムネイルを使うため、迷ったら正方形を基準にすると統一感が出しやすくなります。 基準が曖昧なまま加工すると、あとから全件やり直すことになります。

2. リサイズで長辺を揃える

撮影直後の写真は解像度も向きもバラバラです。まず長辺を指定サイズに合わせて一括リサイズし、 極端に大きい画像を扱いやすいサイズまで縮めます。この段階では比率はまだ揃えず、後工程のトリミングで整えます。

3. トリミングで比率を統一する

リサイズ後、掲載先で決めた比率(多くは正方形)にフォルダごと一括でトリミングします。 基準点を商品の中心に合わせておけば、商品が枠からはみ出したり、余白が偏ったりするのを防げます。 背景の余白量が写真ごとに違う場合は、基準点だけ個別に調整すると効率的です。

4. 圧縮で容量の上限を決める

サイズと比率が揃ったら、最後に容量を圧縮します。「1枚150KB以内」のように 上限を決めて自動で品質を調整する方式にしておけば、商品ごとに見た目の重さがバラつきません。 商品点数が多いサイトほど、この一括処理の有無がページ全体の表示速度に直結します。 一覧ページに数十点並ぶことも珍しくないため、1枚あたりの軽さがそのままページ全体の快適さに跳ね返ります。

5. ファイル名と出力先を整理する

加工後の画像は、元のファイル名や商品番号が分かる形で出力すると、ショップシステムへの登録時に迷いません。 元画像は別フォルダに残したまま、加工後の画像だけを新しいフォルダにまとめる運用にしておくと、 サイズや比率を変更したくなったときに元画像からやり直せます。 複数人で作業する場合は、フォルダ構成をあらかじめ共有しておくと、ファイルの取り違えを防げます。

6. やってはいけないこと

  • 加工前の画像を上書きしない … リサイズ・トリミング・圧縮はいずれも元に戻せない処理です。原本は必ず別に保存します。
  • 商品ごとに比率をバラバラにしない … 一覧ページで比率が混在すると、並びが乱れて見えます。
  • 圧縮を先にしてからリサイズ・トリミングしない … 先に圧縮すると、後工程で画質がさらに劣化します。リサイズ→トリミング→圧縮の順序を守ります。

まとめ

掲載サイズの基準を決め、リサイズ→トリミング→圧縮の順に一括処理する。 この流れをテンプレート化しておけば、商品点数が増えても仕上がりの統一感を保ったまま作業時間を抑えられます。