Add responsive images
Responsive Images delivers appropriately sized images to fit the actual render size.
For example, an image of 1000x600px required for the desktop will be resized to 500x300px for mobile.
The required size is calculated at the render time, and the appropriate image is resized on the fly using FlyingCDN. Hence FlyingCDN subscription is required to enable Responsive Images.
If it's a background image inserted using CSS or the image is lazy-loaded by your theme or some other plugin, responsive images will not work.
Responsive Images calculate the required width of the image at the render time and append it to the URL of the image. Since the URLs are generated at render time, it's impossible to predict the URL and preload it.
For example, an image of 1000x600px required for the desktop will be resized to 500x300px for mobile.
The required size is calculated at the render time, and the appropriate image is resized on the fly using FlyingCDN. Hence FlyingCDN subscription is required to enable Responsive Images.
Why am I still getting properly sized warnings?
If it's a background image inserted using CSS or the image is lazy-loaded by your theme or some other plugin, responsive images will not work.
Why are images not preloaded anymore?
Responsive Images calculate the required width of the image at the render time and append it to the URL of the image. Since the URLs are generated at render time, it's impossible to predict the URL and preload it.
Updated on: 23/06/2023
Thank you!