「画質を落とさずにリサイズ」はよくある願いですが、正直な答えは方向によります。縮小はほぼ無損、拡大は物理に逆らいます。どちらでも最良の結果を得る方法を紹介します。
これは自分たちで計測しました。 ここが多くの人を驚かせる部分です。幅 1200 px から 800 px にすると画素数は 56% 減りますが、実際のファイルは 15%〜50% しか小さくなりませんでした。写真はほぼ半分(1.88 MB → 967.2 KB)になった一方、スクリーンショットは 15% だけ。コストが鮮明な輪郭にあり、縮小してもその輪郭は残るからです。 計測データ全体を見る
縮小(ダウンサンプリング):基本タダ
ピクセルを小さくするのはきれいです。ソフトが隣接ピクセルを平均するので、結果は鮮明なまま——安全な日常のケースです。スマホの 4000 ピクセルの写真を、ページで実際に表示する 1200 ピクセルに縮小すれば、きれいでしかも読み込みも速くなります。
画質的にはほぼ無料ですが、バイト数は比例しません。しかも差は大きいです。幅 1200 px から 800 px にすると画素は 56% 減りますが、4 枚のテスト画像の減り方はまるで違いました。写真は 1.88 MB → 967.2 KB(-50%)、フラットイラストは 34.7 KB → 28.8 KB(-17%)、透明ロゴは 28.8 KB → 17.2 KB(-40%)、そして UI スクリーンショットは 18.0 KB → 15.3 KB(-15%)だけ。スクリーンショットはバイトを鋭い輪郭に使っており、縮小しても輪郭は残ります。
縮小はバイト数でも品質でもほぼ無料で、その 2 つは混同されやすいものです。私たちのテスト写真を画像リサイズに通すと 1.88 MB → 967.2 KB(-50%)でした:
| テスト画像 | 入力 | 出力 | 変化 |
|---|---|---|---|
| 写真 | 1.88 MB | 967.2 KB | -50% |
| スクリーンショット | 18.0 KB | 15.3 KB | -15% |
| イラスト | 34.7 KB | 28.8 KB | -17% |
| 透過付きロゴ | 28.8 KB | 17.2 KB | -40% |
これらの数値は「ピクセルが捨てられた」ことで、「品質が交換された」ことではありません。出力の各ピクセルは依然として実際の入力ピクセルの平均です。同じ写真に対する圧縮ツールと比べてください。そちらは全ピクセルを保ったまま、ピクセル内部の細部を捨てて 178.7 KB(-46%)に到達しました。進む方向は同じ、仕組みはまったく別で、原本から再書き出しで戻せるのは一方だけです。
拡大(アップサンプリング):難しい部分
元より大きくすると、そもそも撮っていない細部は作れません。補間は既存ピクセルを引き伸ばすだけで、エッジがぼやけたりブロック状になったりします。対処法:
- できるなら拡大しない——より高解像度の元画像から始める。
- ロゴやアイコン?代わりにベクターを——PNG を SVG にトレースすれば、どんなサイズでも完璧です。
- 写真は専用の AI アップスケーラーが単純なリサイズより優れます(ただし重い)。
最も鮮明なリサイズを得るには
- 表示する正確な寸法にリサイズ——それ以上大きくしない。
- 縦横比を固定して、引き伸ばしを防ぐ。
- ファイルも小さくしたいなら、リサイズしてから圧縮。
ブラウザ内で、アップロードなし
- 画像リサイズ——幅・高さを設定、縦横比固定つき。端末内で動作。
- 画像を圧縮——リサイズ後にファイルを小さく。画像のファイルサイズを小さくする方法も参照。
結論:縮小は画質を保ち、拡大は元に戻せない。 大きく始めて必要なサイズに縮小し、ロゴを大きくするときはベクターを使いましょう。
ベクターとラスター:本当の分かれ目
リサイズで劣化するかは、手元の画像がどちらかによります。
- ラスター画像(PNG・JPG・WebP)は固定のピクセル格子です。拡大しても示すべき追加の細部がないので、ぼやけます。
- ベクター画像(SVG)は数式——点・線・曲線——として保存されるため、どんなサイズでも完璧に描き直せます。ロゴ・アイコン・簡単なイラストはこちら側。写真はベクターにできません。
ロゴを何度も拡大するなら、その PNG をリサイズし続けず、一度SVG にトレースしましょう。
「容量のためにリサイズする前に、手元の画像がどの種類かを見る」実務的な理由もこれです。写真の幅を半分にすると -50%、同じことをスクリーンショットにすると -15%。目的が寸法ではなくファイルサイズなら、たいてい圧縮のほうが効くレバーです。
拡大がぼやける理由:リサンプリング
リサイズのたびにピクセル格子をリサンプリングします——補間で古いピクセルから新しいピクセルを計算し直します:
- ニアレストネイバー——最速だがブロック状;ピクセルアート向け。
- バイリニア/バイキュービック——なめらかな混色;バイキュービックが一般的な既定。
- Lanczos——細部の多い写真を縮小するとき最も鮮明。
縮小では平均する実ピクセルがあるので鮮明さを保てます。拡大では間のピクセルをでっち上げるしかなく、作られた細部は必ず甘くなります。「拡大して鮮明化」が映画の中だけで通用する理由です。
先に切り抜き、それからリサイズ
画像の一部だけ必要なら、縮小の前に切り抜きましょう。先に切り抜けば、後で捨てる部分に解像度を浪費せず、必要な領域に実ピクセルを最大限残せます。
書き出し形式と画質のトレードオフ
| 形式 | 最適 | 備考 |
|---|---|---|
| JPG | 写真 | 非可逆;品質 80〜85% が最適点 |
| PNG | 平面グラフィック・透過 | 可逆、ファイルは大きめ |
| WebP | 両方 | JPG/PNG より小さく、広く対応 |
| AVIF | 両方 | 最小、対応は新しめ |
| SVG | ロゴ・アイコン | ベクター、無限に拡大縮小可 |
同じ JPG を保存し直すたびに圧縮損失が積み重なります(「世代劣化」)。リサイズは一度、書き出しも目標品質で一度に。どれを選ぶか迷ったらウェブに最適な画像形式を参照。
これは「何で書き出すべきか」の答えにもなります。先にリサイズ、後に圧縮が逆順より厳密に優れています。967.2 KB の時点で、リサイザーは圧縮器がビットを費やすはずだったピクセルをすでに取り除いています。逆順では、リサイズが平均して消す細部の符号化に代金を払うことになります。
よくある質問
リサイズは必ず画質を落とす?
いいえ。縮小は画質を保ちます——不要だったピクセルを捨てるだけです。拡大は下げます、増えたピクセルは推測だからです。
最も画質を保てる形式は?
写真は高品質の WebP か AVIF、平面グラフィックや透過は PNG、拡大縮小が必要なものはベクターの SVG です。