画像リサイズガイド：幅・パーセント・長辺での拡大縮小

画像のリサイズが必要な場面

最も多いのはサイズ指定がある場合です。応募システムが幅を制限していたり、SNS が長辺の上限を決めていたり、EC が商品画像の幅を統一するよう求めたりします。元のままアップロードすると拒否されたり、プラットフォーム側でさらに圧縮されてぼやけたりします。適切なサイズで書き出すほうが結果を管理できます。

見た目を揃えたい場合もあります。アイキャッチ、商品一覧、スライドの画像は、幅がばらばらだとレイアウトが乱れます。セット全体を同じ幅に縮めてから高さを調整するほうが、1 枚ずつ手で直すより安定します。容量を減らすだけなら、品質を下げるよりサイズを変えるほうが効くことも多いです。

3つのモードの選び方

幅指定は、横のサイズが決まっている場面に向きます。高さは元の比率から計算されるため、同じ組でも高さは揃わないことがあります。パーセントは幅と高さを同じ率で変えるので、素材一式を半分にしたいときに向きます。長辺指定は「長い辺を一定以下にしたい」場合に便利で、横長も縦長も同じように制限できます。

多くのリサイズツールは縦横比を固定します。顔や商品が潰れないので望ましい動作です。固定サイズが必要なら、先に目標の比率でトリミングしてからリサイズします。4:3 を 16:9 に内容を削らず変えるには、引き伸ばしではなく余白を足す必要があります。プリセットは出発点と考え、書き出す前にピクセル数を確認してください。

• 幅の指定がある：幅指定を使う
• セット全体を揃える：パーセントを使う
• 長辺だけ制限する：長辺指定（通常は縮小のみ）

代替手段と、リサイズしないほうがよい場合

小さい画像を拡大しても情報は増えません。canvas は既存のピクセルの間を補間するだけなので、小さい画像を大きく引き伸ばすほど輪郭が甘くなります。本当に解像度が必要なら、元の高解像度ファイルを探すか、専用の超解像ツールを使ってください。小幅な拡大は許容できますが、倍率が大きいほど差が出ます。

Web では表示サイズが違うだけで、ファイルを変える必要がないこともあります。CSS で表示を制御し、srcset で画面に合った画像を選ばせれば柔軟です。実際のピクセルを変える必要があるのは、アップロード制限、印刷、オフライン納品などの場面です。原本を残し、リサイズ版は別名で保存します。