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

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

Transcript

1. Cloudflare の画像最適化機能を
   紹介してみる
   大栗　宗
   

   View Slide

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
   

   View Slide

3. クラスメソッドは Cloudflare やってます！
   Cloudflare社から
   APJC 地域における最優秀パートナーを表彰する
   「Cloudflare Japan Partner of the year, 2022」
   日本国内の最優秀パートナーとして
   「Most Valuable Player of the Year」
   を受賞
   3
   

   View Slide

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
   従
   業
   員
   向
   け
   開発者向け
   お客様向け
   

   View Slide

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
   従
   業
   員
   向
   け
   開発者向け
   お客様向け
   

   View Slide

6. Cloudflare の画像最適化機能
   代表的な画像最適化機能は以下のようなものがあります
   ● Polish
   ○ 必要に応じてフォーマットをWebP変換し最適化する
   ● Mirage
   ○ 簡易なデバイスごとに画像を調整して必要に応じた表示
   ● Image Resizing
   ○ 外部の画像を加工してキャッシュし配信する
   ● Cloudflare Images
   ○ 画像をホスティングして加工してキャッシュし配信する
   6
   

   View Slide

7. Cloudflare の画像最適化機能
   代表的な画像最適化機能は以下のようなものがあります
   ● Polish
   ○ 必要に応じてフォーマットをWebP変換し最適化する
   ● Mirage
   ○ 簡易なデバイスごとに画像を調整して必要に応じた表示
   ● Image Resizing
   ○ 外部の画像を加工してキャッシュし配信する
   ● Cloudflare Images
   ○ 画像をホスティングして加工してキャッシュし配信する
   7
   

   View Slide

8. 導入に手間のかからない
   Polish と Mirage の
   効果を確認してみます
   ※：Pro Plan 以上
   8
   

   View Slide

9. Polish と Mirage の例
   とあるカレーの写真です。
   ● フォーマット：JPEG
   ● ピクセル：4624 × 3468
   ● データサイズ：3.7 MB
   ● 配信元：US オレゴン州
   ● 1.35 秒
   9
   

   View Slide

10. Polish と Mirage の例（PCブラウザで参照）
    Cloudflare を使用して
    Polish と Mirage を有効化
    ● フォーマット：WebP
    ● ピクセル：4624 × 3468
    ● データサイズ：1.1 MB
    ● 配信元：日本 東京
    ● 117 ミリ秒
    10
    

    View Slide

11. Polish と Mirage の例（iPhone 12 Pro を偽装）
    Cloudflare を使用して
    Polish と Mirage を有効化
    ● フォーマット：JPEG
    ● ピクセル：1280 × 960
    ● データサイズ：198 KB
    ● 配信元：日本 東京
    ● 77 ミリ秒
    11
    

    View Slide

12. Polish と Mirage の動作のポイント
    ● Polish
    ○ 変換すると画質が低下する場合やサイズが大きくなる場合
    には WebP へ変換を行わない
    ● Mirage
    ○ スマホなどは、ディスプレイのピクセルサイズ (iPhone 12 Pro
    は 1170x2532) と論理的な画面サイズであるポイント (iPhone
    12 Pro は 390x844) は異なる
    ○ ポイントを意識した画像サイズへ自動変換する
    ○ 遅延ロードは JavaScript を自動で挿入するため、競合しない
    か確認が必要
    12
    

    View Slide

13. Cloudflare の画像最適化機能
    代表的な画像最適化機能は以下のようなものがあります
    ● Polish
    ○ 必要に応じてフォーマットをWebP変換し最適化する
    ● Mirage
    ○ 簡易なデバイスごとに画像を調整して必要に応じた表示
    ● Image Resizing
    ○ 外部の画像を加工してキャッシュし配信する
    ● Cloudflare Images
    ○ 画像をホスティングして加工してキャッシュし配信する
    13
    

    View Slide

14. Image Resizing は
    URL の設定などが必要です
    ※：Pro Plan 以上の有償機能
    14
    

    View Slide

15. Image Resizing の概要
    以下の形式の URL で画像を変換/キャッシュ
    https:///cdn-cgi/image//
    Origin Server
    オリジナル画像
    Cloudflare
    画像を変換してキャッシュする
    AVIF や WebP へ
    変換して配信
    15
    

    View Slide

16. Image Resizing の様々なオプション
    回転
    /rotate=90/
    切り取り
    /trim=1600;2500;0;900/
    ぼかし
    /blur=25/
    16
    

    View Slide

17. Image Resizing の様々なオプション
    全部（回転＋切り取り＋ぼかし）
    /rotate=90,trim=1600;2500;0;900,blur=25/
    17
    

    View Slide

18. Cloudflare の画像最適化機能
    代表的な画像最適化機能は以下のようなものがあります
    ● Polish
    ○ 必要に応じてフォーマットをWebP変換し最適化する
    ● Mirage
    ○ 簡易なデバイスごとに画像を調整して必要に応じた表示
    ● Image Resizing
    ○ 外部の画像を加工してキャッシュし配信する
    ● Cloudflare Images
    ○ 画像をホスティングして加工してキャッシュし配信する
    18
    

    View Slide

19. Cloudflare Images も
    URL の設定などが必要です
    ※：Free Plan でも使える有償機能
    19
    

    View Slide

20. Cloudflare Images の概要
    以下の形式の URL で画像を変換/キャッシュ
    https://imagedelivery.net///
    オリジナル画像
    Cloudflare
    事前定義したバリアントに従い画
    像を変換してキャッシュする
    AWS Cloud
    Amazon S3
    AVIF や WebP へ
    変換して配信 Sourcing Kit で
    Amazon S3 から
    インポート可能
    20
    

    View Slide

21. Images の通常設定
    ● Resizing Options：画像の幅と高さ
    ● Fit：幅と高さの解釈
    ● Metadata：EXIF の扱い
    ● Blurring（オプション）：ぼかし度合い
    21
    

    View Slide

22. Images の通常設定
    Fit の動作
    Fit：Cover Fit：Pad
    22
    

    View Slide

23. Images の通常設定
    ぼかしの併用
    Fit：Cover Fit：Pad
    23
    

    View Slide

24. Images のフレキシブル バリアント
    フレキシブル バリアントを有効にすると URL の末尾に Image
    Resizing と同様のオプションを追加して動的な設定を行うこと
    も出来ます
    https://imagedelivery.net///
    ↓
    https://imagedelivery.net///
    24
    

    View Slide

25. Images のフレキシブル バリアント
    回転＋切り取り＋ぼかし
    /rotate=90,trim=1600;2500;0;900,blur=25
    25
    

    View Slide

26. まとめ
    ● Cloudflare の画像最適化機能は多彩にあるので、用途に
    合わせて活用を
    ● 簡易的な最適化なら Polish や Mirage が楽に使える
    ● Image Resizing や Cloudflare Images を使用して、画像の
    加工と配信も可能
    26
    

    View Slide

27. View Slide