Export Code is not generating responsive code for newly added images

Just a heads up to check your code after you export it, if you are using the “export code” feature.

Code that should be generated to look like this:

<img src="images/c_DSC07494_1760.jpg" width="1760" height="1173" loading="lazy" srcset="images/c_DSC07494_1760-p-1080.jpeg 1080w, images/c_DSC07494_1760-p-1600.jpeg 1600w, images/c_DSC07494_1760.jpg 1760w" sizes="(max-width: 767px) 100vw, (max-width: 991px) 670px, (max-width: 1760px) 100vw, 1760px" alt="" class="g-image g-i-32">

Is instead being generated like this:

<img src="images/p2_DSC04983_1760.jpg" width="1760" height="1173" loading="lazy" srcset="images/p2_DSC04983_1760.jpg 1080w, images/p2_DSC04983_1760.jpg 1600w, images/p2_DSC04983_1760.jpg 1760w" sizes="(max-width: 767px) 100vw, (max-width: 991px) 670px, (max-width: 1760px) 100vw, 1760px" alt="" class="g-image g-i-32">

Note that each image size variant is being linked to the original filename instead of the correctly sized variant’s filename, so mobile pages load a giant image intended for desktop instead of a small one intended for mobile. This is despite the .zip containing all the proper size variants, so the proper image variants are being correctly generated but not linked to in the generated code. The code is generated correctly when published to webflow, it is only generated incorrectly by “export code”.

This happens with any newly added images, and after a while (days maybe, or weeks, I haven’t figured out the length) the generation seems to fix itself and start exporting correct code for those images. It’s a real pain to look through every edited page to search out and fix the code that was generated incorrectly after changing images.

I reported this back in October to tech support, but crickets since, and the problem continues. I’m disappointed that a core function like this continues to be broken. I wonder how many users have been affected but are so far unaware.

Webflow’s support is working on this issue now.

I found a workaround to use in the meantime. After adding any new images to a page, refresh the page and the code will generate correctly after, and then you can export the code. Opening another page and then going back in won’t fix it, nor will closing the project and reopening; only refreshing the specific page where new images were added fixes it. This includes if an image was replaced with another image.

1 Like

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