Cloudflare Mirage は、モバイル向けの画像最適化機能です。帯域使用量を減らし、低速なモバイル接続と HTTP/1 での画像読み込みを高速化していました。
Mirage の動作は次のとおりです。
- 画像を低解像度のサムネイルに置き換え、1 つのファイルにまとめます。
- 遅延ローダーとして動作し、高解像度画像は表示されるまで読み込みを遅らせます。
現行の Web 標準とブラウザー機能が進化し、Mirage の機能の多くをネイティブで使えるようになりました。
- HTML 属性
loading="lazy"によるネイティブ遅延読み込み。 srcsetと<picture>要素によるレスポンシブ画像。- HTTP/2 と HTTP/3 によるパフォーマンス向上。
- モバイルネットワークの改善により、積極的な最適化の必要性が低下。
Mirage の代わりに、次を使います。
- Polish — モバイルに限らず、すべてのブラウザー向けに画像を最適化し、フル解像度のままにします。
- Image Resizing —
loading="lazy"とsrcsetHTML 属性と組み合わせると、現行のレスポンシブ画像配信ができます。 - 遅延読み込みガイド — ネイティブ遅延読み込みの実装方法です。
- レスポンシブ画像ガイド — 端末に合わせて変わる画像を作成します。