Mirage image optimization is currently available for Pro, Business, and Enterprise level domains. It helps speed up loading of images through four key attributes:
1. Mirage will analyze the type of connection and device the visitor is coming from, which helps optimize the image loading experience based on network and device connection. Mirage automatically resizes images based on the visitor's device, and how the image is used on the page. Requires JavaScript (automatic).
2. Mirage will virtualize the images, so a visitor on a poor connection will get a smaller version (lower resolution) of the image until the customer is back on a higher bandwith connection (high resolution).
3. Mirage will streamline requests into one. Instead of sending multiple requests for all of the images on the site, Mirage will pull this into one request so visitors can start experiencing the images immediately.
4. Mirage will act as a lazy loader, and automatically turns all images into load-on-demand. Images on your site are not loaded until the visitor scrolls to their location. This feature will work for any images on your page, including those that are loaded in from third party links.
Click here for more information on how Mirage works.
What File Extensions will CloudFlare Work With?
Mirage will work with the following image formats:
*.jpg
*.jpeg
*.png
*.gif
*.img
Turning on Mirage:
To enable Mirage for your domain, log into your CloudFlare account to access your CloudFlare performance settings.
Mirage can be found under the 'Speed' section after logging into your CloudFlare account:
You can also utilize page rules to set Mirage to be active or inactive on specific URLs for your site. To access your page rules, go to:
Page Rules can be found under their own section after logging into your CloudFlare account:
Testing Mirage:
Since Mirage's features for Mobile Browser optimization are triggered based on high latency or poor network connections, you can test the features 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
EXAMPLE.COM/?forcepreloadonly (this flag will run the pre-loader only and serve degraded images on the page)
Here is an example where Mirage 2 is triggered by a ?forcepreloadonly flag. Notable image degradation is a sign that the feature is working:
