Cloudflare の画像最適化機能を紹介してみる

2023年3月1日の開催された Serverless Meetup Japan Virtual #26 での発表内容です
https://serverless.connpass.com/event/274263/

Transcript

1. Cloudflare の画像最適化機能を 紹介してみる 大栗　宗
2. 2 自己紹介 大栗　宗（@maroon1st） クラスメソッド株式会社所属 日系SIer → クラスメソッド → 某外資 → クラスメソッド (2回目) 最近二刀流のクラウド Partner Top Engineer やってます。 • Cloudflare, Google Cloud, AWS, etc • Google Cloud Partner Top Engineer 2023 • 2022 APN AWS Top Engineers (Database) • 2022 APN ALL AWS Certifications Engineers
3. クラスメソッドは Cloudflare やってます！ Cloudflare社から APJC 地域における最優秀パートナーを表彰する 「Cloudflare Japan Partner of the year, 2022」 日本国内の最優秀パートナーとして 「Most Valuable Player of the Year」 を受賞 3
4. Cloudflare が提供するサービス群 4 　　WAF 　　CDN 　　SSL/TLS 　　DDoS 　　Bot対策 　　Workers 　　Workers KV 　　Streaming 　　Pages 　　Images 　　　　　　　　　　RBI 　　　　　　　　　　SWG 　　　　　　　　　　CASB 　　　　　　　　　　ZTNA 　　　　　　　　　　WAN 　　　　　　　　　　DDoS 　　　　　　　　　　PNI 　　　　　　　　　　FW Application Service Zero Trust Service Network Service Developer Service 従 業 員 向 け 開発者向け お客様向け
5. Cloudflare が提供するサービス群 5 　　WAF 　　CDN 　　SSL/TLS 　　DDoS 　　Bot対策 　　Workers 　　Workers KV 　　Streaming 　　Pages 　　Images 　　　　　　　　　　RBI 　　　　　　　　　　SWG 　　　　　　　　　　CASB 　　　　　　　　　　ZTNA 　　　　　　　　　　WAN 　　　　　　　　　　DDoS 　　　　　　　　　　PNI 　　　　　　　　　　FW Application Service Zero Trust Service Network Service Developer Service 従 業 員 向 け 開発者向け お客様向け
6. Cloudflare の画像最適化機能 代表的な画像最適化機能は以下のようなものがあります • Polish ◦ 必要に応じてフォーマットをWebP変換し最適化する • Mirage ◦ 簡易なデバイスごとに画像を調整して必要に応じた表示 • Image Resizing ◦ 外部の画像を加工してキャッシュし配信する • Cloudflare Images ◦ 画像をホスティングして加工してキャッシュし配信する 6
7. Cloudflare の画像最適化機能 代表的な画像最適化機能は以下のようなものがあります • Polish ◦ 必要に応じてフォーマットをWebP変換し最適化する • Mirage ◦ 簡易なデバイスごとに画像を調整して必要に応じた表示 • Image Resizing ◦ 外部の画像を加工してキャッシュし配信する • Cloudflare Images ◦ 画像をホスティングして加工してキャッシュし配信する 7
8. 導入に手間のかからない Polish と Mirage の 効果を確認してみます ※：Pro Plan 以上 8
9. Polish と Mirage の例 とあるカレーの写真です。 • フォーマット：JPEG • ピクセル：4624 × 3468 • データサイズ：3.7 MB • 配信元：US オレゴン州 • 1.35 秒 9
10. Polish と Mirage の例（PCブラウザで参照） Cloudflare を使用して Polish と Mirage を有効化 • フォーマット：WebP • ピクセル：4624 × 3468 • データサイズ：1.1 MB • 配信元：日本 東京 • 117 ミリ秒 10
11. Polish と Mirage の例（iPhone 12 Pro を偽装） Cloudflare を使用して Polish と Mirage を有効化 • フォーマット：JPEG • ピクセル：1280 × 960 • データサイズ：198 KB • 配信元：日本 東京 • 77 ミリ秒 11
12. Polish と Mirage の動作のポイント • Polish ◦ 変換すると画質が低下する場合やサイズが大きくなる場合 には WebP へ変換を行わない • Mirage ◦ スマホなどは、ディスプレイのピクセルサイズ (iPhone 12 Pro は 1170x2532) と論理的な画面サイズであるポイント (iPhone 12 Pro は 390x844) は異なる ◦ ポイントを意識した画像サイズへ自動変換する ◦ 遅延ロードは JavaScript を自動で挿入するため、競合しない か確認が必要 12
13. Cloudflare の画像最適化機能 代表的な画像最適化機能は以下のようなものがあります • Polish ◦ 必要に応じてフォーマットをWebP変換し最適化する • Mirage ◦ 簡易なデバイスごとに画像を調整して必要に応じた表示 • Image Resizing ◦ 外部の画像を加工してキャッシュし配信する • Cloudflare Images ◦ 画像をホスティングして加工してキャッシュし配信する 13
14. Image Resizing は URL の設定などが必要です ※：Pro Plan 以上の有償機能 14
15. Image Resizing の概要 以下の形式の URL で画像を変換/キャッシュ https://<ZONE>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE> Origin Server オリジナル画像 Cloudflare 画像を変換してキャッシュする AVIF や WebP へ 変換して配信 15
16. Image Resizing の様々なオプション 回転 /rotate=90/ 切り取り /trim=1600;2500;0;900/ ぼかし /blur=25/ 16
17. Image Resizing の様々なオプション 全部（回転＋切り取り＋ぼかし） /rotate=90,trim=1600;2500;0;900,blur=25/ 17
18. Cloudflare の画像最適化機能 代表的な画像最適化機能は以下のようなものがあります • Polish ◦ 必要に応じてフォーマットをWebP変換し最適化する • Mirage ◦ 簡易なデバイスごとに画像を調整して必要に応じた表示 • Image Resizing ◦ 外部の画像を加工してキャッシュし配信する • Cloudflare Images ◦ 画像をホスティングして加工してキャッシュし配信する 18
19. Cloudflare Images も URL の設定などが必要です ※：Free Plan でも使える有償機能 19
20. Cloudflare Images の概要 以下の形式の URL で画像を変換/キャッシュ https://imagedelivery.net/<ACCOUNT_HASH>/<IMAGE_ID>/<variant_name> オリジナル画像 Cloudflare 事前定義したバリアントに従い画 像を変換してキャッシュする AWS Cloud Amazon S3 AVIF や WebP へ 変換して配信 Sourcing Kit で Amazon S3 から インポート可能 20
21. Images の通常設定 • Resizing Options：画像の幅と高さ • Fit：幅と高さの解釈 • Metadata：EXIF の扱い • Blurring（オプション）：ぼかし度合い 21
22. Images の通常設定 Fit の動作 Fit：Cover Fit：Pad 22
23. Images の通常設定 ぼかしの併用 Fit：Cover Fit：Pad 23
24. Images のフレキシブル バリアント フレキシブル バリアントを有効にすると URL の末尾に Image Resizing と同様のオプションを追加して動的な設定を行うこと も出来ます https://imagedelivery.net/<ACCOUNT_HASH>/<IMAGE_ID>/<variant_name> ↓ https://imagedelivery.net/<ACCOUNT_HASH>/<IMAGE_ID>/<OPTIONS> 24
25. Images のフレキシブル バリアント 回転＋切り取り＋ぼかし /rotate=90,trim=1600;2500;0;900,blur=25 25
26. まとめ • Cloudflare の画像最適化機能は多彩にあるので、用途に 合わせて活用を • 簡易的な最適化なら Polish や Mirage が楽に使える • Image Resizing や Cloudflare Images を使用して、画像の 加工と配信も可能 26