「画質を落とさずにリサイズ」はよくある願いですが、正直な答えは方向によります。縮小はほぼ無損、拡大は物理に逆らいます。どちらでも最良の結果を得る方法を紹介します。
縮小(ダウンサンプリング):基本タダ
ピクセルを小さくするのはきれいです。ソフトが隣接ピクセルを平均するので、結果は鮮明なまま——安全な日常のケースです。スマホの 4000 ピクセルの写真を、ページで実際に表示する 1200 ピクセルに縮小すれば、きれいでしかも読み込みも速くなります。
拡大(アップサンプリング):難しい部分
元より大きくすると、そもそも撮っていない細部は作れません。補間は既存ピクセルを引き伸ばすだけで、エッジがぼやけたりブロック状になったりします。対処法:
- できるなら拡大しない——より高解像度の元画像から始める。
- ロゴやアイコン?代わりにベクターを——PNG を SVG にトレースすれば、どんなサイズでも完璧です。
- 写真は専用の AI アップスケーラーが単純なリサイズより優れます(ただし重い)。
最も鮮明なリサイズを得るには
- 表示する正確な寸法にリサイズ——それ以上大きくしない。
- 縦横比を固定して、引き伸ばしを防ぐ。
- ファイルも小さくしたいなら、リサイズしてから圧縮。
ブラウザ内で、アップロードなし
- 画像リサイズ——幅・高さを設定、縦横比固定つき。端末内で動作。
- 画像を圧縮——リサイズ後にファイルを小さく。画像のファイルサイズを小さくする方法も参照。
結論:縮小は画質を保ち、拡大は元に戻せない。 大きく始めて必要なサイズに縮小し、ロゴを大きくするときはベクターを使いましょう。
ベクターとラスター:本当の分かれ目
リサイズで劣化するかは、手元の画像がどちらかによります。
- ラスター画像(PNG・JPG・WebP)は固定のピクセル格子です。拡大しても示すべき追加の細部がないので、ぼやけます。
- ベクター画像(SVG)は数式——点・線・曲線——として保存されるため、どんなサイズでも完璧に描き直せます。ロゴ・アイコン・簡単なイラストはこちら側。写真はベクターにできません。
ロゴを何度も拡大するなら、その PNG をリサイズし続けず、一度SVG にトレースしましょう。
拡大がぼやける理由:リサンプリング
リサイズのたびにピクセル格子をリサンプリングします——補間で古いピクセルから新しいピクセルを計算し直します:
- ニアレストネイバー——最速だがブロック状;ピクセルアート向け。
- バイリニア/バイキュービック——なめらかな混色;バイキュービックが一般的な既定。
- Lanczos——細部の多い写真を縮小するとき最も鮮明。
縮小では平均する実ピクセルがあるので鮮明さを保てます。拡大では間のピクセルをでっち上げるしかなく、作られた細部は必ず甘くなります。「拡大して鮮明化」が映画の中だけで通用する理由です。
先に切り抜き、それからリサイズ
画像の一部だけ必要なら、縮小の前に切り抜きましょう。先に切り抜けば、後で捨てる部分に解像度を浪費せず、必要な領域に実ピクセルを最大限残せます。
書き出し形式と画質のトレードオフ
| 形式 | 最適 | 備考 |
|---|---|---|
| JPG | 写真 | 非可逆;品質 80〜85% が最適点 |
| PNG | 平面グラフィック・透過 | 可逆、ファイルは大きめ |
| WebP | 両方 | JPG/PNG より小さく、広く対応 |
| AVIF | 両方 | 最小、対応は新しめ |
| SVG | ロゴ・アイコン | ベクター、無限に拡大縮小可 |
同じ JPG を保存し直すたびに圧縮損失が積み重なります(「世代劣化」)。リサイズは一度、書き出しも目標品質で一度に。どれを選ぶか迷ったらウェブに最適な画像形式を参照。
よくある質問
リサイズは必ず画質を落とす?
いいえ。縮小は画質を保ちます——不要だったピクセルを捨てるだけです。拡大は下げます、増えたピクセルは推測だからです。
最も画質を保てる形式は?
写真は高品質の WebP か AVIF、平面グラフィックや透過は PNG、拡大縮小が必要なものはベクターの SVG です。