RunToolz iconRunToolz
Welcome to RunToolz!
画像デザインウェブ開発

リサイズ vs クロップ:違いを知る

どちらも画像を小さくします。全く異なることをします。

RunToolz Team2026年1月19日4 min read

「この画像を小さくして」は2つの異なることを意味しえます。

リサイズ:寸法を変更。1000x1000の画像が500x500になります。

クロップ:一部を切り取る。1000x1000の画像がコンテンツの半分を削除して500x500になります。

混同すると画像が台無しになります。

リサイズを使う時

画像全体を異なる寸法で必要。

  • 完全な画像を表示するサムネイル
  • 異なる画面サイズ用のレスポンシブ画像
  • すべてを表示したままファイルサイズを減らす
実際に試してみませんか?画像をリサイズ

リサイズは比例的に拡大縮小します(強制しない限り)。1600x900の画像を50%にすると800x450になります。同じコンテンツ、小さいピクセル。

クロップを使う時

完全な解像度で画像の一部が必要。

  • グループ写真からヘッドショット
  • 気を散らす背景を削除
  • 特定のアスペクト比に合わせる
実際に試してみませんか?画像をクロップ

クロッピングはコンテンツを削除します。1600x900の画像を中央800x450にクロップすると、エッジが完全に破棄されます。

アスペクト比の問題

画像は16:9。プロフィール写真用に1:1が必要。

オプション1:クロップ。 両側を切り、真ん中を保持。コンテンツを失います。

オプション2:リサイズとレターボックス。 フィットするように拡大縮小、空白スペースを追加。すべてを保持するがパディングを追加。

オプション3:クロップしてからリサイズ。 1:1に切り、ターゲットサイズに拡大縮小。最も一般的なアプローチ。

リサイズ単独でもクロップ単独でも、アスペクト比の不一致を優雅に解決しません。

圧縮はまた別物

リサイズとクロップは寸法を変更。圧縮は寸法を変えずにファイルサイズを減らします。

1000x1000の画像は:

  • 5MB 非圧縮
  • 200KB JPEG品質85%
  • 50KB 品質60%

同じ寸法、劇的に異なるファイルサイズ。

よくある失敗

アスペクト比を維持せずリサイズ。 画像が引き伸ばされたり押しつぶされたり。特に歪みが必要でない限り、常に比率をロックしましょう。

クロップしてコンテンツがどこに行ったか疑問。 クロップはコンテンツを削除します。すべてを表示する必要があるなら、代わりにリサイズしましょう。

アップスケールしすぎ。 小さな画像を大きくするとぼやけを生みます。そこになかったディテールは追加できません。品質が目に見えて低下する前の限界は通常2倍アップスケール。

DPIを考慮しない。 Web画像は通常72 DPI。印刷には300 DPIが必要。同じピクセル寸法が各文脈で異なって見えます。

実践的なワークフロー

  1. 最高解像度のソースから始める
  2. 適切なアスペクト比とコンテンツエリアにクロップ
  3. ターゲット寸法にリサイズ
  4. 許容できるファイルサイズに圧縮

順序が重要。最初にクロップ、次にリサイズ。リサイズしてからクロップすると不必要に解像度を失います。


拡大縮小にはリサイズ。コンテンツ選択にはクロップ。ファイルサイズには圧縮。各ツールは異なる問題を解決——適切なものを使いましょう。