WebP画像を作成して提供してWebサイトを高速化する方法

投稿日: 2019-11-08 2022-10-17
タグ: apache, CentOS, Ubuntu 16.04

序章

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

WebP形式は、アニメーションを含む非可逆および可逆画像圧縮の両方をサポートします。 Webで使用される他の画像形式に対する主な利点は、ファイルサイズがはるかに小さいことです。これにより、Webページの読み込みが速くなり、帯域幅の使用量が削減されます。 WebP画像を使用すると、ページ速度が大幅に向上する可能性があります。アプリケーションまたはWebサイトでパフォーマンスの問題やトラフィックの増加が発生している場合は、画像を変換するとページのパフォーマンスを最適化できる場合があります。

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

前提条件

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

root以外のsudoユーザーでセットアップされたサーバー。 Ubuntu 16.04サーバーをセットアップするには、Ubuntu16.04初期サーバーセットアップガイドに従ってください。 CentOSを使用する場合は、CentOS7の初期サーバーセットアップチュートリアルを使用してCentOS7サーバーをセットアップできます。
サーバーにインストールされているApache。 Ubuntuを使用している場合は、 Linux、Apache、MySQL、PHP（LAMP）スタックをUbuntu16.04にインストールする方法のステップ1に従うことができます。 CentOSを使用している場合は、 Linux、Apache、MySQL、PHP（LAMP）スタックをCentOS7にインストールする方法のステップ1に従う必要があります。 HTTPおよびHTTPSトラフィックを許可するようにファイアウォール設定を調整してください。
mod_rewrite サーバーにインストールされています。 Ubuntuを使用している場合は、 Ubuntu16.04でApache用にmod_rewriteを使用してURLを書き換える方法に関するガイドに従うことができます。 CentOS7の場合 mod_rewrite デフォルトでインストールされ、アクティブ化されます。

ステップ1—cwebpのインストールと画像ディレクトリの準備

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

Ubuntu 16.04では、インストールできます cwebp、画像をに圧縮するユーティリティ .webp フォーマット、次のように入力します。

sudo apt-get update
sudo apt-get install webp

CentOS 7では、次のように入力します。

sudo yum install libwebp-tools

と呼ばれる新しい画像ディレクトリを作成するには webp Apache Webルート（デフォルトでは次の場所にあります） /var/www/html）タイプ：

sudo mkdir /var/www/html/webp

このディレクトリの所有権をroot以外のユーザーsammyに変更します。

sudo chown sammy: /var/www/html/webp

コマンドをテストするには、を使用して無料のJPEGおよびPNG画像をダウンロードできます。 wget. このツールはデフォルトでUbuntu16.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

テストイメージとApacheWebサーバーを配置し、 mod_rewrite、と cwebp インストールすると、画像の変換に進む準備が整います。

ステップ2—cwebpを使用した画像ファイルの圧縮

サービング .webp サイト訪問者への画像が必要です .webp 画像ファイルのバージョン。このステップでは、JPEGおよびPNG画像をに変換します .webp を使用したフォーマット cwebp. コマンドのgeneral構文は次のようになります。

cwebp image.jpg -o image.webp

The -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% ofの画質が維持されます。指定しない場合、デフォルト値は75です。

次に、を使用してJPEGおよびWebP画像のサイズを検査します。 ls 指図。 The -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 image1.webp
-rw-r--r-- 1 sammy sammy  16M Dec 18  2016 image2.jpg
-rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59 image2.webp

の出力 ls コマンドは、のサイズが image1.jpg のサイズは7.4Mですが image1.webp は390万です。同じことが言えます image2.jpg （16M）と image2.webp （7M）。これらのファイルは、元のサイズのほぼ半分です。

圧縮中に画像の完全な元のデータを保存するには、 -lossless の代わりにオプション -q. これは、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 logo.webp

で変換されたWebP画像 /var/www/html/webp ディレクトリは、対応するJPEGおよびPNGよりも約50% sマラーです。実際には、圧縮率は、元の画像の圧縮率、ファイル形式、変換の種類（非可逆または可逆）、品質のパーセンテージ、オペレーティングシステムなどの特定の要因によって異なる場合があります。より多くの画像を変換すると、これらの要因に関連する変換率の変動が見られる場合があります。

ステップ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" \)

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

find ：このコマンドは、指定されたディレクトリ内のファイルを検索します。
$1：この位置パラメータは、コマンドラインから取得した画像ディレクトリのパスを指定します。最終的には、ディレクトリの場所がスクリプトの場所にあまり依存しないようになります。
-type f：このオプションは find 通常のファイルのみを検索します。
-iname：このテストは、指定されたパターンに対してファイル名を照合します。大文字と小文字を区別しない -iname テストは教えてくれます find で終わるファイル名を探す .jpg (*.jpg）また .jpeg (*.jpeg).
-o：この論理演算子は、 find 最初に一致するファイルを一覧表示するコマンド -iname テスト（-iname "*.jpg"）または 2番目（-iname "*.jpeg").
()：これらのテストを括弧で囲み、 -and オペレーター、最初のテスト（すなわち -type f）は常に実行されます。

スクリプトの2行目は、を使用して画像をWebPに変換します。 -exec パラメータ。このパラメータの一般的な構文は次のとおりです。 -exec command {} \;. 文字列 {} コマンドが繰り返す各ファイルに置き換えられますが、 ; 言う find コマンドが終了する場所：

〜/ webp-convert.sh

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

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

bash：このコマンドは、小さなスクリプトを実行します。 .webp ファイルが存在しない場合は、そのバージョン。このスクリプトはに渡されます bash おかげで文字列として -c オプション。
'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：この変数は、sedと一致したファイル名を使用して生成されます。 bash コマンド、位置パラメータで示されます $0. ここの文字列（<<<）この名前をに渡します sed.
if [ ! -f "$webp_path" ]：このテストでは、 "$webp_path" 論理を使用して、すでに存在します not 演算子（!).
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つの違いがあります。 -iname のパターン find コマンドは "*.png". 次に、変換コマンドは -lossless 品質の代わりにオプション -q オプション。

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

〜/ 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;' {} \;

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

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

chmod a+x ~/webp-convert.sh

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

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

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

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

すべてを削除した後 .webp 画像の場合は、スクリプトを再度実行して、スクリプトが機能することを確認します。

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

The 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 image1.webp
-rw-r--r-- 1 sammy sammy  16M Dec 18  2016 image2.jpg
-rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59 image2.webp
-rw-r--r-- 1 sammy sammy 116K Jul 18  2017 logo.png
-rw-r--r-- 1 sammy sammy  60K Feb 18 16:42 logo.webp

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

ステップ4—ディレクトリ内の画像ファイルを見る

このステップでは、新しいスクリプトを作成して、画像ディレクトリの変更を監視し、新しく作成された画像を自動的に変換します。

画像ディレクトリを監視するスクリプトを作成すると、 webp-convert.sh 書かれているとおりのスクリプト。たとえば、このスクリプトでは、画像の名前を変更したかどうかは識別されません。と呼ばれる画像があった場合 foo.jpg、走った webp-convert.sh、そのファイルの名前を変更しました bar.jpg、そして実行しました webp-convert.sh 繰り返しますが、重複しているでしょう .webp ファイル（foo.webp と bar.webp). この問題を解決し、スクリプトを手動で実行しないようにするために、watchersを別のスクリプトに追加します。ウォッチャーは、指定されたファイルまたはディレクトリの変更を監視し、それらの変更に応じてコマンドを実行します。

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

sudo apt-get install inotify-tools

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

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

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

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画像であるかどうかを確認するコマンド。 The -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

次に、 while ループ read 指図。 read イベントを処理します 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 &

この時点で、JPEGファイルとPNGファイルを次のように変換しました。 /var/www/html/webp WebP形式に変換し、ウォッチャーを設定して、 webp-watchers.sh 脚本。今度は、WebP画像をWebサイト訪問者に配信するためのオプションを検討します。

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

このステップでは、HTML要素を使用してWebP画像を提供する方法を説明します。この時点であるはずです .webp 内のテストJPEGおよびPNG画像のそれぞれのバージョン /var/www/html/webp ディレクトリ。これで、HTML5要素（<picture>）または mod_rewrite Apacheモジュール。このステップでは、HTML要素を使用します。

The <picture> elementを使用すると、画像をWebページに直接含めたり、複数の画像ソースを定義したりできます。お使いのブラウザがWebP形式をサポートしている場合は、 .webp 元のファイルの代わりにファイルのバージョンを使用すると、Webページがより高速に提供されます。言及する価値があります <picture> elementは、WebP形式をサポートする最新のブラウザーで十分にサポートされています。

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

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

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

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

次のコードをWebページに追加して表示します logo.webp を使用してブラウザをサポートする <picture> エレメント：

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

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

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

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

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

ステップ6—mod_rewriteを使用してWebP画像を提供する

サイトの速度を最適化したいが、ページ数が多いか、HTMLコードを編集する時間が少なすぎる場合は、Apacheの mod_rewrite モジュールは、サービスのプロセスを自動化するのに役立ちます .webp サポートするブラウザへの画像。

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

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

The ifModule ディレクティブは mod_rewrite 利用可能です; そうである場合は、を使用してアクティブ化できます RewriteEngine On. これらのディレクティブをに追加します .htaccess:

/var/www/html/webp/.htaccess

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

Webサーバーは、いつサービスを提供するかを確立するためにいくつかのテストを行います .webp ユーザーへの画像。ブラウザがリクエストを行うと、ブラウザが何を処理できるかをサーバーに示すヘッダーが含まれます。 WebPの場合、ブラウザは Accept を含むヘッダー image/webp. ブラウザがそのヘッダーを送信したかどうかを確認します 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)$

The (?i) 修飾子を使用すると、一致で大文字と小文字が区別されなくなります。

かどうかを確認するには .webp ファイルのバージョンが存在する場合は、 RewriteCond 再び次のように：

/var/www/html/webp/.htaccess

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

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

/var/www/html/webp/.htaccess

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

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

/var/www/html/webp/.htaccess

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

最後に、 .htaccess ファイル、のMIMEタイプを設定します .webp に画像 image/webp を使用して AddType 指令。これにより、適切な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

注：これをマージできます .htaccess 他のと .htaccess ファイル（存在する場合）。たとえば、WordPressを使用している場合は、これをコピーする必要があります .htaccess ファイルを作成し、既存のファイルのtopに貼り付けます。

このステップで行ったことを実践してみましょう。前の手順の手順に従っている場合は、 logo.png と logo.webp の画像 /var/www/html/webp. 簡単なものを使いましょう <img> 含めるタグ logo.png 私たちのウェブページで。セットアップをテストするための新しいHTMLファイルを作成します。

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

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

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

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

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

Chromeを使用してWebページにアクセスした場合 http://your_server_ip/webp/img.html、提供された画像が .webp バージョン（新しいタブで画像を開いてみてください）。 Firefoxを使用している場合は、 .png 自動的に画像。

結論

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

このチュートリアルのスクリプトをカスタマイズするために、次のリソースのいくつかを見ることができます。

WebP形式の機能と変換ツールの使用方法の詳細については、WebPドキュメントを参照してください。
の使用法の詳細を表示するには <picture> 要素については、MDNに関するドキュメントを参照してください。
使用方法を完全に理解するには mod_rewrite、そのドキュメントを参照してください。

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

getdocs

13036