ウェブ用に画像をリサイズ・切り抜きするには

リサイズと切り抜きは同じことのように聞こえますが、別々の問題を解きます — そしてこの二つをうまく使うことは、圧縮だけよりしばしば大きな速度の勝利です。このガイドはその違い、大きすぎる画像がなぜ害になるか、そしてウェブ用に画像のサイズを正しく合わせる方法を説明します。

リサイズ vs. 切り抜き

• リサイズ（Resizing） は画像全体の寸法を変え、そのすべてを保ちます — 上下に拡大縮小するのです。
• 切り抜き（Cropping） はある領域だけを残すために画像の一部を切り落とします — 単なるサイズではなく、フレームに何が入るかを変えるのです。

プロフィール写真が良い例です: 顔の周りを正方形に 切り抜き、その正方形を表示サイズに リサイズ します。

大きすぎる画像がページを遅くする理由

スマホから出たばかりの写真は幅 4,000 ピクセルかもしれません。それが 800 ピクセル幅の列に表示されると、ブラウザは決して見せられない 5 倍のピクセルをダウンロードし、その場で縮小します。視覚的な利益ゼロで帯域を無駄にし、ページを遅くするのです。画像を表示されるサイズくらいにリサイズするのは、しばしば得られる最大のファイルサイズ削減です — 多くの場合、圧縮より大きいのです。

アスペクト比を保つ

アスペクト比（aspect ratio） は幅と高さの割合です。両方の寸法を同じ倍率で変えれば画像は歪みません。片方だけ変えると伸びたり潰れたりします。ほとんどのツールは既定で比率を「ロック」します — わざと歪めたいのでなければロックしたままにしましょう。別の 形が必要なら（たとえば縦写真から横バナー）、伸ばすのではなく新しい比率に切り抜きます。

画像はどのくらいの大きさであるべきか?

• 画像の幅を、それが埋める空間に合わせましょう — コンテナを測ります。
• 高密度（Retina）画面での鮮明な表示には、表示サイズの約 2 倍で書き出してから圧縮します。
• 拡大しないこと — 小さな画像を大きくしてもぼやけが増えるだけで、ないディテールは作れません。

組み合わせる

良い作業順序は 切り抜き → リサイズ → 圧縮 です。画像リサイザー がアスペクト比をロックしたまま切り抜きとリサイズを一度に処理し、それから 画像圧縮ツール に渡してファイルサイズを下げます。品質をどこまで押すかは 圧縮ガイド を、まず正しいフォーマットを選ぶには 画像フォーマット解説 を読んでください。