Hi Chris, Thanks for the video! Do you have any ideas on how to manage the issue with images inserted via Rich Text for the CMS? I have blog posts with many different images and I'm trying to find a solution for sizes that will work on both desktop and mobile.
Unfortunately, there's no direct solution to this. The library that Webflow is using for rescaling images (responsiveness) is old and buggy. I'm working now on a new lazy load & image rescale tool. Hopefully will be done shortly. But at the moment, you can try: 1. Click on the image inside Rich. 2. Click on the gear icon 3. Go to the Size and set to fixed width and height. 4. Save and re-run Lighthouse.
Yep, however what about images that have uncommon ratios? At the same time, the width and height tells webflow how to create the src sets and serve different image sizes on different breakpoints. But yeah, you're right.
Disable responsiveness was unchecked, checking it fixed the issue but it's dramatically reduced the image quality so I think there's an issue with Webflow's CDN or the way they serve images doesn't respect the hard values but my best guess
the issue you're mentioning is different than the one in the video. Properly size images means Webflow does not generate different image size for different screen sizes. Might be for two reasons: 1. You do have 'Responsive image' option toggled off within the image settings. 2. Webflow responsive images plugin does not work sometimes as intended which still trigger the warning. However, this is just a warning and does not impact your overall Web Vitals. But if you still want to fix the warning, I'd suggest you integrating a different plugin for responsive images or jsut lazy loading off-screen images so Web Vitals does not trigger the warning. Let me know if this make sense.
I think you're quickly becoming one of my favorite RUclipsrs!! Awesome, valuable, helpful content, Chris. Subbing from my personal account!
I was looking for this thing for a long time but this is my solution, thank you very much
you're welcome
Hi Chris,
Thanks for the video! Do you have any ideas on how to manage the issue with images inserted via Rich Text for the CMS? I have blog posts with many different images and I'm trying to find a solution for sizes that will work on both desktop and mobile.
Unfortunately, there's no direct solution to this. The library that Webflow is using for rescaling images (responsiveness) is old and buggy. I'm working now on a new lazy load & image rescale tool. Hopefully will be done shortly. But at the moment, you can try:
1. Click on the image inside Rich.
2. Click on the gear icon
3. Go to the Size and set to fixed width and height.
4. Save and re-run Lighthouse.
@@saascouple Thanks for the idea, and good luck with the tool!
Love this series about speed optimization, really well explained so we're not just following steps like zombies
Keep them coming!
i set the values of all images but the section keeps on collapsing when on load do I also have the set a height to the section?
Sam, send me a read-only link please on my email chris@thelumious.com. Might collapse for different reasons, including your browser.
Using ratios I am pretty sure eliminates this issue because Webflow will always know what the width and height will be. Let me know if I’m wrong.
Yep, however what about images that have uncommon ratios? At the same time, the width and height tells webflow how to create the src sets and serve different image sizes on different breakpoints. But yeah, you're right.
I've tried this and still getting the error on page insights to properly size images not sure why
Disable responsiveness was unchecked, checking it fixed the issue but it's dramatically reduced the image quality so I think there's an issue with Webflow's CDN or the way they serve images doesn't respect the hard values but my best guess
the issue you're mentioning is different than the one in the video. Properly size images means Webflow does not generate different image size for different screen sizes. Might be for two reasons:
1. You do have 'Responsive image' option toggled off within the image settings.
2. Webflow responsive images plugin does not work sometimes as intended which still trigger the warning.
However, this is just a warning and does not impact your overall Web Vitals. But if you still want to fix the warning, I'd suggest you integrating a different plugin for responsive images or jsut lazy loading off-screen images so Web Vitals does not trigger the warning. Let me know if this make sense.
I would pay for this tyoe of videos
thanks for your support