CDN optimization and delivery
Adaptive Images supports CDN rendering (Cloudflare and Cloudinary are supported out of the box) for automatic optimization and delivery.
This offers several key advantages:
Automatic cropping uses advanced AI to identify key elements, such as faces and objects, in images
Images are optimized for different device types, serving images with the most suitable file format
Load times are improved as the global CDN provides high-bandwidth from a location close to the site visitor
Image derivatives, i.e. scaled and/or cropped versions of images, do not have to be stored by the web server
How it works
When the CDN is enabled, the main difference is that the image URLs on the website change.
Whenever an image is requested from the CDN for rendering, one of the following things happens:
If the CDN has previously created the same image transformation (e.g. scaling, cropping, and device-specific optimization), that version is rendered from cache
If the CDN has previosly created some transformation of the same original image, the new transformation will be created, rendered, and cached
If the CDN has not yet created any transformation based on the original image, the CDN will request the original image from the website, after which the transformation is created, rendered, and cached
Load times increase the very first time an original image is transferred to the CDN for transformation. This usually happens as part of the content authoring process in the CMS and doesn't affect site visitors.
CDN requires access to the website over the internet
The CDN requires access to the website in order to be able to request images for transformation.
When the website is hosted on a DMZ, such as a staging or production server, this is not a problem.
For local development, using the CDN requires some sort of reverse proxy to make the local machine available using a host name known to the CDN.
This can be achieved by running something like ngrok and configuring the CDN accordingly.
Because the CDN doesn't affect the CMS user experience nor development (apart from configuration), it is often sensible to only enable the CDN for non-development environments. That way you can develop locally and then test with the CDN in a staging environment before deploying to production.