無料の画像編集ソフト「GIMP」でホームページ用の画像をトリミングする

ホームページを作成、更新していくうえで、ユーザーへの訴求効果やアイキャッチでの誘因効果を考えると画像の設置は不可避となるでしょう。
今回は無料の画像編集ソフト「GIMP」を使って、画像のリサイズと切り抜き（トリミング）の仕方を説明します。

「GIMP」をまだインストールしていない方は、『できる！無料画像編集ソフト「GIMP」』ページでダウンロードサイトからインストール方法までを説明していますので確認してください。

なぜリサイズする必要があるのか。

最近のデジタルカメラは、高い解像度で非常に大きな画像データで撮影をすることができます。
そうなると、当然ひとつの画像のデータ容量が大きくなり、アップロードに多くの時間がかかったりアップロードできないことになったりします。
また大きな容量の画像をアップし続けていると、WEBサーバーの空き容量もどんどん減っていってしまいます。

あと、WordPressのテーマなどにはサムネイルなどの画像のサイズを指定してある場合があります。
そういう場合もできるだけ指定サイズに対応できるよう、リサイズ・トリミング方法を覚えておきましょう。

画像ファイルを開く

リサイズするにもトリミングするにも、まずはGIMPを起動してファイルを開くための状態を用意します。

メニュー「ファイル」から「開く/インポート(O)…」を選択します。

『画像ファイルを開く』ウィンドウが表示されます。
ウィンドウ左側には、各ディレクトリが表示されていますのでそこから開く画像がある場所への移動します。
開くファイルまで辿り着いたら、ウィンドウ内右下の「Open」ボタンでファイルを開きます。

画像によっては色の設定を確認・調整するための上図のような画面が表示されます。
特に設定する必要はないので、なにも設定せずに「変換(O)」ボタンをクリックして画像を開きます。

画像のリサイズはこの直ぐ下から、画像のトリミングは「画像のトリミング」で説明しています。

画像のリサイズ

使用する画像をトリミングせずにそのまま使う場合は、以下の手順で画像のリサイズを行います。

メニュー「画像」から『画像の拡大・縮小(S)…』を選択すると、下図の『画像の拡大・縮小』ウィンドウが開きます。

キャンパスサイズ（画像サイズ）は、「幅(W)」と「高さ(E)」で構成されるピクセル数と、解像度とで構成されています。

ホームページ用の画像は、一般的に72ピクセル/inchです。

どれくらいのピクセル数の画像をアップすればわからない場合は、長い方の辺のピクセル数を3000程度にすると良いでしょう。
最近高解像度のモニターを使用したパソコンやスマートフォンなどが市場に出回っています。この高解像度のモニタで見ると、解像度72ピクセル/inchの画像は少しぼやけて見えてしまいますが、WordPressには高解像度用の対応機能もついています。
高解像度モニタでも綺麗に見えるよう、少し大きめのサイズの画像をアップしましょう。

縦横比の固定を確認しましょう。

『画像の拡大・縮小』ウィンドウ内の縦横比を固定するアイコンが上図赤丸内のような表示になっていると、縦横の比率を無視してサイズを変更してしまいます。

非常に見た目がわるくなりますので、注意してください。

画像の一部分のみを使うためのトリミング方法は以下で説明します。

リサイズした画像をホームページで使えるJPEGやGIF、PNG画像に書き出す方法は、「画像の書き出し」で説明します。

画像のトリミング

画像のトリミングするには、GIMP画面左側にある編集ツールの中の【切り抜き】（上図で背景が黒になっているアイコン）を選択します。

そして、開いてある画像のだいたい必要な範囲の角から対角までをドラッグで選択します。

四隅で調整

切り抜き選択範囲の四隅にはそれぞれ□が表示してあります。
この□をドラッグすることで、構成する縦辺と横辺を一緒に調整することができます。

各辺ごとの調整

カーソルを合わせなければ表示されませんが、上下左右の辺の内側にも調整の□が表示されます。
この□は、それぞれ接している辺の位置の調整をするためのハンドルになります。

数値での調整

切り抜き範囲を、切り抜きする場所と切り抜きする大きさ（ピクセル数）の数値で調整することができます。

GIMP画面左下に、上図のような切り抜きの数値を調整する欄があります。

切り抜く大きさ（ピクセル数）の調整

上図の「サイズ」の下に横並びになっている数値は、切り抜き範囲の横幅（左側数値）と高さ（右側数値）となっています。
この数値を変更すると、画像内の切り抜きエリアの大きさも変わっていきます。

切り抜く位置の調整

上図の「左上角の座標」の下に横並びになっている数値は、左側が画像の左端から切り抜き範囲の左端までの距離（ピクセル数）、右側が画像上端から切り抜き範囲の上端までの距離となっています。

「サイズ」と併せて調整すると必要なサイズを切り抜きやすくなります。

トリミング（切り抜き）の確定

切り抜き範囲の調整が完了したら、切り抜き範囲内のどこでもよいのでクリックをすると、設定した切り抜き範囲で画像を切り抜いてくれます。

画像の書き出し

リサイズ、トリミング（切り抜き）をした画像は、エクスポート（書き出し）をする必要があります。
「保存」や「名前を付けて保存」は、GIMP専用のオリジナルファイルでデータファイルを作成してしまい、ホームページには適さないデータになりますので注意してください。

メニュー「ファイル(F)」から『名前を付けてエクスポート』を選択します。

画像の保存先を設定します。
保存先を設定したら、「エクスポートされたすべての画像」をクリックして書き出すファイル形式を選択します。

一般的な写真などは.jpgファイル形式で保存します。
文字だけなどの画像であれば.gif形式のファイルが適しています。文字だけの場合は.jpgファイルで保存するとかえって文字の輪郭がぼやける場合があります。
もし、背景が透明になっている画像の場合は.png形式のファイルが適しています。

保存先と保存ファイル形式の設定ができたら、『画像をエクスポート』ウィンドウの画面右下にある「エクスポート(E)」ボタンをクリックすれば指定したフォルダに指定した形式のファイルが書き出されます。

以上で、ファイルのリサイズ、トリミング（切り抜き）は完成です。