Recommendations for Image Preloading

[andrskr]

Hi everyone,

I'm currently implementing a responsive hero image using the unpic-img library and looking for recommendations on how to effectively preload the various image variants based on media queries. My goal is to optimize loading times while ensuring that the appropriate image is displayed for different screen sizes.

Context:

• Use Case: I have a hero image that needs to adapt to various screen sizes and resolutions.
• Approach: I want to use the <link rel="preload"> method as described in the MDN documentation.

Questions:

• Are there any specific considerations or best practices when using this library for responsive image loading?
• Any additional tips or examples that you can share to optimize image loading using unpic-img?
• According to the doc, I can use something called transformUrl but I can find a utility that will generate a list of URLs similar to what the Image component do, when the end img has a srcSet property defined with all the sizes and URLs.

I appreciate any insights or suggestions you might have!

Thank you!