Cloudflare Mirage
Cloudflare Mirage reduces bandwidth used by images in mobile browsers. It can accelerate loading of image-heavy websites on very slow mobile connections and HTTP/1.
It does this by:
- Replacing images with low-resolution thumbnails, which are bundled together into one file.
- Acting as a lazy loader, deferring loading of higher-resolution images until they become visible.
JavaScript must be enabled for Mirage to work.
- Polish seamlessly optimizes images for all browsers, not only mobile, and keeps images at full resolution.
- Image Resizing together with
loading="lazy"andsrcsetHTML attributes can achieve similar results as Mirage, but requires markup changes to implement.
| Free | Pro | Business | Enterprise | |
|---|---|---|---|---|
Availability | No | Yes | Yes | Yes |
Mirage will work with the following image formats:
.jpg.jpeg.png.gif.img
To enable Mirage image optimization for your entire domain:
- Log in to the Cloudflare dashboard ↗.
- Select your account and zone.
- Go to Speed > Optimization > Image Optimization.
- For Mirage, switch the toggle to On.
Mirage's features for Mobile Browser optimization are triggered based on high latency and poor network connections. You can test Mirage by making a request to your domain using a mobile user-agent string ↗ and one of the following flags with your domain in your mobile browser:
EXAMPLE.COM/?forcepreload
To run the pre-loader only and serve degraded images on the page enter:
EXAMPLE.COM/?forcepreloadonly
Here is an example where Mirage 2 is triggered by a ?forcepreloadonly flag. The notable image degradation is a sign that Mirage is working:
