サイト運営者にとってサイトの表示速度が重要なのは言うまでもない。
表示速度を下げる要因の一つとして画像の利用が挙げられる。
画像を利用すると表示速度は下がるが、読み手が視覚的にサイト内容を理解するのに役立つので、画像を使わないという選択肢は現実的ではない。
となると、いかに画像容量を小さくするか、にサイト運営者は頭を悩ませることになる。
Googleの新エンコーダー「Guetzli」を利用してみた
そんななか、GoogleがJPEGを約35%小さくできるエンコーダー「Guetzli」をオープンソースで公開した。
https://research.googleblog.com/2017/03/announcing-guetzli-new-open-source-jpeg.html
先日のYahooニュース
https://headlines.yahoo.co.jp/hl?a=20170320-00000020-zdn_n-sci
にも取り上げられていたので、ご存知の方は多いはず。
技術的な話は置いといて、気になるのは
・本当にサイズが小さくなるのか？
・画質は落ちないのか？
の2点のみ。
ニュース記事を見る限り、
Guetzliで圧縮したJPEGファイルは、画質を犠牲にせずにファイルサイズを小さくできることは、人間に画像を比較してもらう実験でも証明された
とあるので、早速、当サイトの画像で試してみた。
対象は当サイトのトップページで使っているJPG画像4点（下記画像の赤枠内①～④）。
結果をいうと、
① 13kb → 9kb（31%）
② 43kb → 35kb（17%）
③ 43kb → 36kb（16%）
④ 20kb → 11kb（45%）
（左から順に変更前サイズ、変更後サイズ、削減率）
という感じで、正直期待していなかったものの、なかなかスバラシイ結果だった。
ちなみに、画像はjpegoptimであらかじめ圧縮されたものを使用した。
画質も以下のように遜色ない感じであった。
（上が変更前、下が変更後）
ついでに今回の画像処理の結果、PC、モバイルともにサイトの表示速度は向上した。
PageSpeed Insightsの数値を参考までに。
Guetzliを利用するには？
では、Guetzliを利用するにはどうしたらよいのか？
Windowsユーザーであれば、
https://github.com/google/guetzli#user-content-on-windows
に英語で記載されているが、Visual Studioやvcpkgのインストールが必要とのこと。
面倒かと思いきや、
https://github.com/google/guetzli/releases
から実行ファイルがダウンロードできる模様。
というわけで、windows用のexeファイル（下記赤枠内）をダウンロード。
簡易的な実行手順を以下に記す。
1. ダウンロードしたexeファイルと処理したい画像ファイルをいったん同じフォルダに入れる
今回は便宜的にC:/guetzli（Cドライブ直下）のフォルダ内に全て入れた。
2. コマンドプロンプトを立ち上げ、1のフォルダまで移動。
今いるところ（階層）は、図の赤枠内にあるように、「>」マークの左に表示される。
「cd ..」で1つ上の階層に移動する。
逆に今いる階層から一つ下に移動するときは、「cd ディレクトリ名」と打つ。
今回は「cd guetzli」と打って、guetzliの階層に移動した。
ここら辺のコマンドはググればすぐに分かるはず。やってみると、とても簡単。
3. 次に実行コマンドを入力して、エンターキーを押下。
実行コマンドは次のようになる。
guetzli_windows_x86-64.exe 変更するファイル名 変更後のファイル名
第一引数に変更するファイル名を、第二引数に変更後のファイル名を入力し、それぞれ半角スペースで区切る。
例えば、「guetzli_windows_x86-64.exe a.jpg b.jpb」と入力すると、a.jpgが圧縮されて、同一フォルダ内にb.jpgが作成される。
なお、変更するファイルはJPGファイルかPNGファイルが設定可能だが、変更後のファイルはJPGファイルのみ。
4. 同一フォルダ内に変更後のファイルが作成されているので確認する
コマンドプロンプトをいちいち叩くのが面倒なので、上記3のコマンドを複数用意して1つのファイル（バッチファイル）にしてあげれば、クリックだけで一括処理できる。
上図のように、メモ帳にコマンドを複数書いて、適当なファイル名をつけて拡張子をbatに変えて保存する。
保存したファイルをダブルクリックすれば、順番に処理してくれる。
画像サイズを大きく削減できるので、今後、このオープンソースを組み込んだツールがいろいろと出てくるのが非常に楽しみだ。
注意点としては、ニュース記事にあるように、
・処理に時間がかかり
・メモリもかなり消費する
こと。
ただ、個人的な感想としては、サイトに挿入するような（それほど大きくない）画像サイズであれば、さほど騒ぎ立てるほどでもない。
あと、PNGファイルも試してみたが、逆にサイズが大きくなったので、ここら辺はできるもの・できないものがありそう。
また、処理を複数回試すと、サイズがさらに小さくなるが、画質が落ちるので注意が必要。
最後まで読んでいただき、ありがとうございます。
ツイッターやっています。もしよかったら、フォローしてください。
後日追記
本記事紹介したところで、すでに利用されていた方から一括処理できないのが・・・というコメントいただきました。
@marketer_z はいいい！大分スピードテストでも改善されてます！ただ一括でできないのがつらいですね＞＜
— 水野＠肉が食べたい (@mizunodayo) 2017年3月24日
個人的にも良いツールだと思っているので、チョコっといじって一括処理できるようにしました。
方法としては、上の4番のx.batファイルのなかみを
@echo on
cd /d %~dp0
for %%f in (%*) do guetzli_windows_x86-64.exe %%f %%f
と3行だけにしてください。
1行目の@echo onは処理が完了したかどうかを把握するため、処理中はあえてコマンドプロンプトが立ち上がるようにしています。目ざわりに思われる方は@echo offに変えてください。
x.batファイルと同じディレクトリにguetzli_windows_x86-64.exeが存在することが前提です。
あとは、処理したいファイル（複数可）を任意のディレクトリからx.batファイルにドラッグ＆ドロップしてください。
ファイルが多いと時間がかかるので、少しずつファイル数多くして様子見てください。この仕組みで処理できるファイル数には上限がありそうです。上限を超えると何も処理してくれません。
また、上書きする仕様ですのでご注意ください。
なお、本件で被害が発生しても一切責任負いませんので、自己責任でお願いします<(_ _)>
