I&#39;m trying to do server side rendering of images for a webapp. Since it has a lot of images, loading the full resolution image for all screen sizes doesn&#39;t seem to be ideal.
I tried cloudinary using their client side sdk and found that the SSR version of page has generated the image tag without src attribute. The source is added only after the js framework is loaded.
I happened to also try using srcset attribute but faced issue when handling image sizes and screen DPR together.
How are you guys doing it? Let me know if there is any suggestions on implementing the same.

I'm trying to do server side rendering of images for a webapp. Since it has a lot of images, loading the full resolution image for all screen sizes doesn't seem to be ideal.

I tried cloudinary using their client side sdk and found that the SSR version of page has generated the image tag without src attribute. The source is added only after the js framework is loaded.
I happened to also try using srcset attribute but faced issue when handling image sizes and screen DPR together.

How are you guys doing it? Let me know if there is any suggestions on implementing the same.

Rendering proper sized images during server side rendering

Product

Explore

Company

Blogs

Support