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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

No content