Responsive dynamic image optimization

Creating a site that has high quality images yet loads faster is a concern for us these days. I was glad that I was able to change the images for each media query in Webflow by uploading different sizes of the same image to make it’s loading time faster on all devices. I.e. I used to upload 1440x900 images for desktop and as low as 500x313 for mobile. I tried to do the same for the dynamic content by creating 3 image fields for the different sizes, however, I just realized that I can’t change the dynamic link in any query without changing it across all queries. Any suggestion guys of how to do this?
Thank you

1 Like

I am definitely working on this @Anna_Kelian . I think what you could do is have Desktop & mobile datafields. Then in dynamic lists, just display the respective ones per a break point. Does that make sense?



Hmmm maybe. You mean I should add all images in the desktop view and hide the mobile ones with css. Then Show them on the other media queries and hide the desktop image there??
Can’t think of any other option :confused:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.