Responsive image variant srcset not being generated

Community resources Bugs
1

I always say, “If it looks like magic you probably don’t know what you’re doing”. Well, apparently I don’t know what I’m doing.

Webflow seems to use / generate responsive images when it feels like it.

To test this I made a simple 1 page / 1 image site.

I expected the img tag to look something like this (I stole this from another post about responsive images):

<img sizes="100vw" 
     src="http://.../image.jpg" 
     srcset="
    http://.../image-p-500.jpeg 500w, 
    http://.../image-p-800.jpeg 800w, 
    http://.../image-p-1080.jpeg 1080w, 
    http://.../image-p-1600.jpeg 1600w, 
    http://.../image-p-2000.jpeg 2000w, 
    http://.../image-p-2600.jpeg 2600w, 
    http://.../image-p-3200.jpeg 3200w, 
    http://.../image.jpg 3840w
">

But instead this is the code I get when I export it:

<img class="responsiveimagetest" sizes="95vw" 
    src="images/5121-0_45.jpg" 
    srcset="images/5121-0_45.jpg 1080w,
    images/5121-0_45.jpg 1600w,
    images/5121-0_45.jpg 2000w,
    images/5121-0_45.jpg 2600w,
    images/5121-0_45.jpg 3200w,
    images/5121-0_45.jpg 5184w">

  1. Why doesn’t it actually “use” the p-1600, p-2000, p-2600… jpegs? It only uses the original .jpg. The files are available in the export.

  2. Why doesn’t it generate the p-500, p-800, p-1080 sizes? I need those smaller images for the mobile screen sizes.

Here is the read-only link: https://preview.webflow.com/preview/berts-sublime-project?preview=4d576280e47448594d45f56091a60586

Here is the published version: http://berts-sublime-project.webflow.io/

Thank you in advance for any assistance,
Bert

2

Hi. It’s hard to explain how srcset works (This is more issue for tutorial):

Also It’s hard to understand your point (what the idea of the code you added). Anyway you should click on this button to enable responsive images (Also don’t upload 5000px+ width images because the “thumbnails” creation will be very slow in any system/cms/software)

image

This is the code on your publish site (not the code you wrote) - so try again.
http://berts-sublime-project.webflow.io
<img src="https://daks2k3a4ib2z.cloudfront.net/59cbf7f4d7d51800012f8660/59cbf805956fc00001836e11_5121-0_45.jpg" class="responsiveimagetest">

Read more her:

2 Likes
3

I appreciate the response. I understand how srcset works. I had previously read the 2 articles you posted from Webflow. The article from Sitepoint really just confirmed what I had already known, but thanks for posting it. The more information the better.

The problem I’m having is that Webflow is not doing what it is supposed to do. It is not actually using the “-p” files that it generates.

Now I have two more interesting observations.

First, there appears to be a difference between the “view-only” link and the live designer. Notice the “Enable Now” link is missing from the designer, but for some reason it is available in the view-only link. Why that would be available on the view-only interface and not the designer interface, I don’t know.

672×511 59.6 KB

Secondly, you mentioned:

This is the code on your publish site (not the code you wrote) - so try again.

I’m not using the published code. I’m using the exported code. That was the code that Webflow exported yesterday and it was a direct copy and paste. And still the published code was not using the “-p” files. Thank you for confirming my problem.

But none of that matters anymore! What’s more interesting is that today both the exported code AND the published code are using the multiple “-p” files. Why today and not yesterday? I did not change a thing!

Here is the published code today. Notice the “-p” files.

<img class="responsiveimagetest" src="https://daks2k3a4ib2z.cloudfront.net/59cbf7f4d7d51800012f8660/59cbf805956fc00001836e11_5121-0_45.jpg" alt="" srcset="https://daks2k3a4ib2z.cloudfront.net/59cbf7f4d7d51800012f8660/59cbf805956fc00001836e11_5121-0_45-p-1080.jpeg 1080w, https://daks2k3a4ib2z.cloudfront.net/59cbf7f4d7d51800012f8660/59cbf805956fc00001836e11_5121-0_45-p-1600.jpeg 1600w, https://daks2k3a4ib2z.cloudfront.net/59cbf7f4d7d51800012f8660/59cbf805956fc00001836e11_5121-0_45-p-2000.jpeg 2000w, https://daks2k3a4ib2z.cloudfront.net/59cbf7f4d7d51800012f8660/59cbf805956fc00001836e11_5121-0_45-p-2600.jpeg 2600w, https://daks2k3a4ib2z.cloudfront.net/59cbf7f4d7d51800012f8660/59cbf805956fc00001836e11_5121-0_45-p-3200.jpeg 3200w, https://daks2k3a4ib2z.cloudfront.net/59cbf7f4d7d51800012f8660/59cbf805956fc00001836e11_5121-0_45.jpg 5184w" sizes="95vw" draggable="false">

This is the exported code today. Again notice the “-p” files.

<img class="responsiveimagetest" sizes="95vw" src="images/5121-0_45.jpg" srcset="images/5121-0_45-p-1080.jpeg 1080w, images/5121-0_45-p-1600.jpeg 1600w, images/5121-0_45-p-2000.jpeg 2000w, images/5121-0_45-p-2600.jpeg 2600w, images/5121-0_45-p-3200.jpeg 3200w, images/5121-0_45.jpg 5184w">

What changed? @PixelGeek @cyberdave

Anyone from Webflow want to chime in here?

I would greatly appreciate it.

4

I moved this to the bug category. It seemed appropriate.

5

I might’ve had the same problem. Try cmd + shift + i (ctrl on Windows). I’m curious if this solves it.

6

Good suggestion, but I did try that. I watched it process up to 100%, but it didn’t change anything.

7

I just made another page in this project called 4000-test. I figured I would imitate the example given in the Webflow University article.

Choosing the right image to upload

You can upload any image size you’d like, provided it is smaller than our 4MB limit. Your browser will serve whichever variant is best, based on device size and resolution. For example, if you upload a 4000px wide original image but it is only rendered at 300px width on mobile, your browser will serve the 500px variant that Webflow created in that context.

I also tried the CTRL-SHFT-I trick.

The exported ZIP file contains all of the “-p” variants, but the source in both the exported and published code does not use the “-p” files.

Exported Code

<img class="_4000px" sizes="(max-width: 4000px) 100vw, 4000px" src="images/5121-4000.jpg" srcset="images/5121-4000.jpg 500w, images/5121-4000.jpg 800w, images/5121-4000.jpg 1080w, images/5121-4000.jpg 1600w, images/5121-4000.jpg 2000w, images/5121-4000.jpg 2600w, images/5121-4000.jpg 3200w, images/5121-4000.jpg 4000w">

Published Code

<img src="https://daks2k3a4ib2z.cloudfront.net/59cbf7f4d7d51800012f8660/59cd676501fe980001f9c85f_5121-4000.jpg" class="_4000px">

I guess we’ll see how it looks tomorrow.

Published site: http://berts-sublime-project.webflow.io/4000-test

View-only link: https://preview.webflow.com/preview/berts-sublime-project?preview=4d576280e47448594d45f56091a60586

8

Two hours later and the exported code is now using the “-p” files.

Exported code

<img class="_4000px" sizes="(max-width: 4000px) 100vw, 4000px" src="images/5121-4000.jpg" srcset="images/5121-4000-p-500.jpeg 500w, images/5121-4000-p-800.jpeg 800w, images/5121-4000-p-1080.jpeg 1080w, images/5121-4000-p-1600.jpeg 1600w, images/5121-4000-p-2000.jpeg 2000w, images/5121-4000-p-2600.jpeg 2600w, images/5121-4000-p-3200.jpeg 3200w, images/5121-4000.jpg 4000w">

The published code is still not using the “-p” files.

Published code

<img src="https://daks2k3a4ib2z.cloudfront.net/59cbf7f4d7d51800012f8660/59cd676501fe980001f9c85f_5121-4000.jpg" class="_4000px">

At least now I know I need to wait a few hours to get my results.

That’s kind of a solution. :face_with_raised_eyebrow: Not one my boss will like to hear he’s paying for.

“Sorry, Boss, we need to let the site simmer a little before I can make that change you want.” :unamused::roll_eyes:

9

Hi @berapp, I am sorry to hear about the export issue with the responsive images, I am here to help check into this.

A few quick questions to clarify the issue:

  1. You exported the code and the variant images were not exported?
  2. You exported again 2 hours later and the variants existed?
  3. Did the images show correctly on the published site?
  4. Could you send a copy of the latest exported zip file to support@webflow.com so that we can take a look?

It sounds really strange for sure. Are you viewing the exported code in a text editor, or on a server outside of Webflow that can potentially be affected by server caching?

If you wish to send me the info via direct mesage you can do so by clicking my forum username and then click message.

Thanks in advance.

10
  1. You exported the code and the variant images were not exported?

Incorrect. The variant images were generated and exported.
It was the HTML code that was not using the variant files in the scrset.

  1. You exported again 2 hours later and the variants existed?

Again, the variant files already existed.
It was the HTML code that finally used the variant files in the srcset.

  1. Did the images show correctly on the published site?

No. On the published site, the HTML code was only using the original image.

  1. Could you send a copy of the latest exported zip file to support@webflow.com so that we can take a look?

I sent this message and attachments to support@webflow.com as requested. It looks like Webflow is back to not using the variants. I just exported the code in berts-sublime-project.webflow (4).zip and the variant files are not being used. I’ve also attached an exported file from the other day (berts-sublime-project.webflow (3).zip) and in there you can see the variant files were created, but were only used in index.html. They were not used in 4000-test.html.

It sounds really strange for sure. Are you viewing the exported code in a text editor, or on a server outside of Webflow that can potentially be affected by server caching?

I’m using the text editor “Brackets” to view the source. http://brackets.io/

I would greatly appreciate getting to the bottom of this. I do like using Webflow. It’s much better than any version of Dreamweaver.

Thanks again,
Bert

11

Hi @berapp, thanks for the info. There have been some code changes recently that affect to a small number of sites, I have rolled back those changes for your site, could you please republish the test site and let me know if you see the srcset in the code?

There is an issue identified and the dev team is working on a fix for that. Let me know how things look after republish/re-export.

Thanks in advance.

13

Awesome! Whatever you did it worked.

Now for a few questions:

  1. Were those changes rolled back for my account?
  2. Just that individual site?
  3. The team sites?

Thanks for your help!

14

Hi @berapp, glad to hear.

This is a temporary rollback that applies just to that individual site (and to just a very, very small number of sites in Webflow, but not necessarily in your account or your team account). If you have issues with any other site, let me know at support@webflow.com and I can help to get those sites rendering correctly.

Also, those code/settings changes were backend changes, I am not referering to your design, that has not been touched.

I hope this helps!

1 Like
15

I don’t have that Create responsive variants in my Assets either. Any chance you can fix it? @cyberdave
https://preview.webflow.com/preview/filigree?preview=43b6092a35c8a6d1379f0b07318817d1

17

I don’t know why @samliew response to me here suddenly disappeared, but here’s the thing… I can see it in the preview link too, but not in my designer.
https://app.hyfy.io/v/abv4TxKRtIU/

1 Like
18

@Sven_Erik_Slattedale yup, looks like you have the exact same issue

@cyberdave

1 Like
19

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