📷

画像ファイルを決められたピクセルでイメージ通りに切り出したい

2022/05/15に公開

GIMP

tech

課題

早く結論を知りたい人

早く結論を知りたい人は、具体的な手順をみて下さい。なんとなく解決策が解ると思います。

経緯

ウェブサイトを作るに際して、指定されたピクセル数の画像ファイルを用意する必要が生じた。
公開して人様に見て頂くサイトなので、そのサイトのイメージに合う画像を用意する必要がある。

素材の画像ファイルは手元にある。
素材の画像ファイルから、指定されたピクセル数の画像ファイルを切り出す必要があった。

例

例として、以下のような場合を考える。
下記の素材画像(1280×853px)から、コーヒーカップのみを100×100pxで切り出したい。

生じたトラブル

リサイズすると全てが小さくなってしまう。

リサイズとは、画像の縦横比をそのままで拡大縮小する操作のことである。

今回の例の場合、1287×853pxの画像と100×100pxの画像では縦横比が異なるので、リサイズ出来ない。

横を100pxに固定してリサイズすると下記の様になり、要件を満たさない。
リサイズ1

比率を保たずに縮小すると、全体的に小さくなり、縦横比もおかしくなってしまう。
リサイズ2

トリミングすると欲しい部分が切り出せない。

トリミングとは、画像の一部を指定して切り出す操作のことである。

今回の例の場合、素材の画像のコーヒーカップ自体が300×300px程度の大きさなので、100×100pxの画像を切り出すことは不可能である。

どう頑張っても一部分しか切り出せない。
トリミング

解決策

結論だけ言えば、リサイズとトリミングを組み合わせてイメージ通りの画像を切り出せれば良いのだ。

今回の例の場合、コーヒーカップの大きさが100×100pxになるように素材画像を『良い感じに』リサイズしてから、100×100pxのコーヒカップをトリミングすれば良い。

しかし、『良い感じに』リサイズとトリミングを組み合わせることがこそが、難しいのだ。
その具体的な手法こそが必要なのだ。

様々な解決策があると思うが、ここではGIMPを用いた具体的な解決策を紹介する。

GIMPとは

GIMPとは画像編集ソフトである。クロスプラットフォーム（Windows, Mac, Linux）に対応している。しかも、無料。この記事をお読みの方は、ほとんど利用できるでしょう。

GIMPのインストールに関しては、当記事では扱いません。
GIMPを使って、『画像ファイルをイメージ通りに決められたピクセルで切り出す』方法を書いていきます。

何故GIMPなら出来るのか？

キャンバスで出力される画像のピクセル数を決められる。

GIMPではキャンバスのサイズを決められます。キャンバスとは、表示される画像のサイズのことです。作業中の画面では画像がキャンバスよりも大きく見える場合もあるでしょうが、画像としてはキャンバス内のみが表示されます。
キャンバスのサイズを決められたピクセル数で固定していまうことにより、出来上がりの画像のピクセル数がズレる心配がなくなります。

すなわち、トリミングよって達成したい作業を、キャンバスのサイズを指定することで達成できるのです。
『決められたピクセル数で画像を切り出す』という目標が、キャンバスによって達成されます。

キャンバスと画像の関係を視覚的に捉えながらリサイズ出来る。

出力される画像の大きさは決まっているので、イメージに合うようにリサイズすれば作業完了です。
GIMPでは、画像をリサイズする際に、プレビュー画像の透明度を調節できます。これは、実際に出力される画像の透明度とは無関係です。この機能により、透けた画像を通して、キャンバスの大きさを常に確認することが出来るのです。

すなわち、『イメージ通りに画像を切り出す』という目標が、達成されます。

具体的な手順

以下に、具体的な手順を説明します。

GIMPで画像を開きます。。
メニューバーより、[画像]→[キャンバスサイズの変更]を選択します。『キャンバスサイズの変更』画面が表示されます。
キャンバスサイズの幅と高さに、切り出したい画像のピクセル数を指定し、リサイズボタンを押します。キャンバスサイズが変更されます。画像の写っている部分がキャンバスの部分で、黄枠に囲まれた部分が元の画像です。
メニューバーより、[ツール]→[変形ツール]→[拡大・縮小]を選びます。これで、マウスを用いて直感的にリサイズ出来るようになりました。
GIMP左端のツールボックスより、プレビューの不透明度を調整します。30.0にすると、画像とキャンバスの関係が透けて見えるようになります。
キャンバス内にイメージ通りの画像が来るように『良い感じに』、マウスで適当に操作するだけです。
『良い感じに』作業が終わったら、拡大縮小ボタンを押します。
メニューバーより、[ファイル]→[名前を付けてエクスポート]で、画像ファイルとしてエクスポート出来ます。