Linux(ubuntu16.04)で「WebP」を使用する方法

linux

画像ファイルを「WebP」へ変換してみよう

画像ファイルを「WebP」へ変換するイメージの画像

ここではグーグルが開発した次世代画像フォーマット「WebP」の使い方を解説していきます。

「WebP」って何?という方はまず↓をご覧ください。

[簡単解説]次世代フォーマット画像ファイル形式「WebP」とは?
画像ファイル形式「WebP」について簡単にまとめてみた ここでは、次世代画像フォーマットといわれる「WebP」(ウエッピー)について解説していきます。 サイトスピードを上げる為、日々試行錯誤している中で、「次世代画像フォーマ...

 

gThumbをインストール

ubuntuを含むlinux系osで使用されているイメージビューアは「GNOME」になりますが、「WebP」形式をサポートしていません。

つまりデフォルトのイメージビューア「GNOME」では「WebP」ファイルを使用できませんので、まず最初に「gThumb」イメージビューアをインストールします。

「ubuntuソフトウェア」から「gThumb」のインストールをおこないます。

「ubuntuソフトウェア」アイコンの画像

検索のところで「gThumb」と入力してインストールをクリックします。

「ubuntuソフトウェア」検索画面の画像

これで「gThumb」のインストールが完了しました。

このままではまだ「WebP」形式の画像を使用できないので、次にコマンドから「WebP」のパッケージをインストールします。

$ sudo apt-get install webp

これで、「gThumb」イメージビューアで「WebP」ファイルを使用することが出来るようになりました。

LinuxでPNGやJPEGファイルをWebPイメージに変換する

linuxでPNGファイルやJPEGファイルを「WebP」ファイルをに変換する方法は大きく分けて2通りあります。

  1. コマンドラインから変換
  2. 無料のファイル変換ツールを使用して変換

コマンドラインから変換

コマンドラインでPNGファイルやJPEGファイルを「WebP」ファイルに変換する方法は以下の書式になります。

$ cwebp -q [画質のクオリティ] [変更前ファイル名] -o [変更後のファイル名]

例えば、以下のようなJPEGファイルをWebPファイルに変換してみます。

画像ファイルプロパティ画面の画像

コマンドは、

$ sudo cwebp -q 90 test1.jpg -o test1.webp

となり、

コマンド結果画面の画像

このように表示されます。

画像ファイルのプロパティを開くと、

変換後の画像ファイルプロパティ画面の画像

と、「JPEG画像」から「WebP image」に変換されています。

サイズについても、89.1KBから65.6KBへ縮小されていて、約26%圧縮できているのが分かります。

ちなみに、変更前のファイル名、変更後のファイル名は、任意のディレクトリから指定できます。例えば、

ホームディレクトリ⇒pictureディレクトリ⇒「tesut1.jpgファイル」を

varディレクトリ⇒wwwディレクトリ⇒WordPressディレクトリ⇒「tesut1.webpファイル」としたい場合は、

変更前のファイル名=「/home/picture/tesut1.jpg」

変更後のファイル名=「/var/www/WordPress/tesut1.webp」

としてあげればOKです。

無料のファイル変換ツールを使用して変換

続いて無料で使用できる変換ツールの使い方について解説していきます。

convertio

というサイトでは色々な種類のファイルの変換が出来るようになっていて、何度もお世話になっています。ブックマークしておくととても役に立つサイトです。

使い方は非常に簡単です。

まず、トップ画面の「コンピューターから」をクリックします。すると変換するファイルを選択する画面になりますので、任意のファイルを選択します。変換後の形式を選択します。ここでは「WEBP」を選択します。

「WEBP」を選択した画像

「変換」⇒「ダウンロード」をクリックすると、変換が完了します。

変換終了後の画像

変換後のサイズが27.6KBになっているのが分かります。

89.1KBから27.6KBへ縮小されていて、約70%圧縮できているのが分かります。

この結果は出来過ぎな気がしますが、「WEBP」ファイル形式の圧縮レベルの高さは間違いないことが分かりました。

無料のファイル変換ツールをChromeの拡張機能に追加する

先ほど解説した「convertio」はGoogle Chromeの拡張機能に追加することも可能です。

Chromeウェブストアから

chromeウェブストアロゴの画像

「convertio」を検索すると、

拡張機能検索結果の画像

と表示されるので、「chromeに追加」をクリックします。

右上のアドレスバーの右側にconvertioの赤色のアイコンが表示されます。

convertioの赤色のアイコン表示の画像

convertioを使用したいときは、このアイコンをクリックしてあげればいつでも変換が出来るようになります。

convertioを使用するときの画像

まとめ

画像の圧縮は、ハードディスクを軽くする事に加えて、サイトを制作している方にとったら、サイトの表示スピードを上げる効果が期待できます。

有効に活用していきたいですね。

 

コメント

タイトルとURLをコピーしました