WebPイメージを作成および提供してWebサイトを高速化する方法

著者はhttps://www.brightfunds.org/organizations/apache-software-foundation[Apache Software Foundation]を選択して、https：//do.co/w4do-cta [Donationsの書き込み]の一部として寄付を受け取りましたプログラム。

前書き

WebPは、VP8ビデオ形式に基づいて2010年にGoogleが開発したオープンな画像形式です。それ以来、WebP形式を使用するWebサイトおよびモバイルアプリケーションの数は急速に増加しています。 Google ChromeとOperaはどちらもWebP形式をネイティブでサポートしています。これらのブラウザーはWebトラフィックの約74％を占めるため、これらのサイトがWebP画像を使用している場合、ユーザーはWebサイトにすばやくアクセスできます。 FirefoxでWebPを実装する計画もあります。

WebP形式は、アニメーションを含む非可逆および可逆の画像圧縮をサポートしています。 Webで使用される他の画像形式に対する主な利点は、ファイルサイズがはるかに小さいことです。これにより、Webページの読み込みが高速になり、帯域幅の使用量が削減されます。 WebP画像を使用すると、ページ速度がhttps://blog.chromium.org/2014/03/webp-improves-while-rolling-out-across.html [かなりの増加]につながる可能性があります。アプリケーションまたはウェブサイトでパフォーマンスの問題またはトラフィックの増加が発生している場合、画像を変換するとページのパフォーマンスが最適化される場合があります。

このチュートリアルでは、コマンドラインツール `+ cwebp +`を使用して画像をWebP形式に変換し、特定のディレクトリの画像を監視および変換するスクリプトを作成します。最後に、WebP画像を訪問者に提供する2つの方法を探ります。

前提条件

WebPイメージの操作には特定のディストリビューションは必要ありませんが、Ubuntu 16.04およびCentOS 7で関連するソフトウェアを操作する方法を示します。このチュートリアルを実行するには、次のものが必要です。

非ルートsudoユーザーでセットアップされたサーバー。 Ubuntu 16.04サーバーをセットアップするには、https：//www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-16-04 [Ubuntu 16.04初期サーバーセットアップガイド]に従ってください。 CentOSを使用する場合は、https：//www.digitalocean.com/community/tutorials/initial-server-setup-with-centos-7 [CentOS 7を使用した初期サーバーセットアップでCentOS 7サーバーをセットアップできます。チュートリアル]。
サーバーにインストールされたApache。 Ubuntuを使用している場合は、https：//www.digitalocean.com/community/tutorials/how-to-install-linux-apache-mysql-php-lamp-stack-on-ubuntu-16-のステップ1に従うことができます。 04 [Linux、Apache、MySQL、PHP（LAMP）スタックをUbuntu 16.04にインストールする方法]。 CentOSを使用している場合は、https：//www.digitalocean.com/community/tutorials/how-to-install-linux-apache-mysql-php-lamp-stack-on-centos-7のステップ1に従う必要があります。 [Linux、Apache、MySQL、PHP（LAMP）スタックをCentOS 7にインストールする方法]。ファイアウォール設定を調整して、HTTPおよびHTTPSトラフィックを許可してください。
サーバーにインストールされている + mod_rewrite +。 Ubuntuを使用している場合は、https：//www.digitalocean.com/community/tutorials/how-to-rewrite-urls-with-mod_rewrite-for-apache-on-ubuntu-16-04のガイドに従うことができます[ Ubuntu 16.04でApacheのmod_rewriteを使用してURLを書き換える方法]。 CentOS 7では、デフォルトで `+ mod_rewrite +`がインストールされ、アクティブになります。

手順1-cwebpのインストールと画像ディレクトリの準備

このセクションでは、テスト対策として、イメージを変換し、イメージを含むディレクトリを作成するソフトウェアをインストールします。

Ubuntu 16.04では、次のように入力して、画像を `+ .webp `形式に圧縮するユーティリティである ` cwebp +`をインストールできます。

sudo apt-get update
sudo apt-get install webp

CentOS 7では、次を入力します。

sudo yum install libwebp-tools

Apache Webルート（デフォルトでは `+ / var / www / html `にあります）に ` webp +`という新しい画像ディレクトリを作成するには、次のように入力します。

sudo mkdir /var/www/html/webp

このディレクトリの所有権を非ルートユーザー* sammy *に変更します。

sudo chown : /var/www/html/webp

コマンドをテストするには、 `+ wget`を使用して無料のJPEGおよびPNG画像をダウンロードできます。このツールは、Ubuntu 16.04にデフォルトでインストールされます。 CentOS 7を使用している場合は、次のように入力してインストールできます。

sudo yum install wget

次に、次のコマンドを使用してテストイメージをダウンロードします。

wget -c "https://upload.wikimedia.org/wikipedia/commons/2/24/Junonia_orithya-Thekkady-2016-12-03-001.jpg?download" -O /var/www/html/webp/image1.jpg
wget -c "https://upload.wikimedia.org/wikipedia/commons/5/54/Mycalesis_junonia-Thekkady.jpg" -O /var/www/html/webp/image2.jpg
wget -c "https://cdn.pixabay.com/photo/2017/07/18/15/39/dental-care-2516133_640.png" -O /var/www/html/webp/logo.png

次のステップでの作業の大部分は `+ / var / www / html / webp +`ディレクトリにあり、次のように入力して移動できます。

cd /var/www/html/webp

テストイメージを配置し、Apache Webサーバー、 + mod_rewrite +、および `+ cwebp +`をインストールしたら、イメージの変換に進む準備ができました。

手順2-cwebpを使用した画像ファイルの圧縮

サイトの訪問者に `+ .webp `画像を提供するには、画像ファイルの ` .webp `バージョンが必要です。このステップでは、 ` cwebp `を使用してJPEGおよびPNG画像を ` .webp +`形式に変換します。コマンドの*一般*構文は次のようになります。

cwebp image.jpg -o image.webp

`+ -o +`オプションは、WebPファイルへのパスを指定します。

まだ `+ / var / www / html / webp `ディレクトリにいるので、次のコマンドを実行して ` image1.jpg `を ` image1.webp `に、 ` image2.jpg +`を `+に変換できます。 image2.webp + `：

cwebp -q 100 image1.jpg -o image1.webp
cwebp -q 100 image2.jpg -o image2.webp

品質係数「+ -q +」を100に設定すると、100％の画質が維持されます。指定しない場合、デフォルト値は75です。

次に、 `+ ls `コマンドを使用してJPEG画像とWebP画像のサイズを調べます。 ` -l `オプションはファイルのサイズを含む長いリスト形式を表示し、 ` -h `オプションは ` ls +`が人間が読めるサイズを表示するようにします：

ls -lh image1.jpg image1.webp image2.jpg image2.webp

Output-rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg
-rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46
-rw-r--r-- 1 sammy sammy  16M Dec 18  2016 image2.jpg
-rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59

+ ls +`コマンドの出力は、 `+ image1.jpg +`のサイズが7.4Mであるのに対し、 `+ image1.webp +`のサイズは3.9Mであることを示しています。同じことが `+ image2.jpg +（16M）および + image2.webp +（7M）にも当てはまります。これらのファイルは元のサイズのほぼ半分です！

圧縮中に画像の完全な元のデータを保存するには、「-q +」の代わりに「 -lossless +」オプションを使用できます。これは、PNG画像の品質を維持するための最適なオプションです。ステップ1からダウンロードしたPNGイメージを変換するには、次のように入力します。

cwebp -lossless logo.png -o logo.webp

次のコマンドは、ロスレスWebP画像サイズ（60K）が元のPNG画像（116K）の約半分のサイズであることを示しています。

ls -lh logo.png logo.webp

Output-rw-r--r-- 1 sammy sammy 116K Jul 18  2017 logo.png
-rw-r--r-- 1 sammy sammy  60K Feb 18 16:42

`+ / var / www / html / webp +`ディレクトリ内の変換されたWebP画像は、対応するJPEGおよびPNGよりも約50％小さくなります。実際には、圧縮率は特定の要因に応じて異なります。元の画像の圧縮率、ファイル形式、変換の種類（損失または損失なし）、品質の割合、およびオペレーティングシステム。より多くの画像を変換すると、これらの要因に関連する変換率の変動が見られる場合があります。

手順3-ディレクトリ内のJPEGおよびPNG画像の変換

スクリプトを記述すると、手動変換の作業がなくなるため、変換プロセスが簡素化されます。 JPEGファイルを見つけて90％品質のWebP形式に変換する変換スクリプトを作成すると同時に、PNGファイルをロスレスWebP画像に変換します。

`+ nano `またはお気に入りのエディターを使用して、ユーザーのホームディレクトリに ` webp-convert.sh +`スクリプトを作成します。

nano ~/webp-convert.sh

スクリプトの最初の行は次のようになります。

〜/ webp-convert.sh

find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \)

この行には次のコンポーネントがあります。

https://www.digitalocean.com/community/tutorials/how-to-use-find-and-locate-to-search-for-files-on-a-linux-vps [+ find +]：このコマンド指定されたディレクトリ内のファイルを検索します。
+ $ 1 +：この定位置パラメーターは、コマンドラインから取得した画像ディレクトリのパスを指定します。最終的には、ディレクトリの場所がスクリプトの場所に依存しにくくなります。
+ -type f +：このオプションは、通常のファイルのみを検索するように `+ find +`に指示します。
+ -iname +：このテストは、指定されたパターンに対してファイル名を照合します。大文字と小文字を区別しない「+ -iname 」テストは、「。jpg 」（「 *。jpg 」）または「 .jpeg 」（「 *。jpeg 」）で終わるファイル名を探すように「 find +」に指示します。
+ -o +：この論理演算子は、最初の + -iname +`テスト（ `+ -iname" * .jpg "+）または 2番目（ `+ -iname "* .jpeg" + `）。
（）：これらのテストを囲む括弧は、 + -and +`演算子とともに、最初のテスト（つまり、 `+ -type f +）は常に実行されます。

スクリプトの2行目は、 `+ -exec `パラメーターを使用して画像をWebPに変換します。このパラメーターの一般的な構文は ` -exec command {} \; `です。文字列 ` {} `はコマンドが反復する各ファイルに置き換えられ、 `; `はコマンドの終了位置を ` find +`に伝えます

〜/ webp-convert.sh

find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
-exec bash -c 'commands' {} \;

この場合、 `+ -exec +`パラメーターは画像を検索して変換するために複数のコマンドを必要とします：

+ bash +：このコマンドは、存在しない場合にファイルの `+ .webp `バージョンを作成する小さなスクリプトを実行します。このスクリプトは、 ` -c `オプションのおかげで、文字列として ` bash +`に渡されます。
+ 'commands' +：このプレースホルダーは、ファイルの `+ .webp +`バージョンを作成するスクリプトです。

`+ 'commands' +`内のスクリプトは次のことを行います：

`+ webp_path +`変数を作成します。
ファイルの `+ .webp +`バージョンが存在するかどうかをテストします。
ファイルが存在しない場合は作成します。

小さいスクリプトは次のようになります。

〜/ webp-convert.sh

...
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
 cwebp -quiet -q 90 "$0" -o "$webp_path";
fi;

この小さなスクリプトの要素は次のとおりです。

+ webp_path +：この変数はhttps://www.digitalocean.com/community/tutorials/the-basics-of-using-the-sed-stream-editor-to-manipulate-text-in-linuxを使用して生成されます[+ sed +]および + bash +`コマンドからの一致したファイル名。位置パラメーター `+ $ 0 +`で示されます。 here string（ `+ <<< +）はこの名前を `+ sed +`に渡します。
+ if [！ -f "$ webp_path"] + `：このテストは、論理的な + not + 演算子（ ！ ）を使用して、 + "$ webp_path" + `という名前のファイルが既に存在するかどうかを確認します。
+ cwebp +：このコマンドは、ファイルが存在しない場合、出力を印刷しないように `+ -q +`オプションを使用してファイルを作成します。

`+ 'commands' +`プレースホルダーの代わりにこの小さなスクリプトを使用すると、JPEGイメージを変換するための完全なスクリプトは次のようになります。

〜/ webp-convert.sh

# converting JPEG images
find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
 cwebp -quiet -q 90 "$0" -o "$webp_path";
fi;' {} \;

PNG画像をWebPに変換するには、2つの違いを除いて同じアプローチを取ります。最初に、 `+ find `コマンドの ` -iname `パターンは `" *。png "`になります。第二に、変換コマンドは品質の「 -q 」オプションの代わりに「 -lossless +」オプションを使用します。

完成したスクリプトは次のようになります。

〜/ webp-convert.sh

#!/bin/bash

# converting JPEG images
find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
 cwebp -quiet -q 90 "$0" -o "$webp_path";
fi;' {} \;

# converting PNG images
find $1 -type f -and -iname "*.png" \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
 cwebp -quiet -lossless "$0" -o "$webp_path";
fi;' {} \;

ファイルを保存し、エディターを終了します。

次に、 `+ / var / www / html / webp `ディレクトリ内のファイルを使用して、 ` webp-convert.sh +`スクリプトを実行します。次のコマンドを実行して、スクリプトファイルが実行可能であることを確認します。

chmod a+x ~/webp-convert.sh

imagesディレクトリでスクリプトを実行します。

./webp-convert.sh /var/www/html/webp

何も起こらなかった！これは、手順2でこれらの画像を既に変換したためです。今後、 `+ webp-convert `スクリプトは、新しいファイルを追加したり、 ` .webp `バージョンを削除したときに画像を変換します。これがどのように機能するかを確認するには、ステップ2で作成した ` .webp +`ファイルを削除します。

rm /var/www/html/webp/*.webp

すべての `+ .webp +`イメージを削除した後、スクリプトを再度実行して機能することを確認します。

./webp-convert.sh /var/www/html/webp

`+ ls +`コマンドは、スクリプトが画像を正常に変換したことを確認します：

ls -lh /var/www/html/webp

Output-rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg
-rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46
-rw-r--r-- 1 sammy sammy  16M Dec 18  2016 image2.jpg
-rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59
-rw-r--r-- 1 sammy sammy 116K Jul 18  2017 logo.png
-rw-r--r-- 1 sammy sammy  60K Feb 18 16:42

このステップのスクリプトは、サイトでWebP画像を使用するための基盤です。訪問者に提供するには、WebP形式のすべての画像の作業バージョンが必要になるためです。次のステップでは、新しい画像の変換を自動化する方法について説明します。

手順4-ディレクトリ内の画像ファイルの監視

この手順では、イメージディレクトリの変更を監視し、新しく作成されたイメージを自動的に変換する新しいスクリプトを作成します。

画像ディレクトリを監視するスクリプトを作成すると、記述されている + webp-convert.sh +`スクリプトの特定の問題に対処できます。たとえば、このスクリプトは、画像の名前を変更したかどうかを識別しません。「+ foo.jpg +」という画像があり、「+ webp-convert.sh +」を実行し、そのファイルの名前を「+ bar.jpg +」に変更してから、「+ webp-convert.sh +」を再度実行した場合、 `+ .webp +`ファイル（ `+ foo.webp +`および `+ bar.webp +）。この問題を解決し、スクリプトを手動で実行しないようにするために、_watchers_を別のスクリプトに追加します。ウォッチャーは、指定されたファイルまたはディレクトリの変更を監視し、それらの変更に応じてコマンドを実行します。

`+ inotifywait `コマンドはスクリプトにウォッチャーを設定します。このコマンドは、inotifyカーネルサブシステムへのシンプルなインターフェイスを提供するコマンドラインツールのセットである ` inotify-tools +`パッケージの一部です。 Ubuntu 16.04にインストールするには、次のように入力します。

sudo apt-get install inotify-tools

CentOS 7では、EPELリポジトリで `+ inotify-tools `パッケージを利用できます。次のコマンドを使用して、EPELリポジトリと ` inotify-tools +`パッケージをインストールします。

sudo yum install epel-release
sudo yum install inotify-tools

次に、 `+ nano `を使用して、ユーザーのホームディレクトリに ` webp-watchers.sh +`スクリプトを作成します。

nano ~/webp-watchers.sh

スクリプトの最初の行は次のようになります。

〜/ webp-watchers.sh

inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1

この行には次の要素が含まれます。

+ inotifywait +：このコマンドは、特定のディレクトリへの変更を監視します。
+ -q +：このオプションは、 `+ inotifywait +`を静かにし、大量の出力を生成しないように指示します。
+ -m +：このオプションは、 `+ inotifywait +`に単一のイベントを受け取った後に終了せずに終了するように指示します。
+ -r +：このオプションは、ウォッチャーを再帰的に設定し、指定されたディレクトリとそのすべてのサブディレクトリを監視します。
+-format +：このオプションは、ファイル名が後に続くイベント名を使用して変更を監視するように `+ inotifywait `に指示します。監視するイベントは、「 close_write 」（ファイルが作成されてディスクに完全に書き込まれたときにトリガーされる）、「 moved_from 」および「 moved_to 」（ファイルが移動したときにトリガーされる）、および「 delete +」（ファイルが削除されるとトリガーされます）。
+ $ 1 +：この定位置パラメーターは、変更されたファイルのパスを保持します。

次に、「+ grep 」コマンドを追加して、ファイルがJPEGまたはPNG画像かどうかを確認します。 ` -i `オプションは ` grep `に大文字小文字を無視するように指示し、 ` -E `は ` grep `が拡張正規表現を使用することを指定し、 `-line-buffered `は ` grep `に指示します一致した行を ` while +`ループに渡すには：

〜/ webp-watchers.sh

inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 | grep -i -E '\.(jpe?g|png)$' --line-buffered

次に、 + read`コマンドで + while`ループを構築します。 + readd`は、 + inotifywait`が検出したイベントを処理し、それを `+ $ operation `という変数に割り当て、処理されたファイルパスを ` $ path +`という名前の変数に割り当てます。

〜/ webp-watchers.sh

...
| while read operation path; do
 # commands
done;

このループをスクリプトの残りの部分と組み合わせてみましょう。

〜/ webp-watchers.sh

inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 \
| grep -i -E '\.(jpe?g|png)$' --line-buffered \
| while read operation path; do
 # commands
done;

`+ while +`ループがイベントをチェックした後、結果に応じてループ内のコマンドは次のアクションを実行します：

新しいイメージファイルが作成されたか、ターゲットディレクトリに移動された場合、新しいWebPファイルを作成します。
関連する画像ファイルが削除されたか、ターゲットディレクトリから移動された場合、WebPファイルを削除します。

ループ内には3つの主要なセクションがあります。 `+ webp_path `と呼ばれる変数は、対象画像の ` .webp +`バージョンへのパスを保持します：

〜/ webp-watchers.sh

...
webp_path="$(sed 's/\.[^.]*$/.webp/' <<< "$path")";

次に、スクリプトはどのイベントが発生したかをテストします。

〜/ webp-watchers.sh

...
if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then
 # commands to be executed if the file is moved or deleted
elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then
 # commands to be executed if a new file is created
fi;

ファイルが移動または削除されている場合、スクリプトは `+ .webp `バージョンが存在するかどうかを確認します。存在する場合、スクリプトは ` rm +`を使用して削除します：

〜/ webp-watchers.sh

...
if [ -f "$webp_path" ]; then
 $(rm -f "$webp_path");
fi;

新しく作成されたファイルの場合、圧縮は次のように行われます。

一致したファイルがPNG画像の場合、スクリプトは可逆圧縮を使用します。
そうでない場合、スクリプトは `+ -quality +`オプションを使用して非可逆圧縮を使用します。

この作業を行う「+ cwebp +」コマンドをスクリプトに追加しましょう。

〜/ webp-watchers.sh

...
if [ $(grep -i '\.png$' <<< "$path") ]; then
 $(cwebp -quiet -lossless "$path" -o "$webp_path");
else
 $(cwebp -quiet -q 90 "$path" -o "$webp_path");
fi;

完全に、 `+ webp-watchers.sh +`ファイルは次のようになります。

〜/ webp-watchers.sh

#!/bin/bash
echo "Setting up watches.";

# watch for any created, moved, or deleted image files
inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 \
| grep -i -E '\.(jpe?g|png)$' --line-buffered \
| while read operation path; do
 webp_path="$(sed 's/\.[^.]*$/.webp/' <<< "$path")";
 if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then # if the file is moved or deleted
   if [ -f "$webp_path" ]; then
     $(rm -f "$webp_path");
   fi;
 elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then  # if new file is created
    if [ $(grep -i '\.png$' <<< "$path") ]; then
      $(cwebp -quiet -lossless "$path" -o "$webp_path");
    else
      $(cwebp -quiet -q 90 "$path" -o "$webp_path");
    fi;
 fi;
done;

ファイルを保存して閉じます。実行可能にすることを忘れないでください：

chmod a+x ~/webp-watchers.sh

このスクリプトをバックグラウンドで `+ / var / www / html / webp `ディレクトリで実行し、 `＆`を使用します。また、標準出力と標準エラーを `〜/ output.log +`にリダイレクトして、出力をすぐに利用できる場所に保存します。

./webp-watchers.sh /var/www/html/webp > output.log 2>&1 &

この時点で、 `+ / var / www / html / webp `のJPEGおよびPNGファイルをWebP形式に変換し、 ` webp-watchers.sh +`スクリプトを使用してこの作業を行うようにウォッチャーを設定しました。 WebP訪問者にWebP画像を配信するためのオプションを検討する時が来ました。

ステップ5-HTML要素を使用して訪問者にWebP画像を提供する

このステップでは、HTML要素を持つWebP画像を提供する方法を説明します。この時点で、 + / var / www / html / webp +`ディレクトリに各テストJPEGおよびPNG画像の `+ .webp +`バージョンがあるはずです。 HTML5要素（ `+ <picture> +）または + mod_rewrite + Apacheモジュールのいずれかを使用して、サポートするブラウザーにそれらを提供できるようになりました。このステップでは、HTML要素を使用します。

`+ <picture> `要素を使用すると、Webページに画像を直接含めることができ、複数の画像ソースを定義できます。ブラウザがWebP形式をサポートしている場合、ブラウザは元のファイルではなくファイルの ` .webp `バージョンをダウンロードするため、Webページの処理速度が向上します。 ` <picture> +`要素は、WebP形式をサポートする最新のブラウザで十分にサポートされていることに言及する価値があります。

`+ <picture> `要素は、特定のファイルを指す ` <source> `および ` <img> `要素を持つコンテナです。 ` <source> `を使用して ` .webp `画像を指す場合、ブラウザはそれを処理できるかどうかを確認します。それ以外の場合は、 ` <img> `要素の ` src +`属性で指定された画像ファイルにフォールバックします。

`+ <source> `の例として、 ` logo.webp `に変換した ` / var / www / html / webp `ディレクトリの ` logo.png `ファイルを使用しましょう。次のHTMLコードを使用して、WebP形式をサポートするブラウザに ` logo.webp `を表示し、WebPまたは ` <picture> `要素をサポートしないブラウザに ` logo.png +`を表示できます。

`+ / var / www / html / webp / picture.html`にあるHTMLファイルを作成します。

nano /var/www/html/webp/picture.html

次のコードをWebページに追加して、 `+ <picture> `要素を使用して、サポートするブラウザーに ` logo.webp +`を表示します。

/var/www/html/webp/picture.html

<picture>
 <source srcset="logo.webp" type="image/webp">
 <img src="logo.png" alt="Site Logo">
</picture>

ファイルを保存して閉じます。

すべてが機能していることをテストするには、 `+ http：/// webp / picture.html`に移動します。テストPNG画像が表示されます。

HTMLコードから直接 `+ .webp `画像を提供する方法がわかったので、Apacheの ` mod_rewrite +`モジュールを使用してこのプロセスを自動化する方法を見てみましょう。

手順6-mod_rewriteを使用したWebPイメージの提供

サイトの速度を最適化したいが、ページ数が多い、またはHTMLコードを編集する時間があまりない場合、Apacheの `+ mod_rewrite `モジュールを使用して、 ` .webp +`画像をサポートするプロセスを自動化できます。ブラウザ。

まず、次のコマンドを使用して、 `+ / var / www / html / webp `ディレクトリに ` .htaccess +`ファイルを作成します。

nano /var/www/html/webp/.htaccess

`+ ifModule `ディレクティブは、 ` mod_rewrite `が利用可能かどうかをテストします。ある場合は、 ` RewriteEngine On `を使用してアクティブ化できます。これらのディレクティブを ` .htaccess +`に追加します：

/var/www/html/webp/.htaccess

<ifModule mod_rewrite.c>
 RewriteEngine On
 # further directives
</IfModule>

Webサーバーは、ユーザーに `+ .webp `画像をいつ提供するかを確立するためにいくつかのテストを行います。ブラウザーが要求を行うと、ブラウザーが処理できるものをサーバーに示すヘッダーが含まれます。 WebPの場合、ブラウザは ` image / webp `を含む ` Accept `ヘッダーを送信します。ブラウザが ` RewriteCond `を使用してそのヘッダーを送信したかどうかを確認します。これは、 ` RewriteRule +`を実行するために一致する基準を指定します。

/var/www/html/webp/.htaccess

...
RewriteCond %{HTTP_ACCEPT} image/webp

JPEGおよびPNG画像を除くすべてを除外する必要があります。再度 `+ RewriteCond +`を使用して、リクエストされたURIに一致する正規表現（前のセクションで使用したものと同様）を追加します。

/var/www/html/webp/.htaccess

...
RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$

`（？i）`修飾子は、大文字と小文字を区別せずに一致させます。

ファイルの `+ .webp `バージョンが存在するかどうかを確認するには、次のように ` RewriteCond +`を再度使用します。

/var/www/html/webp/.htaccess

...
RewriteCond %{DOCUMENT_ROOT}%1.webp -f

最後に、以前のすべての条件が満たされた場合、 `+ RewriteRule `は要求されたJPEGまたはPNGファイルを関連するWebPファイルにリダイレクトします。 URIを_rewrite_するのではなく、 ` -R `フラグを使用して_redirect_することに注意してください。書き換えとリダイレクトの違いは、サーバーがブラウザーに通知せずに書き換えられたURIを提供することです。たとえば、URIはファイル拡張子が ` .png `であることを示しますが、実際には ` .webp `ファイルになります。ファイルに ` RewriteRule +`を追加します。

/var/www/html/webp/.htaccess

...
RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R]

この時点で、 `+ .htaccess `ファイルの ` mod_rewrite `セクションが完成しました。しかし、サーバーとクライアントの間に中間キャッシングサーバーがある場合はどうなりますか？エンドユーザーに間違ったバージョンを提供する可能性があります。そのため、 ` Vary：Accept `ヘッダーを送信するために、 ` mod_headers `が有効になっているかどうかを確認する価値があります。 ` Vary `ヘッダーは、キャッシュサーバー（プロキシサーバーなど）に対して、ドキュメントを要求するブラウザーの機能によってドキュメントのコンテンツタイプが異なることを示します。さらに、リクエスト内の ` Accept `ヘッダーに基づいてレスポンスが生成されます。異なる ` Accept +`ヘッダーを持つリクエストは、異なる応答を受け取る場合があります。このヘッダーは、キャッシュされたWebP画像がサポートされていないブラウザーに配信されるのを防ぐため重要です。

/var/www/html/webp/.htaccess

...
<IfModule mod_headers.c>
 Header append Vary Accept env=REDIRECT_accept
</IfModule>

最後に、 `+ .htaccess `ファイルの最後で、 ` AddType `ディレクティブを使用して、 ` .webp `画像のMIMEタイプを ` image / webp +`に設定します。これにより、適切なMIMEタイプを使用して画像が提供されます。

/var/www/html/webp/.htaccess

...
AddType image/webp .webp

これは、 `+ .htaccess`ファイルの最終バージョンです。

/var/www/html/webp/.htaccess

<ifModule mod_rewrite.c>
 RewriteEngine On
 RewriteCond %{HTTP_ACCEPT} image/webp
 RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$
 RewriteCond %{DOCUMENT_ROOT}%1.webp -f
 RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R]
</IfModule>

<IfModule mod_headers.c>
 Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

このステップで行ったことを実践に移しましょう。前の手順の指示に従った場合、 + / var / www / html / webp +`に `+ logo.png`と + logo.webp`のイメージがあるはずです。シンプルな「+ <img> 」タグを使用して、Webページに「 logo.png +」を含めます。新しいHTMLファイルを作成して、セットアップをテストします。

nano /var/www/html/webp/img.html

ファイルに次のHTMLコードを入力します。

/var/www/html/webp/img.html

<img src="logo.png" alt="Site Logo">

ファイルを保存して閉じます。

`+ http：/// webp / img.html `にアクセスしてChromeを使用してWebページにアクセスすると、提供される画像が ` .webp `バージョンであることがわかります（新しいタブで画像を開いてみてください）。 Firefoxを使用している場合、 ` .png +`画像が自動的に取得されます。

結論

このチュートリアルでは、WebPイメージを操作するための基本的なテクニックを説明しました。 `+ cwebp `を使用してファイルを変換する方法と、これらの画像をユーザーに提供する2つのオプション：HTML5の ` <picture> `要素とApacheの ` mod_rewrite +`を説明しました。

このチュートリアルのスクリプトをカスタマイズするには、次のリソースをご覧ください。

WebP形式の機能と変換ツールの使用方法の詳細については、https：//developers.google.com/speed/webp/ [WebPドキュメント]をご覧ください。
`+ <picture> +`要素の使用法の詳細については、https：//developer.mozilla.org/en-US/docs/Web/HTML/Element/picture [MDNのドキュメント]をご覧ください。
`+ mod_rewrite +`の使用方法を完全に理解するには、https：//httpd.apache.org/docs/current/mod/mod_rewrite.html [ドキュメント]を参照してください。

画像にWebP形式を使用すると、ファイルサイズが大幅に削減されます。これにより、特にWebサイトで多くの画像を使用している場合、帯域幅の使用量を削減し、ページの読み込みを高速化できます。

TOC

WebPイメージを作成および提供してWebサイトを高速化する方法

前書き

前提条件

手順1-cwebpのインストールと画像ディレクトリの準備

手順2-cwebpを使用した画像ファイルの圧縮

手順3-ディレクトリ内のJPEGおよびPNG画像の変換

手順4-ディレクトリ内の画像ファイルの監視

ステップ5-HTML要素を使用して訪問者にWebP画像を提供する

手順6-mod_rewriteを使用したWebPイメージの提供

結論

Related