リサイズとトリミングは何が違う？画像の全体と切り取り範囲を比べよう

画像を正方形にしたら、端にいた人が消えてしまった。小さくしただけのつもりなのに、見た目が違う。そんなときは、**画像全体の寸法を変える「リサイズ」と、一部を切り取る「トリミング」**を分けて考えてみよう。

この記事では、二つの操作で「何が残り、何が変わるか」を見分けることを目標にする。必要なのはブラウザだけ。作例は編集部が描いた風景を使うので、自分の写真をアップロードする必要はないよ。

リサイズは、画像の大きさを変えること

リサイズは、幅や高さなどの寸法を変える操作。画像全体を残したまま、420×280ピクセルの画像を240×160ピクセルへ小さくする、といった使い方がある。

ピクセルは、ここでは画像の縦横の寸法を数える単位だよ。幅と高さの比率を「縦横比」と呼び、420×280も240×160も、幅：高さは3：2になる。

比率を保って小さくすれば、画像内の丸い太陽も丸いまま小さくなる。幅と高さを別々に変えて無理に正方形へ押し込むと、形が横長・縦長になることがあるので、編集ソフトの「縦横比を維持」などの設定も確認しよう。

トリミングは、残す範囲を選ぶこと

トリミングは、画像の一部分を残し、外側を切り取る操作。横長の写真から正方形のプロフィール画像を作る場面などで使われる。

420×280の画像なら、中央の280×280を選ぶと正方形になる。ただし、中央だけを残すので、左右の外側は含まれなくなるよ。切り取る位置によっては、顔・文字・商品など、必要な部分まで消えてしまう。

画像を一度切り取ってから、必要な寸法へリサイズすることもある。二つは、どちらか一方しか使えない操作ではないんだ。

同じ風景で、残るものを比べよう

記事の下にある「動かしてみよう」では、左に太陽、真ん中に木、右に家がある風景を使っている。

1. 最初は「全体を小さくする」が選ばれている。太陽・木・家の三つが残っているか確認する。
2. 「中央を正方形に切り取る」へ切り替える。
3. 真ん中の木は残り、左右の太陽と家が見えなくなることを確認する。
4. 「全体を小さくする」へ戻すと、風景全体が再び見える。

全体を小さくした表示は240×160。正方形の表示は、中央の280×280を選んでから160×160へ縮めている。この作例の正方形モードは、トリミングとリサイズを組み合わせた例だよ。

表示の下に、選んだ範囲と出力する画像の寸法を出している。単に画面上の大きさだけを見るのでなく、どの範囲を使ったかも確かめよう。

編集部では、ブラウザで切り替えたときの出力寸法と、太陽・家が残るかを確認した。元の風景は作例内に保持しているため、操作を戻せるよ。「最初から試す」でも初期状態へ戻せる。

元の画像が残るかも確認しよう

実際の編集では、元ファイルを別に残し、用途別の名前で書き出すと見直しやすい。切り取った画像だけを上書き保存した場合、そのファイルだけから、外側の元の情報を取り戻せるとは限らない。

また、小さくした画像をもう一度大きくしても、失われた細部が元どおりになるとは限らないよ。できるだけ元の大きな画像から、必要な寸法と範囲へ書き出そう。

Webページの見え方だけを変えている場合もある

Webでは、元の画像ファイルを切り取らず、枠の中で見える範囲だけを変える方法もある。たとえばCSSのobject-fit: coverは、縦横比を保ちながら枠を埋め、比率が違えば一部が枠から見切れる指定だよ。

これは、画像ファイルそのものを編集して上書き保存することと同じではない。CSSはWebの見た目を指定する仕組み。元ファイルと、ページ内での表示の二つを分けて確認しよう。

なお、このページ内の作例は、ブラウザのCanvasという描画機能で、元の風景の全体または選んだ範囲を別の描画面へ描き直している。単にCSSで枠から隠しているだけの作例ではないよ。

用途が決まったら、この順で確認する

• 掲載先の幅・高さと、縦横比を確認する。
• 画像全体を残したいか、一部を切り取ってよいか決める。
• 顔・文字・商品など、欠けて困る部分を確認する。
• 元ファイルを残し、別名で書き出す。
• 実際の表示先でも、見切れや形のゆがみを確認する。

背景を透明にしたい場合は、寸法とは別に保存形式も確認しよう。PNGとJPEGの透明部分の違いで試せるよ。画像を大きくしたときの輪郭については、ラスターとベクターの違いも参考にしてね。