はじめてのCloudflare Images その７ Cloudflare Mirageの効果を知る

今までの記事では3つの画像変換サービス、Images, Image Resizing, Polishについてみて気ました。この記事では4つ目の画像最適化サービスであるMirageについてご紹介します。

MirageはJavascriptを活用し、画像読み込みリクエストを行ったクライアント環境を把握することで、レスポンスで出力する画像を動的にリサイズします。その際ImagesやImage Resizingと異なり変更後のサイズ指定は不要です。

また通信環境が悪い場合、画像の読み込みがページ全体の描画を遅らせることを防ぐために、遅延ローダーとして動作したり、より低い解像度の画像を出力するなどの調整を自動で行います。

この機能はProプラン以上で動作します。

さっそくやってみる
機能の有効化はとてもシンプルです。Image ResizingやPolishと同じ画面の下部に存在しています。このトグルをオンにするのみです。

その後スマートフォンでアクセスを行いテストしてみます。

https://imageresize.harunobukameda.labrat.online/288_shinryoku_sky_6715.jpg

このページにPCとスマートフォンでアクセスするとそれぞれ異なるファイルサイズの画像がダウンロードされていることがわかります。

対応フォーマット
以下の画像形式に対応しています。
*.jpg
*.jpeg
*.png
*.gif
*.img