画像リサイズのアスペクト比維持｜崩さないためのコツ
画像編集 Webデザイン 初心者
結論
リサイズ時は必ず**「縦横比を固定」**のチェックを入れるか、片方の数値（幅など）だけを指定し、もう一方は「自動（auto）」に任せましょう。
なぜアスペクト比が大事なのか
人物の顔が横に伸びたり、建物が縦に引き伸ばされた画像は、ユーザーに不快感や「手抜き感」を与え、サイトの信頼性を損ないます。
CSSでの対応策：object-fit
画像自体のサイズではなく、表示枠（コンテナ）に合わせてリサイズしたい場合は、CSSの object-fit が非常に強力です。
img {
width: 300px;
height: 200px;
/* 枠に合わせて、比率を保ったままトリミング（中央揃え） */
object-fit: cover;
}リサイズ時の注意点
- 拡大は厳禁 — 小さな画像を大きく引き伸ばすと、画質が極端に劣化（ボケ・ジャギー）します。リサイズは「縮小」が基本です。
- WebPへの変換 — リサイズと同時に次世代フォーマットのWebPに変換すると、画質を保ったままファイルサイズを大幅に削減できます。
画像はWebサイトの中で最も「重い」要素です。適切なサイズにリサイズしてからアップロードする習慣をつけましょう。