I use nuxt-picture and cloudinary. Unfortunately, this connection gives me rather problems. I need to generate images for the following breakpoints
xs: 320,
sm: 720,
md: 1280,
lg: 1920,
xl: 2048,
Problem:
The first time the site loads, it waits for the image to transform, which has a big impact on the site performance. Is it possible to pre-prepare images with cloudinary and not wait for dynamic transformation?
Cloudinary supports on-the-fly transformations - i.e. just by modifying the URL parameters and requesting a different version of the original image/video - which is what you're seeing happen when you first load the page. The derived/transformed version of the image is only generated once Cloudinary receives the request for it, so if you have a lot of large/high-quality originals it can take a few seconds for everything to be generated on-the-fly depending on the exact transformations you are requesting. That said, subsequent requests will return the images from storage or CDN cache and therefore, won't experience any delays.
It is also possible, as you've requested, to pre-generate all the transformed versions you are using ahead of time to avoid the first-request delay. This is what Cloudinary calls Eager Transformations. This allows you to specify the public_id of the original image/video and also the transformations you want to be generated. Generation for images will be a lot quicker, but for videos, it's recommended to perform the eager transformations asynchronously (i.e. in the background) and you can use Eager Notifications to know when those have been completed and are ready for use. Using Async Eager Transformations you avoid your app/server waiting to get a response back for the eager transformations while they are being generated which can lead to timeouts. Using async eager transformations allows you to send the request with the required versions for the generation to Cloudinary and once the request is received you will get an immediate response back with status Pending of all your requested transformed versions. Cloudinary will, in the background, schedule tasks to generate the requested transformed versions. If you've specified an eager_transformation_url then you will get a webhook response at that URL with a JSON payload detailing the result of the requested eager transformations.
Eager transformations can be requested for new images/videos in the upload API call or configured in an upload preset, including an upload preset that is used when you upload to Media Library.
For existing images/videos, you can request eager transformations via the explicit API method.