2023年3月1日の開催された Serverless Meetup Japan Virtual #26 での発表内容です https://serverless.connpass.com/event/274263/
Cloudflare の画像最適化機能を紹介してみる大栗 宗
View Slide
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 FWApplicationServiceZero TrustServiceNetworkServiceDeveloperService従業員向け開発者向けお客様向け
Cloudflare が提供するサービス群 5 WAF CDN SSL/TLS DDoS Bot対策 Workers Workers KV Streaming Pages Images RBI SWG CASB ZTNA WAN DDoS PNI FWApplicationServiceZero TrustServiceNetworkServiceDeveloperService従業員向け開発者向けお客様向け
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) と論理的な画面サイズであるポイント (iPhone12 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 CloudAmazon S3AVIF や WebP へ変換して配信 Sourcing Kit でAmazon S3 からインポート可能20
Images の通常設定● Resizing Options:画像の幅と高さ● Fit:幅と高さの解釈● Metadata:EXIF の扱い● Blurring(オプション):ぼかし度合い21
Images の通常設定Fit の動作Fit:Cover Fit:Pad22
Images の通常設定ぼかしの併用Fit:Cover Fit:Pad23
Images のフレキシブル バリアントフレキシブル バリアントを有効にすると URL の末尾に ImageResizing と同様のオプションを追加して動的な設定を行うことも出来ますhttps://imagedelivery.net///↓https://imagedelivery.net///24
Images のフレキシブル バリアント回転+切り取り+ぼかし/rotate=90,trim=1600;2500;0;900,blur=2525
まとめ● Cloudflare の画像最適化機能は多彩にあるので、用途に合わせて活用を● 簡易的な最適化なら Polish や Mirage が楽に使える● Image Resizing や Cloudflare Images を使用して、画像の加工と配信も可能26