大事な部分を失わずに画像サイズを変える

店舗用には正方形が必要でも、元の写真は横長かもしれません。出力の寸法だけでなく、どの部分を省いてよいかも考えます。

ピクセル数より先に縦横比を考える

縦横比は幅と高さの関係で、ファイル容量ではありません。比率を保てば顔や円の形を維持できますが、幅と高さを別々に変えると歪むことがあります。

同じ写真の小さい版なら比率を保ちます。決まった形に収める場合は、余白を付けて全部を見せるか、切り抜いて全面を埋めるかを選びます。

参考資料: MDN — Aspect-preserving contain and cover, and stretched fill

切り抜きは内容にも影響する

全体を収める方法は余白ができることがあります。全面を埋める方法は比率を保って余分を切り落とします。引き伸ばしは切らずに埋めますが、形を歪める可能性があります。

ToolRoofは中央を基準に切り抜き、被写体を自動検出しません。端や文字を確認してください。価格、ロゴ、文書の重要部分を落とすと、見た目以外も変わります。

参考資料: MDN — Aspect-preserving contain and cover, and stretched fill

寸法が合っても見た目を確認する

静止画のJPEG、PNG、WebPをローカルで処理します。アニメーションは対象外で、拡大しても元にない細部が復元されるとは限りません。

元画像を保存し、使う大きさで結果を確認します。透過画像では形式も確認してください。JPEGは透過を残さず、選択した背景色を使います。

例:横長の写真を正方形に入れる

1600 × 900を800 × 800に全体表示で収めると、画像は800 × 450、上下の余白は各175ピクセルになります。切り落としはありませんが、写真だけで正方形を埋めることはできません。

全面を埋める場合は中央900 × 900を取り、左右から元画像の350ピクセルずつを除いて800 × 800に縮小します。商品が端にあるなら、別の写真では切り抜きがきれいでも、全体表示の方が適切かもしれません。

参考資料