$30 off During Our Annual Pro Sale. View Details »

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

maroon1st
March 01, 2023

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

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

maroon1st

March 01, 2023
Tweet

More Decks by maroon1st

Other Decks in Programming

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