Webpは、Linuxのオープンソース画像形式であり、Web上の画像の可逆および非可逆圧縮をサポートします。 Webサイトのパフォーマンスを最適化するためのベストプラクティスの1つは、圧縮画像を使用することです。この記事では、WebP画像形式を使用してWebサイトの圧縮された高品質の画像を作成する方法について説明します。
インストール
webp パッケージはすでに公式のubuntuリポジトリで利用可能です。以下のコマンドを実行して、Ubuntuリポジトリを最新のインデックスに更新し、webpパッケージをインストールします。
$ sudo apt-get update
$ sudo apt install webp
また、次のようにGoogleのリポジトリからwebpパッケージをインストールできます。
$ wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-0.6.1-linux-x86-32.tar.gz
tarファイルを抽出し、抽出したディレクトリに移動します。
$ tar -xvzf libwebp-0.6.1-linux-x86-32.tar.gz
$ cd libwebp-0.6.1-linux-x86-32
$ cd bin
$ ls
ディレクトリには、次のようなさまざまなwebpユーティリティで使用できるコンパイル済みのバイナリファイルが表示されます。
anim_diff:このツールを使用して、アニメーション画像間の違いを見つけることができます
anim_dump:このツールは、アニメーション画像間の違いをダンプするために使用できます
cwebp:このツールはwebpエンコーディングに使用できます
dwebp:このツールはWebアプリのデコードに使用されます
vwebp:このツールはwebpファイルを表示するために使用されます
webpinfo:このツールは、webp画像ファイルに関する情報を表示するために使用できます
webpユーティリティツールが提供するすべてのオプションを見つけるには、次のコマンドを使用します。
$ webp -longhelp
次に、ディレクトリ〜/ libwebp-0.6.1-linux-x86-32 / binを追加します。 PATH環境変数に 〜/ .bashrcで webpを実行するファイル 絶対パスを記述せずにユーティリティツール。
$ sudo vi ~/.bashrc
ファイルの最後にある次の行をコピーします。
export PATH=$PATH:~/libwebp-0.6.1-linux-x86-32/bin
ファイルを保存して終了します。新しいターミナルを開き、他のシステムコマンドと同様にwebpユーティリティツールを使用します。
画像をwebp形式に変換する
cwebpを使用する ツール、画像は webpに変換できます フォーマット。 cwebpを実行します オプション-qを指定したコマンド 画像の品質を定義し、 -o 出力ファイルを定義します。この例では、画像ファイル linux.pngを使用しました およびlinux.jpeg webp形式に変換するファイル。それに応じて画像名を選択できます。
$ cwebp -q 60 linux.png -o linux.webp
$ cwebp -q 60 linux.jpeg -o linux1.webp
出力:
出力では、画像のサイズが比較的小さくなっていることがわかります。
次のコマンドを実行して、 webpを開きます 画像をフォーマットします。この例では、以前に変換されたlinux.webpファイルを使用しました。
$ vwebp linux.webap
webp画像をpngおよびjpeg形式に変換する
前のステップでは、cwebpユーティリティツールを使用してjpegおよびpng画像をwebpに変換しました。次に、 dwebpを使用します webpを変換するツール 画像をpngおよびjpeg形式に変換します。
dwepを使用する オプション-oを指定したコマンド webpからpngおよびjpeg画像形式を作成するには 。この例では、image.webpが変換に使用されています。
$ dwep image.webp -o image.png
$ dwep image.webp -o image.jpeg
出力:
webp画像形式をデコードした後、画像のサイズが比較的大きくなっていることがわかります。
このようにして、pngおよびjpeg形式の画像をwebp形式に、またはその逆に変換できます。
結論
この記事では、UbuntuでPNG、JPEG形式をWebPに変換する方法について説明しました。また、WebPをPNGおよびJPEGに変換する方法も学びました。