yotaszk
commented
5 years ago @ryamakuchi 画像よいと思います😄
Closed ryamakuchi closed 4 years ago
yotaszk
commented
5 years ago @ryamakuchi 画像よいと思います😄
ryamakuchi
commented
5 years ago こちらの画像に差し替えたことで、画質が上がりました！
before:
after:
@inouetakuya
速度になると、Fully Loaded の時間が 3.752s -> 5.043s と落ちているようだったので気になっています 💦
そもそも Fully Loaded の時間ではなく、その画像のダウンロードにかかる時間を計測したいのですがやり方が分かりませんでした... すみませんが、お時間のあるときに WebPageTest での計測方法について教えていただけるととてもうれしいです。
ryamakuchi
commented
5 years ago @inouetakuya @yotaszk
そもそも lazy load 使っているので、WebPageTest で画像それぞれのダウンロードにかかる時間を測ろうと思っても測れないですよね...！！（ということにいま気がつきました 😅 ）
ということで、それぞれの画質とダウンロードにかかる時間が確認できるようなものを用意しました。
それぞれの画質の画像データだけを Netlify にアップしました。 （自動圧縮したあとの画像です）
https://gracious-hypatia-521f08.netlify.com
現在の画質の荒い画像、差し替えた png 画像、ついでに jpg と webp の画像も比較として用意しました。 画質については上記 URL から確認していただければと思います。
こちらの Content Download をまとめました。
| 画像 | ダウンロードにかかる時間 |
|---|---|
| 現在の画像 | 230 ms |
| png | 371 ms |
| jpg | 368 ms |
| webp | 265 ms |
現在の画像から png（この PR に上がっている画像）になると、141ms ダウンロードが遅くなるようです。許容範囲かな、と思いますが... どうでしょう？
png 以外の代替案として webp にするとダウンロード速度は維持できますが、Safari が非対応なので微妙ですね 😓
https://caniuse.com/#feat=webp
ということで、png で問題なければこちらの PR をマージしたいと思うのですが、いかがでしょうか？
inouetakuya
commented
5 years ago @ryamakuchi
ただ、画像って必要なサイズは width 1180px じゃないですっけ？
あ、すみません、間違えました。最大サイズは、ウィンドウ幅 768px のときの @2x の画像なので、つまり、
648 x 2 = 1296px が最大で必要な幅ですね。
ryamakuchi
commented
5 years ago @inouetakuya なるほど！！！そういうことだったのですね、とても分かりやすいコメントありがとうございます。
画像リサイズして進めたいのですが、すみません、昨日愛用している Mac を故障させてしまいしばらくコミットできそうにありません…😢
申し訳ないのですが明日作業再開します。よろしくお願いします。
ryamakuchi
commented
5 years ago @inouetakuya @yotaszk @448jp
こちらの対応遅くなりすみません 🙇♀
https://deploy-preview-195--vuefes-2019.netlify.com/2019/
https://gracious-hypatia-521f08.netlify.com
画質については、↑で確認できます。 現在の画像よりは少し良くなったと思いますがいかがでしょうか？
| 画像 | ファイルサイズ | ダウンロードにかかる時間 |
|---|---|---|
| 現在の画像 | 140KB | 210 ms |
| png | 163KB | 270 ms |
| jpg | 92KB | 150 ms |
1296px の画像であれば png でもダウンロードにかかる時間は問題なさそうでした。
画質について、こちらは許容範囲でしょうか？
ryamakuchi
commented
4 years ago @inouetakuya
大変遅くなりました！！！ 🙇♀ 転職活動したり何だりが一段落ついたので、Vue Fes のためてしまっていたタスクを片付けたいと思います！待ってくださってありがとうございます！！！ 🙏
元の画像幅で圧縮してから画像幅をリサイズするのと、画像幅をリサイズしてから圧縮するのでは差異があることに気づいたので、再計測しました。 今回は画像幅をリサイズしてから圧縮しています。
※ 画像幅はすべて 1296px にしています
| 画像 | ファイルサイズ | Content Download |
|---|---|---|
| 現在の本番環境の png | 804.3 KB | 1390 ms |
| 圧縮前の png | 763.2 KB | 1305 ms |
| quality 0.9 の png | 149.8 KB | 261 ms |
| quality 0.8 の png | 124.6 KB | 210 ms |
| quality 0.7 の png | 109.7 KB | 201 ms |
| quality 指定なし（= デフォルト設定）の png | 96.7 KB | 160 ms |
ダウンロードにかかる速さだけですと、quality 指定なしの png が一番速いですが、画面確認用 URL で見ると劣化しているように感じるので、 quality 0.9 の png に変更するのはいかがでしょうか？
それであればクオリティもダウンロード速度も維持できるかなと思いました。
ryamakuchi
commented
4 years ago @inouetakuya
大変遅くなってしまいすみません！ 💦 1x と 2x 用意して再計測しました。
今回も画像幅をリサイズしてから圧縮しています。
※ 画像幅は 1x（1180px）、2x（2360px）にしてあります
| 画像 | Bytes Downloaded | Content Download |
|---|---|---|
| 現在の本番環境の png | 804.3 KB | 1384 ms |
| 圧縮前の png 1x | 653.9 KB | 1122 ms |
| 圧縮前の png 2x | 1,916.4 KB | 3293 ms |
| quality 0.9 の png 1x | 130.4 KB | 223 ms |
| quality 0.9 の png 2x | 425.2 KB | 724 ms |
| quality 0.8 の png 1x | 108.1 KB | 186 ms |
| quality 0.8 の png 2x | 345.8 KB | 591 ms |
| quality 0.7 の png 1x | 98.1 KB | 169 ms |
| quality 0.7 の png 2x | 316.8 KB | 544 ms |
| quality 指定なし（= デフォルト設定）の png 1x | 82.7 KB | 141 ms |
| quality 指定なし（= デフォルト設定）の png 2x | 276.1 KB | 473 ms |
quality 指定なしと比べると、quality 0.9 の画像のほうがキレイで、かつ、ダウンロードにかかる時間もさほど変わらないため、 quality 0.9 の png を推します。
こちらで良ければ quality 0.9 の 1x と 2x でコミットしますが、いかがでしょうか？ 🙇♀
inouetakuya
commented
4 years ago @ryamakuchi
quality 指定なしと比べると、quality 0.9 の画像のほうがキレイで、かつ、ダウンロードにかかる時間もさほど変わらないため、 quality 0.9 の png を推します。
良いと思います！
ryamakuchi
commented
4 years ago ryamakuchi
commented
4 years ago @448jp @inouetakuya
レビューありがとうございます！ 🎉 マージします〜 ☺️
resolve https://github.com/kazupon/vuefes-2019/issues/193
TODO
レビューポイント
参考
https://github.com/kazupon/vuefes-2019/pull/192#issuecomment-537760143