WebP画像を作成して提供してWebサイトを高速化する方法
序章
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
スクリプトの最初の行は次のようになります。
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
コマンドが終了する場所:
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_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画像を変換するための完全なスクリプトは次のようになります。
# 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
オプション。
完成したスクリプトは次のようになります。
#!/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
スクリプトの最初の行は次のようになります。
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
ループ:
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
:
...
| while read operation path; do
# commands
done;
このループを残りのスクリプトと組み合わせてみましょう。
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_path="$(sed 's/\.[^.]*$/.webp/' <<< "$path")";
次に、スクリプトはどのイベントが発生したかをテストします。
...
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
:
...
if [ -f "$webp_path" ]; then
$(rm -f "$webp_path");
fi;
新しく作成されたファイルの場合、圧縮は次のように行われます。
- 一致したファイルがPNG画像の場合、スクリプトは可逆圧縮を使用します。
- そうでない場合、スクリプトは不可逆圧縮を使用します
-quality
オプション。
追加しましょう cwebp
スクリプトに対してこの作業を行うコマンド:
...
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
ファイルは次のようになります。
#!/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>
エレメント:
<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
:
<ifModule mod_rewrite.c>
RewriteEngine On
# further directives
</IfModule>
Webサーバーは、いつサービスを提供するかを確立するためにいくつかのテストを行います .webp
ユーザーへの画像。 ブラウザがリクエストを行うと、ブラウザが何を処理できるかをサーバーに示すヘッダーが含まれます。 WebPの場合、ブラウザは Accept
を含むヘッダー image/webp
. ブラウザがそのヘッダーを送信したかどうかを確認します RewriteCond
、を実行するために一致する必要がある基準を指定します RewriteRule
:
...
RewriteCond %{HTTP_ACCEPT} image/webp
JPEG画像とPNG画像を除いて、すべてを除外する必要があります。 使用する RewriteCond
ここでも、要求されたURIに一致する正規表現(前のセクションで使用したものと同様)を追加します。
...
RewriteCond %{REQUEST_URI} (?i)(.*)(\.jpe?g|\.png)$
The (?i)
修飾子を使用すると、一致で大文字と小文字が区別されなくなります。
かどうかを確認するには .webp
ファイルのバージョンが存在する場合は、 RewriteCond
再び次のように:
...
RewriteCond %{DOCUMENT_ROOT}%1.webp -f
最後に、以前のすべての条件が満たされた場合、 RewriteRule
要求されたJPEGまたはPNGファイルを関連するWebPファイルにリダイレクトします。 これは、リダイレクトを使用して -R
URIをrewriteではなくフラグ。 書き換えとリダイレクトの違いは、サーバーがブラウザに通知せずに書き換えられたURIを提供することです。 たとえば、URIはファイル拡張子が .png
、しかし実際には .webp
ファイル。 追加 RewriteRule
ファイルへ:
...
RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R]
この時点で、 mod_rewrite
のセクション .htaccess
ファイルが完成しました。 しかし、サーバーとクライアントの間に中間キャッシュサーバーがある場合はどうなりますか? エンドユーザーに間違ったバージョンを提供する可能性があります。 そのため、確認する価値があります。 mod_headers
を送信するために有効になっています Vary: Accept
ヘッダ。 The Vary
ヘッダーは、ドキュメントを要求するブラウザの機能に応じてドキュメントのコンテンツタイプが異なることをキャッシュサーバー(プロキシサーバーなど)に示します。 さらに、応答はに基づいて生成されます Accept
リクエストのヘッダー。 別のリクエスト Accept
ヘッダーは異なる応答を受け取る可能性があります。 このヘッダーは、キャッシュされたWebP画像がサポートされていないブラウザーに提供されるのを防ぐために重要です。
...
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
最後に、 .htaccess
ファイル、のMIMEタイプを設定します .webp
に画像 image/webp
を使用して AddType
指令。 これにより、適切なMIMEタイプを使用して画像が提供されます。
...
AddType image/webp .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コードを入力します。
<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サイトで大量の画像を使用している場合に、帯域幅の使用量を減らし、ページの読み込みを高速化できます。