We have an issue where the image being shown by Webflow is too small and therefore bad quality.
I’ve uploaded images to the CMS collection that are of double the size they are shown in the design.
Image size: 2200px x 1280px
Design: 1100px x 640px
I’m on a 14" screen and I’m receiving a 800px wide image. An 1800px wide screen (3600px retina) should be requesting the full size image.
I’ve tried set my width and height in the image settings (not style) as both the retina and non retina sizes but didn’t have an effect.
Below is a snippet of the code rendered by Webflow and I see a few issues with it.
Firstly the src attribute should use px (not w) as the intrinsic size of the actual image.
Secondly, I’d expect there to be the same number of sizes as in the sizes attribute where I’d see matching intrinsic sizes (px in src should match w in srcset).
The 800px image i’m seeing is the second (!!) image in the list. There’s clearly something wrong here.
Any thoughts/ideas from the community/Webflow would be appreciated. Is this a problem with CMS collection images?
@flowst8 - I always wrap an image in a div and use that div to specify dimensions because sometimes the process Webflow uses to calculate the responsive values returns inaccurate results. Unfortunately your can’t provide Webflow seed values you want to use. However, in my experience, most issues are resolved with the method I described.
I think you’re getting confused between using styling to make image a certain size and providing the correct size image source file? If not, so you’re saying Webflow uses a wrapping element in the designer to determine HTML values in srcset and sizes?
@flowst8 - What I mean is that the process Webflow uses is not always able to determine correct values for the responsive srcset and sizes.
I built a site on Webflow to try to figure out what the logic was so we could at least see under what conditions (in a page) it would generate responsive images. At this test site I created a bunch of images. First test was to see if dimensions alone triggered the routine (no) and then size and weight (yes but not always).
When the routine Webflow uses produces what we consider as wrong results, I have found that wrapping an image in a parent block level element seems to fix the regen sometimes. Not saying you need to define dimensions here. The routine seems to get confused when using CSS Grid more often. Below is the original thread when the responsive image feature was launched and staff commenting on how and when it does what it does. Note: CSS Grid was not launched until much later in Webflow.
Hey everyone. I’ve experienced the same issue with CSS Grids (after building several components with it) and it would be very laborious to rebuilt everything using flex-box, so I found a hack to overcome the issue (I’m aware that’s not the most optimal solution, but until Webflow corrects that, I don’t see other way to solve it).
<script>
document.addEventListener('DOMContentLoaded', function() {
var images = document.getElementsByTagName('img');
function updateImageSizes() {
for (var i = 0; i < images.length; i++) {
var image = images[i];
// Check if the image is loaded
if (image.complete) {
setImageSizes(image);
} else {
// If the image is not loaded yet, add a load event listener
image.addEventListener('load', function() {
setImageSizes(this);
});
}
}
}
function setImageSizes(image) {
var imageRect = image.getBoundingClientRect();
var imageWidth = imageRect.width;
var viewportWidth = window.innerWidth;
var widthPercentage = (imageWidth / viewportWidth) * 100;
var sizesValue = Math.round(widthPercentage) + 'vw';
image.setAttribute('sizes', sizesValue);
}
// Update image sizes on initial load
updateImageSizes();
// Update image sizes on window resize
window.addEventListener('resize', updateImageSizes);
});
</script>
I’ll open a ticked related to that issue, because it kind of prevent us from using CSS grid with images without messing with the images rendering quality.
