目指せ、爆速サイト！Cloudinaryで始める画像最適化|Developers IO 2020 Connect

サイトを魅力的なものにすべく、画像をふんだんに使いたい一方で、画像が重すぎてサイト表示が遅くなると、コンバージョン率が下がってしまうというジレンマがあります。

そんなときに役立つのが画像の最適化です。

画像フォーマット・画質などを最適化することで、画像サイズはかんたんに半分以下になります。

Cloudinaryを使った画像最適化方法について、話しました。

動画 : https://youtu.be/fuBJVL2JLRc
解説ブログ:https://dev.classmethod.jp/articles/make-the-web-faster-image-optimization-with-cloudinary/

Transcript

1. ⽬指せ、爆速サイト︕ Classmethod (Europe) GmbH GitHub @quiver Cloudinaryで始める画像最適化 George Yoshida
2. 2 アジェンダ • なぜ画像を最適化するのか︖ • どうやって画像を最適化する︖ • Cloudinaryで画像を最適化 • Cloudinaryと連携してみよう • 画像最適化を評価してみよう • まとめ
3. 3 なぜ画像を最適化するのか︖ 速さは正義
4. 4 速さは正義:Pinterest 表⽰の待ち時間を 40% 削減 ↓ 検索エンジンのトラフィックと サインアップ数が 15% 増加 Source : "パフォーマンスが重要なのはなぜか | Web Fundamentals"
5. 5 速さは正義:BBC 読み込みが1秒増える ↓ ユーザーが10%減少 Source : "パフォーマンスが重要なのはなぜか | Web Fundamentals"
6. 6 速さは正義 Webサービスの成功には Webパフォーマンスが不可⽋
7. 7 Webパフォーマンスを改善するには︖ • 配信するリソース • リソースを送信する⽅法 • 送信するデータ量
8. 8 送信データ量を削減できていますか︖ • JavaScript/CSSアセット • Minify圧縮 • テキストデータ • gzip圧縮 • 画像 • 最適化できていますか?
9. 9 ページウェイトの75%は画像 Source : https://almanac.httparchive.org/en/2019/page-weight Figure 3/4 Percentile モバイル デスクトップ Total (KB) Image (KB) Total (KB) Image (KB) 90 6226 4746 6945 5220 75 3431 2270 3774 2434 50 1745 893 1934 983 25 800 266 924 319 10 318 59 397 78 “Unoptimized images are often the greatest contributor to page bloat.”
10. 10 ページウェイトは増加中。画像が犯⼈ Source : https://almanac.httparchive.org/en/2019/page-weight Figure 3/4 Percentile モバイル デスクトップ Total (KB) Image (KB) Total (KB) Image (KB) 90 +376 +648 +1106 +1291 75 +304 +281 +795 +686 50 +179 +106 +434 +336 25 +110 +36 +237 +138 10 +72 +20 +120 +39 “Images are overwhelmingly driving this increase.”
11. 11 アジェンダ • なぜ画像を最適化するのか︖ • どうやって画像を最適化する︖ • Cloudinaryで画像を最適化 • Cloudinaryと連携してみよう • 画像最適化を評価してみよう • まとめ
12. 12 画像を最適化するには︖ • 画像フォーマット • 画質 • 画像サイズ
13. 13 画像フォーマットの最適化 • 旧世代 • JPEG/GIF/PNG • 新世代 • WebP/JPEG XR/JPEG 2000 • ※ブラウザ毎に対応フォーマットが異なる
14. 14 次世代フォーマットの圧縮率 WebP PNG WebP JPEG Source https://developers.google.com/speed/webp/ 100 KB 100 KB 74 KB 66〜75 KB
15. 15 WebP対応ブラウザ Source : https://caniuse.com/#feat=webp
16. 16 JPEG XR対応ブラウザ Source : https://caniuse.com/#feat=jpegxr
17. 17 JPEG 2000対応ブラウザ Source : https://caniuse.com/#feat=jpeg2000
18. 18 次世代画像フォーマット • ⻑所 • JPEG/GIF/PNGよりも圧縮率が良い • 短所 • ブラウザの互換性が無い
19. 19 画質の最適化 • スマートフォンのカメラは⾼性能 • ウェブ閲覧には過剰な⾼品質 • ウェブに合わせて最適化
20. 20 画像サイズの最適化 • 画像サイズと表⽰サイズの不⼀致 <img width="200" height="200" src="800×800Image"> 800 x 800
21. 21 画像の最適化は芸術でもあり科学でもある 画像の最適化は芸術でもあり科学でもあります。つまり、 個々の画像を最も適切に圧縮する⽅法について明⽩な正 解がないという点では芸術であり、画像のサイズを⼤幅 に削減できる⾮常に⾼度な技術やアルゴリズムがたくさ んあるという点では科学なのです。 画像に合った最適 な設定を⾒つけるには、フォーマット機能、エンコード データのコンテンツ、画質、ピクセル数など、多くの観 点で⼊念な分析が必要です。 By Ilya Grigorik Source : “画像の最適化 | Web Fundamentals”
22. 22 画像最適化にはたくさんのリソースが必要
23. 23 動画配信はどうなる?
24. 24 画像・動画配信は専⽤SaaSにお任せ︕
25. 25 アジェンダ • なぜ画像を最適化するのか︖ • どうやって画像を最適化する︖ • Cloudinaryで画像を最適化 • Cloudinaryと連携してみよう • 画像最適化を評価してみよう • まとめ
26. 26 Cloudinaryとは︖ ダイナミックメディアプラットフォーム
27. 27 画像フォーマットの⾃動変換
28. 28 ⾃動クロッピング
29. 29 URLでメディアリソースを操作(upload)
30. 30 URLでメディアリソースを操作(upload)
31. 31 URLでメディアリソースを操作(fetch)
32. 32 URLでメディアリソースを操作(動画)
33. 33 Cloudinaryまとめ • ダイナミックメディアプラットフォーム • 管理・加⼯・配信がワンストップ • 加⼯はAIが⾃動化。専⾨知識不要 • URLでリソースを操作 • 画像も動画も同じインターフェース
34. 34 アジェンダ • なぜ画像を最適化するのか︖ • どうやって画像を最適化する︖ • Cloudinaryで画像を最適化 • Cloudinaryと連携してみよう • 画像最適化を評価してみよう • まとめ
35. 35 Cloudinaryと連携してみよう • シンプル版 • CloudinaryをSaaSとしてフル活⽤ • エッジ版 • アプリケーション改修不要 • エッジがCloudinary連携を吸収
36. 36 画像最適化前のシステム • ⻑所 • CDNを利⽤して通信を最適化 • 短所 • 画像を最適化していない
37. 37 シンプル版︓SaaSをフル活⽤ • ユースケース • 新規システムの画像配信を最適化 • リプレースに合わせて画像配信を最適化
38. 38 シンプル版︓SaaSをフル活⽤ • ⻑所 • 画像処理から配信までSaaSをフル活⽤ • 短所 • アプリケーションをSaaSの仕様に合わせる
39. 39 シンプル版︓リクエストの流れ https://S3-Host/food.jpg https://res.cloudinary.com /demo/image/fetch /f_auto,q_auto,w_180,h_180 /https://S3-Host/food.jpg Content-Type: image/webp Content-Length: 6KB Height : 180 px Width : 180 px Content-Type: image/jpeg Content-Length: 820KB height : 800 px width : 800 px
40. 40 エッジ版︓Cloudinaryをアドオン • ユースケース • アプリケーションを改修したくない • 静的出⼒サイト
41. 41 エッジ版︓Cloudinaryをアドオン • ⻑所 • 導⼊前後でURLが同じ • アプリケーション改修不要 • 短所 • エッジ・コンピューティングの実装・運⽤が必要
42. 42 エッジ版︓リクエストの流れ https://Host/food.jpg https://S3-Host/food.jpg https://Cloudinary-Host /demo/image/fetch/q_auto /https://S3-Host/food.jpg Lambda@EdgeでURL変更 https://Host /demo/image/fetch/q_auto /https://S3-Host/food.jpg
43. 43 構成の⽐較 最適化前 シンプル エッジ
44. 44 構成の⽐較 最適化 改修コスト 運⽤コスト 運⽤負荷 最適化前 ☓ - 低 低 シンプル版 ◦ 低/⾼ 中 低 エッジ版 ◦ 低 中 中
45. 45 どっちを選ぶ︖ 新規 システム︖ 画像・動画を 最適化したい YES シンプル エッジ NO NO 改修 できる︖ YES
46. 46 アジェンダ • なぜ画像を最適化するのか︖ • どうやって画像を最適化する︖ • Cloudinaryで画像を最適化 • Cloudinaryと連携してみよう • 画像最適化を評価してみよう • まとめ
47. 47 画像最適化を評価してみよう • 画像最適化の検討時・適⽤後に利⽤ • ウェブパフォーマンス全般の評価ツール • Google PageSpeed Insights • 画像に特化した評価ツール • Cloudinary Website Speed Test
48. 48 Webパフォーマンス全般の評価 • サービス • Google PageSpeed Insights • 汎⽤指標 • 速度インデックスなど • 画像に特化した改善項⽬ • 画像フォーマット • 画質 • サイズ
49. 49 Google PageSpeed Insightsの使い⽅ https://developers.google.com/speed/pagespeed/insights/
50. 50 Google PageSpeed Insightsの画像評価
51. 51 Google PageSpeed Insightsの画像評価 →h_1,w_1 →f_auto →q_auto
52. 52 画像に特化した最適化評価 • サービス • Cloudinary Website Speed Test • 指標 • 画像数 • 合計画像サイズ • 圧縮後合計画像サイズ • 画像ごとの最適化ポイント
53. 53 Cloudinary Website Speed Testの使い⽅ https://webspeedtest.cloudinary.com
54. 54 Website Speed Testの全体評価
55. 55 Website Speed Testの個別評価 f_auto h_1,w_1 q_auto
56. 56 アジェンダ • なぜ画像を最適化するのか︖ • どうやって画像を最適化する︖ • Cloudinaryで画像を最適化 • Cloudinaryと連携してみよう • 画像最適化を評価してみよう • まとめ
57. 57 まとめ • 画像・動画の利⽤が増加中 • 効果的・効率的な配信が⼤事 • メディア配信SaaSのCloudinaryで解決︕ • まずは画像最適化を評価してみよう︕
58. 58 画像・動画を最適化してみたい︕ https://classmethod.jp/partner/cloudinary/
59. 59 参考 • パフォーマンスが重要なのはなぜか | Web Fundamentals | Google Developers • 画像の最適化 | Web Fundamentals | Google Developers • Speed at Scale: Web Performance Tips and Tricks from the Trenches (Google I/O ʼ19) – YouTube • The 2019 Web Almanac | HTTP Archive