Images Stretching after Publish

Design help General
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.

1 Like
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?

8

I’ve been experiencing this same problem. From what I’ve read here, there still doesn’t seem to be a solution to this. Does anyone have any new information on this? I’ve tried everything including turning off responsive images, but nothing can resolve the problem.

9

At this time, Collection images rendered as a background images are not responsive. An image in a collection, bound to an image element does result in auto generated responsive images (srcset and sizes) .

10

@NoahTompkins - Please provide a read only link to your project and if it is published, that URL as well.

11

The problem has since been remedied after removing the image and adding it again, but is seems to keep reoccurring so I’m sure it will happen again.

Here is my read only: read only link

13

This is a serious issue for anyone working with images and want them to maintain aspect ratios. It’s a big deal when working with photographers, filmmakers, anyone else using images. I mean, Webflow, can we get a real solution to this please?

14

@Micheal_Beaulieu - you directed that message to me? What help do you need? I am well versed in editing and handling images online. I would need specifics.

1 Like
15

Thanks ~ for sure my post was 100% well intentioned.

My issue is this: I need my grid of images to MAINTAIN their proportion when the window is re-sized.
My site inspiration for this is here: http://www.teethmag.net/ ( check the grid of images)

and my read-only is here: https://preview.webflow.com/preview/malek?utm_medium=preview_link&utm_source=dashboard&utm_content=malek&preview=fa68f590db2a8251701469e137132be7&mode=preview

Thanks x10 ~ Any help is super appreciated.

16

What is that proportion? You have no width set on collection items and the collection list has no width set. Your grid columns are 1FR with no min set (default is 200px). Aspect ratios have dimensions. As your go down breakpoints you have the same number of columns.

I recommend that you create a new page to play in. Forget about all the styling, just create a collection with the images in a div, and then start playing with grid settings. Revisit the University content on the grid. Look at Min Max.

1 Like
17

ok ~ so min/max is the way to go. I want 4 columns per row, so for that would you set a % rather than px? Or would it be better to create all thumbnails of a specific/same dimension and upload those set to contain rather than cover to avoid squishing them?

Cheers ~

18

Also ~ nothing has been designed for anything smaller than desktop #atm.

19

I would consider the lack of a a minimum width containing element a factor. Right now your collection grid is fluid. On my 5k screen and 4k monitors I am forced to view resize the browser to constrain the site. What is the largest width you want to support?

If you constrained the collection grid, then you could start with calculating 2x max column width at largest breakpoint for images. I personally comp off Webflow, so when I need assets I start with my comp (sketch or XD) to generate the images.

So you have some decisions to make.

1 Like
20

Thx ~ basically, I need a row of three thumbnails, (4 max) basically 4x5 vertical ratio. I did the min/max settings on the collection grid, with a minimum and it’s already 5x better.
The image has a min-height of 600px, and the grid elements is set to a min of 400px per item.

In your opinion, would this be a good starting point to create a grid of images that respect a vertical 4x5 ratio?

I’m sure this is likely a pain for you but I totally appreciate all your advice and recommendations.

40%20AM
40%20AM809×602 128 KB