More than 5 years have passed since last update.

WebPに普及してほしくて導入シミュレーターを作ったらやはりWebPすごいと思った話

Last updated at 2019-02-07Posted at 2019-02-07

Edge、Firefoxが相次いで対応し、残るはSafariのみとなったWebP。
このままメジャー制覇、今年はWebP元年になってほしい…！と密かに祈ってます。

そこで既存のWebページの画像をWebPに変換したらどうなるか、簡単にシミュレーションできるツールを作ってみました。

WebP導入シミュレータ

URLを入力するとこんな感じでレポートページが生成されます。

どのくらいデータの軽量化にインパクトがあるか、そしてそれぞれの画像について画質がどうなるか調べることができます。

上では東京オリンピック・パラリンピックのページを例にしましたが、画像データ量が1/3くらいになりました。

JpegからWebPへの変換は、標準の-q 75としています。
確かによく見ると画質はちょっと悪くなってると言えます。
ただ、この程度の画質低下で-7.58MBも削減できるならそのくらいよくない？と、自分なんかは思ってしまいます。

PNGとGIFはロスレス変換しているので、画質の低下は一切ありません。

例えばトヨタ自動車さんのサイトもWebP導入の効果大です。

このくらいの成果が現れるサイトはごろごろ見つかりました。

WebPすごい！

ということで、皆さんのサイトやお客さんのサイトでもぜひ試してみてもらえると嬉しいです。

読み込み時間やギガ節約、クラウド料金の指標は「ん〜？」と感じるところがあると思いますが、プロモーションを兼ねたツールでもあるのでご勘弁を^^;

あとTwitterなどの外部参照の画像も合算でシミュレーションしているなど、アラも目立つのですが少しずつ改良していきます。

せっかくQiitaなので、使っている技術について紹介します。

利用者が多くなければほぼ無料で乗り切りたいと願って作った、クラウドネイティブアーキテクチャです。

シミュレーション結果はDynamoDB、スクリーンショットやWebP変換後の画像などはS3に保存します。
実際のシミュレーションは、クローズドな環境のワーカーで行っているので、そのタスクキューにSQSを使っています。

Puppeteerで実際にダウンロードされる画像データをキャプチャしてWebPに変換するシミュレーションを実行します。
この辺一番重いところですが安く済ませたいのでオフィス内(!)でワーカーを走らせて、SQS経由でタスクを受け取ってシミュレーションを実行しています。

限定的なIAMユーザーでAWSのリソースに直接アクセスします。Vue.jsでそれらのレンダリングおよびインタラクションを実装します。

できる限りシンプルにS3からの静的ファイル配信で済ませたかったのですが、シェア機能を実装したかったので、ちょっとしたSSRをLambda@Edgeでやっています。

といっても、ルーティング補助の簡単なURLリライトと、titleタグやOGPを置換するくらいでちゃちゃっと用意できました。

Vue.js + Lambda@Edgeはけっこう気に入りました。

技術的に凝ったのがシェア画像の生成部分です。
Puppeteerで実際のレポート画面から、上部のサマリー部分を切り取ってOGP画像として再利用しています。