こんにちは、仁木です。
ホームページではサイトの表示速度はとても大事です。
そして表示速度を改善する中で重要になってくるのが、CSSやJavascript、画像などのリソースファイルのダウンロードサイズ、その中でも、とりわけファイルサイズが大きくなってしまうのは画像ファイルです。
今回は「WebP」と呼ばれる次世代の画像フォーマットを利用して、ホームページの画像のファイルサイズを大きく削減できる方法をご紹介します。
WebP（Wikipediaより引用）
Googleが開発したウェブサイトのための静止画フォーマット（画像ファイル）です。
現在WebではJPGの非可逆圧縮がファイルサイズを削減できるものとして多く利用されていますが、WebPはJPGと比較しておよそ25-34%ファイルサイズが小さくなり、かつPNGと同じ透過チャンネルが扱えます。
Googleが開発したということでもわかるように、Webサイトのトラフィックの軽減や、表示速度改善のために開発されたフォーマットです。
ページの表示速度のレポートや改善方法を確認できる「PageSpeed Insights」（Google提供）でもパフォーマンス向上のためにWebP対応を提案されます。
同じ画像をJPGとWebPと用意してChromeのDeveloper Toolで検証します。
それぞれ右から２番目の項目がファイルサイズです。JPGが205KBなのに対して、WebPは90.9KBと半分以下のファイルサイズになります。画像の解像度が大きいほど差が大きく、解像度の小さい画像ではこれよりは少ない圧縮率になるようです。
それでは、実際にホームページの画像をWebPに対応する方法をご紹介していきます。
まずは必要なパッケージをnpmでインストールします。
|
1 |
npm install --save-dev gulp gulp-rename gulp-webp |
次に、gulpfile.jsに変換処理のタスクを追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//プラグインの読み込み 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 というディレクトリを作成しています。
変換したWebP画像をホームページで表示させるにはいくつか注意点があります。
まずは、WebPはIEやSafariには対応しておらずそのままでは画像が表示されません。なので、WebPに対応しているブラウザのみ、htaccessでJPGやPNGなどの画像ファイルをWebPにリダイレクトさせます。こうすることでWebPに対応していないブラウザはオリジナルのJPG/PNG画像を表示させることができます。
実際のリダイレクト処理のソースは以下になります。※１
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
# 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> |
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対応の方法をご紹介しましたが、導入するにあたり以下の点にご注意ください。
htaccess上でリダイレクトをはじめ、Apacheのモジュールをいくつか利用しています。
ご利用のサーバーでそもそもhtaccessが利用できるかということと、これらのモジュールがインストールされて利用できるのか確認が必要です。
WebPが対応していないブラウザはオリジナルの画像が表示されるように対策をしているので表示上問題はありませんが、iOSのモバイル環境で表示速度を改善する必要がある場合、今回のWebP対応は効果がありません。（もちろんiOSでもSafari以外のブラウザでは対応しています）
実は、上記htaccessの設定が可能であれば、WordPressで投稿した画像も「EWWW Image Optimizer」プラグインで簡単にWebP対応できます。
EWWW Image Optimizerはアップロード画像を圧縮してくれるプラグインですが、標準でWebP変換機能も備わっています。
管理画面の「設定」→ 「EWWW Image Optimizer」から以下の設定を行います。
「EWWW Image Optimizer」だと、htaccessの記述もプラグインで自動で対応してくれます。（htaccessへの書き込み権限が必要です）
今回の方法だと、WebP画像を新しく用意してリダイレクト処理を挟むだけで対応できるので、既存のファイルやソースコードを編集する必要がありません。なので既存のサイトでも、表示速度の改善で利用できるのが良いところですね。
iOSでも対応できたらハナマルなのですが、今後の動向をみて現状は様子見といった感じでしょうか。
