画像ファイルをWebPに変換してサイトの表示速度を改善しよう

2019/12/25

WebPとは
1. 次世代の静止画フォーマット
2. ホームページの表示速度を改善するための新しい画像形式
JPGとWebPのファイルサイズの比較
1. 画像ファイルをWebPに変換する
1. gulpを使ってJPG、PNG、GIF画像を一括でWebP変換
2. ホームページの画像ファイルをWebPに置き換える
1. htaccessでJPG、PNG、GIFファイルをWebPにリダイレクトさせる
注意点
1. Apacheのいくつかのモジュールがサーバーにインストールされている必要がある
2. IEやSafariはWebP非対応（2019年12月時点）
おまけ　WordPressの記事内の画像もWebP対応する
まとめ

こんにちは、仁木です。

ホームページではサイトの表示速度はとても大事です。
そして表示速度を改善する中で重要になってくるのが、CSSやJavascript、画像などのリソースファイルのダウンロードサイズ、その中でも、とりわけファイルサイズが大きくなってしまうのは画像ファイルです。

今回は「WebP」と呼ばれる次世代の画像フォーマットを利用して、ホームページの画像のファイルサイズを大きく削減できる方法をご紹介します。

WebPとは

次世代の静止画フォーマット

WebP（Wikipediaより引用）

Googleが開発したウェブサイトのための静止画フォーマット（画像ファイル）です。
現在WebではJPGの非可逆圧縮がファイルサイズを削減できるものとして多く利用されていますが、WebPはJPGと比較しておよそ25-34%ファイルサイズが小さくなり、かつPNGと同じ透過チャンネルが扱えます。

ホームページの表示速度を改善するための新しい画像形式

Googleが開発したということでもわかるように、Webサイトのトラフィックの軽減や、表示速度改善のために開発されたフォーマットです。

ページの表示速度のレポートや改善方法を確認できる「PageSpeed Insights」（Google提供）でもパフォーマンス向上のためにWebP対応を提案されます。

JPGとWebPのファイルサイズの比較

同じ画像をJPGとWebPと用意してChromeのDeveloper Toolで検証します。

JPG

WebP（※jpgファイルからwebpファイルへリダイレクトしているため拡張子がjpgになっています）

それぞれ右から２番目の項目がファイルサイズです。JPGが205KBなのに対して、WebPは90.9KBと半分以下のファイルサイズになります。画像の解像度が大きいほど差が大きく、解像度の小さい画像ではこれよりは少ない圧縮率になるようです。

それでは、実際にホームページの画像をWebPに対応する方法をご紹介していきます。

1. 画像ファイルをWebPに変換する

gulpを使ってJPG、PNG、GIF画像を一括でWebP変換

まずは必要なパッケージをnpmでインストールします。

npm install --save-dev gulp gulp-rename gulp-webp

1	npm install --save-dev gulp gulp-rename gulp-webp

次に、gulpfile.jsに変換処理のタスクを追記します。

//プラグインの読み込み
const gulp = require("gulp");
const rename = require("gilp-rename");
const webp = require("gulp-webp");

//WebP変換のタスク
gulp.task("convertWebp", function() {
  return gulp
    .src(["assets/img/*.{png,jpg,gif}","assets/img/**/*.{png,jpg,gif}"], {base:"assets/img"} )
    .pipe(rename(function(path) {
      path.basename += path.extname;
    }))
    .pipe(webp())
    .pipe(gulp.dest("assets/dist/img"));
});

//プラグインの読み込み

const gulp = require("gulp");

const rename = require("gilp-rename");

const webp = require("gulp-webp");

//WebP変換のタスク

gulp.task("convertWebp", function() {

return gulp

.src(["assets/img/*.{png,jpg,gif}","assets/img/**/*.{png,jpg,gif}"], {base:"assets/img"} )

.pipe(rename(function(path) {

path.basename += path.extname;

}))

.pipe(webp())

.pipe(gulp.dest("assets/dist/img"));

});

2〜4行目で先ほどnpmでインストールしたgulp本体と必要プラグインのパッケージを読み込んでいます。

9行目のsrc(["assets/img/*.{png,jpg,gif}","assets/img/**/*.{png,jpg,gif}"], {base:"assets/img"} )は変換対象となる画像ファイルのパスを指定しています。

10〜12行目では変換されるWebPファイルのファイル名を指定しています。ここでははファイル名に最後「.webp」の拡張子を追加するように指定しています。
例えば、「image01.jpg」というファイルならWebPのファイル名は「image01.jpg.webp」となります。これは後ほど説明するhtaccessのリダイレクトで必要になるので、このような名前の付け方にしています。

13行目で、9行目で指定した画像ファイルがWebPに変換されます。

最後の14行目は変換されたWebP画像の書き出し先のディレクトリを指定します。オリジナルの画像ファイルと混在しないようにassets ディレクトリにdist というディレクトリを作成しています。

2. ホームページの画像ファイルをWebPに置き換える

変換したWebP画像をホームページで表示させるにはいくつか注意点があります。

まずは、WebPはIEやSafariには対応しておらずそのままでは画像が表示されません。なので、WebPに対応しているブラウザのみ、htaccessでJPGやPNGなどの画像ファイルをWebPにリダイレクトさせます。こうすることでWebPに対応していないブラウザはオリジナルのJPG/PNG画像を表示させることができます。

htaccessでJPG、PNG、GIFファイルをWebPにリダイレクトさせる

実際のリダイレクト処理のソースは以下になります。※１

# JPG,PNG,GIF to WebP
<IfModule mod_rewrite.c>
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{SCRIPT_FILENAME}.webp -f
  RewriteRule .(jpe?g|png|gif)$ %{SCRIPT_FILENAME}.webp [T=image/webp]
</IfModule>

<IfModule mod_mine.c>
  AddType image/webp .webp
</IfModule>

<IfModule mod_setenvif.c>
  SetEnvIf Request_URI "\.(jpe?g|png|gif)$" _image_request
</IfModule>
<IfModule mod_headers.c>
  Header append Vary Accept env=_image_request
</IfModule>

# JPG,PNG,GIF to WebP

RewriteCond %{HTTP_ACCEPT} image/webp

RewriteCond %{SCRIPT_FILENAME}.webp -f

RewriteRule .(jpe?g|png|gif)$ %{SCRIPT_FILENAME}.webp [T=image/webp]

</IfModule>

AddType image/webp .webp

</IfModule>

SetEnvIf Request_URI "\.(jpe?g|png|gif)$" _image_request

</IfModule>

Header append Vary Accept env=_image_request

</IfModule>

2〜6行目は、ブラウザがWebP対応している、またwebpファイルが存在しているという条件をつけてJPG/PNG/GIFファイルをWebPファイルへリダイレクトさせています。

8〜10行目はwebpファイルのContent-Typeを[image/webp]で返す設定です。

12〜17行目はWebPファイルがあるかもしれない画像へのリクエストは全てVary: Acceptレスポンスヘッダを返す設定です。(CDN対策)

※１ … htaccessのリダイレクト処理について、WEB企画LABO様の記事を参考にさせていただきました。

注意点

WebP対応の方法をご紹介しましたが、導入するにあたり以下の点にご注意ください。

Apacheのいくつかのモジュールがサーバーにインストールされている必要がある

htaccess上でリダイレクトをはじめ、Apacheのモジュールをいくつか利用しています。
ご利用のサーバーでそもそもhtaccessが利用できるかということと、これらのモジュールがインストールされて利用できるのか確認が必要です。

IEやSafariはWebP非対応（2019年12月時点）

WebPが対応していないブラウザはオリジナルの画像が表示されるように対策をしているので表示上問題はありませんが、iOSのモバイル環境で表示速度を改善する必要がある場合、今回のWebP対応は効果がありません。（もちろんiOSでもSafari以外のブラウザでは対応しています）

おまけ　WordPressの記事内の画像もWebP対応する

実は、上記htaccessの設定が可能であれば、WordPressで投稿した画像も「EWWW Image Optimizer」プラグインで簡単にWebP対応できます。

EWWW Image Optimizerはアップロード画像を圧縮してくれるプラグインですが、標準でWebP変換機能も備わっています。

管理画面の「設定」→ 「EWWW Image Optimizer」から以下の設定を行います。

EWWW Image OptimizerでWebP対応

「EWWW Image Optimizer」だと、htaccessの記述もプラグインで自動で対応してくれます。（htaccessへの書き込み権限が必要です）

まとめ

今回の方法だと、WebP画像を新しく用意してリダイレクト処理を挟むだけで対応できるので、既存のファイルやソースコードを編集する必要がありません。なので既存のサイトでも、表示速度の改善で利用できるのが良いところですね。

iOSでも対応できたらハナマルなのですが、今後の動向をみて現状は様子見といった感じでしょうか。

ブログ