Streaming live at 10am (PST)

Images Stretching after Publish


#1

Hi All,

I’m having an issue with images stretching beyond their intrinsic size. I have a portfolio of projects, and each project has a gallery of related photos. So on the Projects Page template, I’ve set up a collection list of Project Images, so I can use a flex list to display them.

For the most part this works really well. Smaller images stay the size they are supposed to, and larger images take up as much space as available. However, some images stretch themselves to fit the width of the container instead of respecting their maximum width. What’s even more confusing, is that they looked exactly how I want them to in the developer, but once I publish they are stretched.

A good example of this is Microsoft Cambridge. The second photo in the list (a man walking down the stairs), looks fine in the editor. But if you look at the live site it’s stretched to the full width of the container.

Is there a way I can fix this??


Here is my site Read-Only: see update 2


Update: 1

It appears one of the critical factors here may be Webflows automatic generation of “Responsive Images.” When I view images that have none of the auto-generated srcset or size parameters, they work fine. Indeed, if I edit the HTML and remove these attributes they work fine.

Is there a way to turn this off, or force Webflow to not create these attributes?

Should this be reported as a bug?


Update 2:
So this was an issue with Webflow’s Responsive images. When I disabled this feature all of my images maintained their correct sizes and loaded exactly as I wanted. Unfortunately, because these are Collection Items, it means I have to disable it for all of my project images, and so can’t use this feature for the majority of the images on my site.

For others who find this issue, use this support article to disable responsive images:

If anyone has a better solution to this problem I would love to hear it. At this time I have disabled my share link and website link.


#2

Try setting your image container to 100% as well. It’s likely that that image is actually at it’s maximum size instead of stretching it which will cause pixelation.


#3

Thanks for your reply, however I do not understand it.

Try setting your image container to 100% as well.

Setting what to 100%? Max width? Width? Both?

It’s likely that that image is actually at it’s maximum size instead of stretching it which will cause pixelation.

I’ve read this about 50 times and I can’t make sense of it. Let’s say the image container is 1200x900. The problem I’m describing is that some of my images, let’s say one that is 800x850, is being stretched to fill this container. It is not 1200x900, nor is it that large in any dimension. So it is stretching to fill the container. What is baffling to me, is that this only seems to be an issue with certain images and not others, and I can’t figure out why. Whats more, is that these same images look just fine in the editor, and only stretch once they are published.

I should note that for whatever reason the failed example link I provided to Microsoft Cambridge now appears to work just fine, although to my knowledge nothing has changed?? But there are several others that still exhibit this behavior, such as Nutter McClennan & Fish


#4

Update:

It appears one of the critical factors here may be Webflows automatic generation of “Responsive Images.” When I view images that have none of the auto-generated srcset or size parameters, they work fine. Indeed, if I edit the HTML and remove these attributes they work fine.

Is there a way to turn this off, or force Webflow to not create these attributes?

Should this be reported as a bug?

Edit:
So this was an issue with Webflow’s Responsive images. When I disabled this feature all of my images maintained their correct sizes and loaded exactly as I wanted. Unfortunately, because these are Collection Items, it means I have to disable it for all of my project images, and so can’t use this feature for the majority of the images on my site.

For others who find this issue, use this support article to disable responsive images:

If anyone has a better solution to this problem I would love to hear it.


#5

What might help is telling us what you want to happen. If you want them to automatically be 100% width then just use an image block set to 100%. If you want them to automatically stretch, then use a div set to whatever size you want and apply the image as a background image set to cover. This will stretch it but maintain the aspect ratio and crop it when needed.

Also responsive images do not apply to collection items at all.


#6

What might help is telling us what you want to happen.

My apologies I thought I made that clear. I don’t want them to stretch at all. Zero stretching.

If the image is wider than 1200px, then it should be scaled down to fit. If it is smaller it should be centered. If two can fit on one line (2 images <= 600px width) then they should fit on the same line (on desktop and tablet).

Also responsive images do not apply to collection items at all.

Well disabling this feature did fix the issue. With this option checked for the images, it generates HTML for the <img> element that includes srcset and sizes attributes. When it’s disabled, it no longer does this:

With Responsive Image checked, it publishes an element like this:

<img
src="https://uploads-ssl.webflow.com/abc/abc_Martignetti_3.jpg" 
srcset="
  https://uploads-ssl.webflow.com/abc/abc_Martignetti_3-p-500.jpeg 500w,
  https://uploads-ssl.webflow.com/abc/abc_Martignetti_3-p-800.jpeg 800w,
  https://uploads-ssl.webflow.com/abc/abc_Martignetti_3.jpg 2500w
"
sizes="(max-width: 479px) 41vw, (max-width: 767px) 39vw, (max-width: 991px) 19vw, 20vw"
alt=""
>

Which to me looks like a responsive image. If I disable this feature I get a basic <img> element:

<img
  src="https://uploads-ssl.webflow.com/abc/abc_Chao_Center_3.jpg"
  alt="Chao Center Stairs 1"
  class="project-image"
>

#7

If these are images in a collection, responsive images are not used as far as I know. @Waldo do you think you can help here?