Hi everyone.
So this is my very first shout out for help and advice. So I hope that the following explanation will be eloquent enough to be understood ;-).
I’ll try and explain the issue I’m having as best as I can…
So in brief…
The project public link is:
The page where the issue is demonstrated can be viewed with the following link, and its the last two images at the base of this page that show the CMS image resolution issue (not the grey placeholder images) as explained below:
https://communique-uk.webflow.io/client-project/hunky-dory-foods
I have a CMS portfolio template with various image divs sat within grid.
You’ll see that the CMS images that I have uploaded for test purposes have been created at their maximum dimension (used within this design) of 1600px wide (not the grey placeholder images BTW) to cater for the largest of screen sizes. The images have object fill (cover) applied which are all working fine. I have also specified there exact size as 1600px wide, auto height within the image settings panels even though they are within a grid set to 100% and those widths obviously change throughout the design.
This all views perfectly within the WebFlow environment. The issue occurs when the site goes live, as the imagery is reformatted (I assume by the Webflow’s responsive CDN system) at much lower resolutions which obviously cause pixelation when the pages are viewed at those higher screen sizes. The system appears to reduce the images from 1600px (w) to 500px (w).
I have several theories… most are far to complex to note here, so I’m hoping someone else has had this issue or knows of a conflict linking the GRID/CMS/IMAGE OBJECT FIT property and the Webflow image CDN system?
Any help would be really appreciated… I’m completely stumped at the moment!
Here is my public share link: Webflow - Communique
(how to access public share link)