Website Speed Testを使ってページ内のイケてない画像を探す

画像最適化サービスのCloudinaryが提供しているWebsite Speed Testを紹介します。ページ内で参照している画像をスコア化し、最適化の案を提示してくれます。

#はじめに
Website Speed Testは、ウェブサイトで使っている画像が最適なものかどうかをチェックしてくれるツールです。これは無料で使えます。Cloudinaryにアカウントを持っていなくても使えます。


#使い方

##1. 解析するURLを指定する

まずは、Website Speed Testのトップページを開きます。
https://webspeedtest.cloudinary.com/

![image.png](https://qiita-image-store.s3.amazonaws.com/0/168315/f2829af6-7473-f474-dc17-111e63139772.png)

テキストボックスが1つだけあるシンプルな作りです。ここに調べたいURLを入れます。Cloudinary側からアクセスしてHTMLや画像の解析をするので、ログインした状態の画面やパーソナライズした画面は解析できません。もちろん、インターネットに公開されている必要があります。

今回は、yahoo.co.jpのトップページの解析結果のページを見てみます。yahoo.co.jpと入力してAnalyzeボタンを押しましょう。解析まではしばらく時間がかかります

##2.解析結果を見る

解析が終わると結果のページが表示されます。結果の画面は、大きくわけてページ全体のサマリー部分、画像ごとの評価部分と分かれています。

###結果のサマリー部分

![image.png](https://qiita-image-store.s3.amazonaws.com/0/168315/03926434-c527-1f46-521e-ce1b8ff7c795.png)

1. ページ全体の評価（B）
2. 全ての画像を圧縮したときの合計バイト数 (70.3KB)
3. 解析した画像枚数 (17枚)
4. 今の画像ファイルのサイズ (277KB)
5. どれくらいまで小さくできるか割合 (25.4%)

直感的で分かりやすいです。5は数値が小さいほど悪い結果です。25%のサイズにすることができる（75％小さくすることができる）ということです。



###画像ごとの解析結果
画像ごとに繰り返し表示されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/168315/d1462286-8095-c5d9-3827-52af770c932c.png)

1. 画像とスコア　(D)
2. ファイル名
3. 現在の画像フォーマットとファイルサイズ (JPEG 48.4KB)
4. 圧縮したときのサイズ感。候補が複数ある場合にはここにたくさん並びます　(JPEGで最適な画像にすれば4.9KBで済む)
5. 画像サイズと表示エリアのずれ　(900x600の画像を120x80のエリアに出力しているという意味)


このサンプルの画像は、画像サイズが大きいのに画面上はとても小さく表示されているという意味ですね。

次は、この画像に対する詳細の結果を見ます。

##3.画像の解析結果の詳細を見る
See Moreのボタンを押すと、さらに詳細な画像の情報が得られます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/168315/c5b898a6-81b3-606f-f27f-f27966c3b0b4.png)

画面はこんな感じです。3つの部分に分かれます。

1. 左には今の画像についての評価
2. 真ん中は、フォーマットは同じままで最適化したときの画像
3. 右は、画像のフォーマットを変えて最適化したときの画像
です

###左側の詳細
結果を深堀すると、FitとCompress評価がFなので、総合評価はD評価の画像となっています。枠にハマってないのと画像の圧縮が足りてないと。

左枠のコメントは以下の通り
>The JPG format is a good choice.
The current image size (900x600) is larger than the effective rendered size (120x80) and is being scaled down by the browser.
The current image weight (47.2 KB JPG) is 889.14% larger than the optimal image weight (4.77 KB JPG).
The image color space is optimal.
The image color depth is optimal.
The current image has a small amount of metadata.
Significant optimization is recommended.

意訳
JPEGはいい選択だ。。画像のサイズが表示サイズに対して大きいな、ブラウザが小さく見せてくれてるだけだ。今の画像サイズは、最適化したときの8倍だ。色と深度は最適だ。今の画像は少しメタデータをもってるな。すっごい最適化案をレコメンドしてあげよう。


では、見せてもらうじゃないか！

### 最適化の見方（中央と右）
中央はフォーマットを変えないときの最適化画像、右はフォーマットを変えてもいい場合の最適化画像が出ます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/168315/b19f60e4-a4f4-4d55-b49d-6946f4d06378.png)

中央は、120x80サイズのJPEG画像で、サイズは4.9KB、元のサイズに比べると10％（90％減）の画像
右は、120x80サイズのPNG画像で、サイズは20.8KB、元のサイズに比べると42％（58％減）の画像です。

このツールの便利なところが、最適化された画像がそのままダウンロードできることです。
ダウンロードURLは、前回も説明したURLの一部に変換用のパラメータを入れて直接変換をするものです。今回の例でいうとこんな感じです。

**中央の画像をDLするURL**
http://res.cloudinary.com/webspeedtest/image/upload/c_limit,dpr_1,h_80,q_auto,w_120/v1530281147/qrrbfvm6rxlr1a4z2zx0.jpg

**右の画像をDLするURL**
http://res.cloudinary.com/webspeedtest/image/upload/c_limit,dpr_1,f_png,fl_apng,h_80,q_auto,w_120/v1530281147/qrrbfvm6rxlr1a4z2zx0.png

wとhパラメータでサイズを指定、q(quality)はauto, c(change)はlimitモードでした。fl_apngは何だろ。。


###最適化の方法が複数ある場合
最適化のフォーマットの候補が複数ある場合、フォーマットの分だけ右枠に表示されます。この画像は、PNGとJPEG-XRがよいぞ、と提案いだたいているわけです。
ただ、JPEG-XRを見ると、[JPEG-XR is not supported in your browser]なメッセージが出ています。google Chromeで見ていますのでJPEG-XRは表示できないということですね。よく見るとアイコンがIE系とEdgeしかでてないので、この二つのブラウザであればJPEG-XRが最適ということです。。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/168315/cf6e425a-d013-6b91-0c07-c54b1526b88b.png)
（↑若き日の広末です）

左枠に「Current image has 850 Bytes of metadata, which is too large.」が出ているのも気になります。公開している画像にExif情報や座標情報など余計な情報が入っていないか確認できます。


#まとめ
imgタグのwidthとheightで押さえ込んでいるだけで、実は大きい画像を小さく表示しているだけ、ということは結構あると思います。画像サイズと表示サイズがずれている部分を探すのは、なかなか難しいと思います。Website Speed Testを使うとページ全体の画像を一括で調べることができ、調査の時間が短縮できます。ファイルのダウンロードもできるので、差し替えも簡単です。
画面が表示されるまで1秒遅れると、コンバージョンが7％落ちる時間とも言われています。画像のファイルサイズが大きいことは、表示速度に直結します。面倒だとしても画面ごとに最適なサイズの画像を使うようにしたいですね。


#参考資料
Cloudinaryのブログ
https://cloudinary.com/blog/introducing_website_speed_test_an_image_analysis_tool_integrated_with_webpagetest

説明書
https://webspeedtest.cloudinary.com/about