画像のリサイズはワンクリックで済みそうに聞こえますし、実際たいていはそうです。眠かったり、引き伸びていたり、モザイク状の結果になってしまうのは、ほぼ必ず3つの間違いのどれかが原因です。小さな画像を拡大した、縦横比を無視した、あるいは平滑化の工程を省くツールを使った。この3つさえ押さえれば、リサイズは最良の意味で退屈になります。画像はただ小さくなり、くっきりしたままです。
ここでは最初から最後まで、まるごと解説します。
単位を選ぶ：ピクセルかパーセントか
新しいサイズを正直に表す方法は2つあり、それぞれ違う仕事に向いています。
- ピクセル — 掲載先に厳密な要件があるときに使います。幅600pxでなければならないメールヘッダー、256×256でなければならないフォーラムのアバター、マーケットプレイスが2000pxに制限する商品写真。正確な数字を打ち込めば完了です。
- パーセント — とにかく小さくしたいだけで、正確な数値はどうでもいいときに使います。「50%にして」で両方の寸法が半分になり、ピクセル数は4分の1に減ります。単純にウェブには大きすぎる写真から容量を落とす手早い方法です。
迷ったら、一般的な写真の縮小にはパーセントが無難な既定値で、誰かに仕様を渡された瞬間にピクセルが正解になります。
縦横比はロックしたまま
画像を台無しにする最もよくある方法は、幅と高さを別々に変えることです。顔が横に引き伸ばされ、ロゴがずんぐりし、風景が鏡の間のように歪みます。対処法は、良いリサイズツールなら必ずある設定です。縦横比ロック。オンにすれば、片方の寸法を打ち込むともう片方が自動で追従し、元の比率が保たれます。
比率のロックを解除したいのは、意図的に形を変えるときだけです。たとえばバナーを特定の枠に押し込む場合など。それでも普通はトリミングで対処します。目的が「同じ画像を小さく」なら、ロックはオンのままにしましょう。
縮小は素晴らしい。拡大は罠。
ここは多くの人が痛い目に遭って学ぶ部分です。画像を小さくするのはピクセルを捨てることで、余分なディテールがたっぷりあるので、良い縮小はくっきり見えます。画像を大きくするのは、そもそも撮られていないピクセルを発明するようソフトに求めることで、どんなに賢くても存在しないディテールは戻りません。結果は眠い輪郭と、ぼんやりした質感です。
| していること | 結果 | 判定 |
|---|---|---|
| 4000 px → 1200 px（縮小） | くっきり、ファイル小 | 遠慮なくどうぞ |
| 1200 px → 1200 px（変更なし） | 同一 | 問題なし |
| 600 px → 2000 px（拡大） | ぼやけて、ブロック状 | 避ける — より大きな元画像を探す |
本当に大きい版が必要なら、本当の答えは、手持ちを引き伸ばすことではなく、元データに戻って高解像度で書き出すことです。
正しく縮小するときでも大事なことが一つ。ツールは縮小しながら平滑化する必要があります。これを省く安っぽいリサイズツールは、ギザギザでジャギーの出た縁を生みます。高品質な縮小は隣り合うピクセルをサンプリングするので、線や文字がきれいなままです。
ブラウザでリサイズする
IMG.DIYの画像リサイズは上記すべてを行います。ピクセルかパーセント、縦横比のロック切り替え、そして縮小時の高品質な平滑化で、写真も文字もくっきり保ちます。画像を放り込み、目標を打ち込み、ダウンロードするだけです。
すべてがCanvasを使ってあなた自身のマシン上で動き、何もアップロードされないので、巨大な写真も小さな写真と同じ速さでリサイズでき、サーバー由来のファイルサイズ上限もありません。初回訪問後はツールがキャッシュされるので、接続なしでも動き続けます。
手早いチェックリスト
書き出す前に、これをひと通り確認しましょう。
- 単位 — 厳密な仕様にはピクセル、一般的な縮小にはパーセント。
- 縦横比 — 特別な理由がない限りロック。
- 方向 — 上ではなく下へ。大きくしたければ元データに戻る。
- 100%で確認 — 結果を開き、顔や文字の縁をちらっと見る。
これだけです。正しく行うリサイズは地味なものです。画像は小さくなり、形を保ち、くっきりしたまま。もしぼやけたなら、ほぼ確実に拡大か比率の引き伸ばしが原因で、どちらも10秒ほどで直せます。