リサイズ vs クロップ:違いを知る
どちらも画像を小さくします。全く異なることをします。
「この画像を小さくして」は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が必要。同じピクセル寸法が各文脈で異なって見えます。
実践的なワークフロー
- 最高解像度のソースから始める
- 適切なアスペクト比とコンテンツエリアにクロップ
- ターゲット寸法にリサイズ
- 許容できるファイルサイズに圧縮
順序が重要。最初にクロップ、次にリサイズ。リサイズしてからクロップすると不必要に解像度を失います。
拡大縮小にはリサイズ。コンテンツ選択にはクロップ。ファイルサイズには圧縮。各ツールは異なる問題を解決——適切なものを使いましょう。