
✓この記事でわかること
- 14000×3000pxを中央で4:5にすると、左右800pxずつを外して2400×3000pxを残す
- 2同じ比率でも残す位置で商品やラベルが切れるため、写真ごとに確認する
- 3切り抜き・縮小・再圧縮は別の処理で、提出先の比率と必要な情報を優先する
写真を切り抜く前に、提出先の比率と、写真のどの部分を残すかを決めます。ここでは4000×3000pxの説明用画像を4:5にする計算から、中央に残せる範囲と、位置を変える必要がある場合を比較します。商品写真なら傷や付属品、申請用なら指定された顔の大きさも確認します。印象や売上が改善するかを測定した記事ではありません。
1. 4000×3000pxを4:5にすると、左右を何px切るか
画像の左上をx=0、y=0とします。高さ3000pxを残す場合、4:5の幅は3000×4÷5=2400pxです。元の幅4000pxとの差1600pxを左右へ等分するので、左800px、右800pxを外します。
中央を残す計算例
- 入力:4000×3000px
- 残す範囲:x=800、y=0、幅2400、高さ3000
- 縮小しない出力:2400×3000px、比率4:5
- 幅1080pxへ縮小する場合:1080×1350px
元画像の1200万画素に対し、切り抜き後は720万画素です。残る画素数は60%ですが、「画質が60%になる」という意味ではありません。縮小・保存形式・JPEGなどの再圧縮は別の処理です。この数値は座標と寸法による計算例で、写真をツールで実保存した測定値ではありません。
2. 被写体が中央にない場合は、同じ比率でも位置を変える
同じ画像の右側、x=3300付近に商品ラベルがあると仮定します。中央の範囲はx=800から3200までなので、そのラベルは残りません。幅2400pxを変えずに右へ寄せ、x=1600から4000までを残すと、ラベルを含められます。一方、左側に付属品があれば、この変更で切れる可能性があります。
先に「商品本体・傷・ラベル・付属品のうち、この写真で説明するもの」を決めて範囲を確認します。すべてを1枚に入れられなければ、比率を無理に保つのではなく、全体写真と詳細写真へ分けます。三分割の線は位置を考える補助で、必ず交点へ置けばよいという条件ではありません。
3. 4:5・正方形・印刷用の比率を混同しない
同じ4000×3000pxから中央を正方形にする場合は、x=500、y=0、幅3000、高さ3000です。4:5とは切れる範囲が異なります。SNSや販売サイトで使う比率は、投稿時の対応条件と一覧画面の表示枠を確認して選びます。一つの比率をどのサービスでも「最適」とは扱いません。
A4用紙は210×297mmで、縦横比210:297です。4:5の画像をA4いっぱいに配置すると比率が合わず、余白を残すか、さらに切るかの選択が必要になります。申請写真は提出先の顔の大きさ・背景・余白の規定を優先し、構図を整えるための切り抜きと分けて判断します。
4. 一括処理では、比率が同じでも残る内容を個別に見る
中央に商品がある写真と、右へ寄った写真へ同じ中央切り抜きを適用すると、後者だけ商品が切れる場合があります。複数枚で比率と出力寸法をそろえる場合も、保存前に各画像の本体・文字・端の欠けを確認します。1枚ずつ位置を決めたい場合は個別のトリミングを使います。

原本を残し、出力を開いて寸法と見切れを確認します。切り抜いた範囲の外にあった情報は出力画像から取り戻せません。また、画面に収まっていても、掲載先が別の比率で表示する場合があるので、実際の掲載枠でも確認してください。
参考情報
- MDN:CanvasRenderingContext2D.drawImage() — 元画像内の切り抜き座標・寸法と、描画先の拡大縮小を分ける仕組み。2026年10月5日確認。
