「GIMP」WebP形式で書き出してWebサイトを軽量化したい【T】

「GIMP」は、Webサイトの表示速度改善に効果的なWebP(ウェッピー)形式への書き出しに完全対応しています。


WebPは、Googleが開発した画像フォーマットで、PNGのような透過機能とJPEGのような高い圧縮率を併せ持っています。

画質を保ちながらファイルサイズを劇的に軽量化し、訪問者にストレスを与えないサイト作りを目指しましょう。

WebP形式でエクスポートする基本手順

現在の画像をWebPとして保存するための、標準的なエクスポート操作です。

  1. メニューバーの「ファイル」から「名前を付けてエクスポート」を選択します。

  2. ファイル名の末尾を「.webp」に書き換えるか、右下の「ファイル形式の選択」から「WebP 画像」を選びます。

  3. 「エクスポート」ボタンをクリックすると、WebP専用の設定ダイアログが表示されます。

注意点として、「保存」ではなく「エクスポート」を使用しないとWebP形式は選択できません。元の編集データを残したい場合は、別途XCF形式でも保存しておきましょう。


画質とファイルサイズのバランスを調整する

エクスポートダイアログで、用途に合わせた圧縮設定を行う方法です。

  1. 「画質」スライダーを調整します。Webサイト用であれば「75〜85」程度が画質と軽さのバランスが良く推奨されます。

  2. 「ロスレス」にチェックを入れると、画質を一切落とさずに保存できますが、ファイルサイズは大きくなります。

  3. 下部の「プレビューを表示」にチェックを入れると、画質の変化を画面で確認しながら調整可能です。

アイデアとして、背景が透明なイラストなどを書き出す際は、透過情報を維持するために「アルファデータの保存」にチェックが入っていることを必ず確認してください。


詳細設定でさらに最適化する

Webサイトのパフォーマンスを最大化するための詳細なオプション設定です。

  1. 「メタデータを保存」の各チェック(Exif、XMPなど)を外すと、撮影情報などの付加データが削除され、さらに数KB単位で軽量化できます。

  2. 「シャープネス」のスライダーをわずかに上げることで、圧縮によるぼやけを軽減し、くっきりとした見た目を維持できます。

  3. 設定が完了したら「エクスポート」をクリックして確定します。

注意点として、古いブラウザ(Internet Explorerなど)ではWebPが表示されない場合がありますが、現在の主要なブラウザはすべて対応しているため、通常のWeb運用では問題ありません。


WebPでのアニメーション作成

GIFアニメーションの代わりにWebPを使用して、より高画質で軽量なアニメを作る手順です。

  1. 複数のレイヤーでアニメーションを作成した状態でエクスポートを開始します。

  2. WebP設定ダイアログで「アニメーションとして保存」にチェックを入れます。

  3. フレーム間の時間を指定し、ループ設定を行ってエクスポートします。

アイデアとして、WebPアニメーションはGIFよりも色が豊富でサイズが小さいため、リッチなWebコンテンツを作成したい場合に非常に有効な手段となります。


人気のある投稿記事

「Excel」カーソルの白十字を元に戻したい

「Excel」を使ったことはあっても、他人が使ってる「Excel」って、変な設定になってることがありませんか?例えば、カーソルが白い十字のままで、通常ならばセルの右下端をドラッグすることができ、連番を振ったりできるのに、それができないこととか。