Pagespeed Insightsでサイトパフォーマンスをチェックした際に「改善できる項目」に「次世代フォーマットでの画像の配信」が改善項目になっていたので、画像ファイルをWebPに変換、「EWWW Image Optimizer」プラグインを使ってWebPが使える場合はWebPを読み込むように変更したときの手順を覚え書き。
次世代画像フォーマットWebPとは
「Webサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。」だそうです。
とはいえあまり普及していないようで、WebPを表示できるかどうかはブラウザによって異なります。
今回はPagespeed Insightsのスコアを上げるためにWebPをサポートするブラウザにはWebP、サポートしない場合はもとのPNGなどの画像を表示するようにする際の作業の覚書です。
画像ファイルをすべてWebP形式に変換
まず最初にやることは、今ブログ内で使用しているすべての画像ファイルをWebP形式に変換します。
私のブログの場合、記事で使用される画像ファイルは「Images」というフォルダの下に記事の番号ごとにフォルダを作成してそこに保管、記事内でURL指定になっています。
なので、一旦すべての画像ファイルの親フォルダとなっている「Images」フォルダをPCにダウンロードします。
1つ1つフォルダごとに変換していくのはとても面倒なので、「Images」フォルダに対してEverythingで「*.png」で検索をかけます。
検索結果をファイル変換ツール「Converseen」にドラッグ&ドロップします。
「Converseen」の「Output options」を以下のように設定します。
- [Image's directory]:チェックオン
- [Rename]:チェックオン
- [Prefix/Suffix]オプションオン
- テキストボックスに「#.png」を入力(#.変換する画像の拡張子にする)
例えば、jpegファイルの場合だったら「#.jpeg」になる
変換オプションの内容としては、WebPに変換、変換後のファイル名を元のファイル名(拡張子含む)+.WebPに変更してもとの画像ファイルと同じ場所に保存するという感じです。
設定を完了したら、ツールバーの[Check all]をクリックしてすべてのファイルのチェックをオン、[Covert]ボタンをクリックします。
プラグイン「EWWW Image Optimizer」の設定
WordPressのプラグイン「EWWW Image Optimizer」を使用していなかったらプラグインを追加します。
「EWWW Image Optimizer」プラグインを追加したら有効化し、[設定]をクリックします。
「EWWW Image Optimizer」の設定画面が開くので、[基本]タブを選択します。
「WebP 変換」の「ほかのブラウザでは元の画像を提供し、対応するブラウザ用では画像を次世代の形式に変換します。」チェックボックスをオンにします。
以下のように「WebPの配信方法」の下に.htaccessファイルへの追記内容が表示されるので[リライトルールを挿入する]をクリックします。
「挿入成功」と表示されるので、[変更を保存]ボタンをクリックする。
以上で「EWWW Image Optimizer」プラグインの設定は終了です。
WebPが読み込まれているか確認する方法
Chromeブラウザで画像が挿入されている記事を開く。
[F12]キーを押して[Developer Tools]ウィンドウを表示、[Network]をクリックする。
記事の画像がある場所までゆっくりスクロールする。
[Developer Tools]ウィンドウに表示される画像ファイルの「Type」が「webp」になっていれば、元の画像ファイル(xxx.pngとか)の代わりにwebpファイルが読み込まれていることになる。
補足
DOSコマンドで変換したWebPファイルのファイル名を「XXX.png.WebP」にする場合のコマンド例。
MS-DOS(コマンドプロンプト)を起動して、WebPに変換された画像ファイルがあるフォルダにディレクトリを移動する。
以下のコマンドを実行する。(以下の例は、pngファイルを変換した場合)
ren *.webp *.png.webp
以下のようにXXX.pngだったファイルが、XXX.png.WebPに変更される。
C:\Users\XXX>cd /d C:\Users\XXX\Desktop\2019
C:\Users\XXX\Desktop\2019>dir
ドライブ C のボリューム ラベルは Windows です
ボリューム シリアル番号は AC75-EB41 です
C:\Users\XXX\Desktop\2019 のディレクトリ
2021/08/11 15:56 <DIR> .
2021/08/11 15:56 <DIR> ..
2021/08/11 15:56 2,334 2019-01.webp
2021/08/11 15:56 6,994 2019-02.webp
2021/08/11 15:56 6,212 2019-03.webp
2021/08/11 15:56 2,318 2019-04.webp
2021/08/11 15:56 7,864 2019-05.webp
2021/08/11 15:56 27,732 2019-07.webp
2021/08/11 15:56 56,668 2019-08.webp
7 個のファイル 223,321 バイト
2 個のディレクトリ 45,434,232,832 バイトの空き領域
C:\Users\XXX\Desktop\2019>ren *.webp *.png.webp
C:\Users\XXX\Desktop\2019>dir
ドライブ C のボリューム ラベルは Windows です
ボリューム シリアル番号は AC75-EB41 です
C:\Users\XXX\Desktop\2019 のディレクトリ
2021/08/11 16:00 <DIR> .
2021/08/11 16:00 <DIR> ..
2021/08/11 15:56 2,334 2019-01.png.webp
2021/08/11 15:56 6,994 2019-02.png.webp
2021/08/11 15:56 6,212 2019-03.png.webp
2021/08/11 15:56 2,318 2019-04.png.webp
2021/08/11 15:56 7,864 2019-05.png.webp
2021/08/11 15:56 27,732 2019-07.png.webp
2021/08/11 15:56 56,668 2019-08.png.webp
まとめ
ちょっと今回の説明はだいぶ雑。
時間がなくてあまり詳しく書けなかった。とりあえず自分が見てわかればいいやレベルで書いた。
時間ができたら詳細に記載して改版しよう。
コメント