Hoping someone could help me with a bit of a strange one.
Some images on the published website look slightly blurry. Nothing major but you can see the difference when you put the source image next to it.
For example look at the difference on this page (hero image):
and the source image:
Also when you look within the code, every time this issue happens, the img is linked with multiple url under the srcset. The images that look fine on the website do not seem to have that srcset.
Would anyone would be able to know what is causing this issue and how to solve it?
Your image looks fine. Please check if you look at this image on 100% browser zoom. Maybe set the image to be 1500px-1600px width (To get hi-res image also in 125%-150% zoom).
If an image is responsive - adapts to the browser width then it doesnât show as 100%, hence the blurring. There is nothing you can do about it - its just how browsers resize images. Unless you make this image exactly the size you have it inside designer. Which is arguably not the best solution to start with.
Ah okay I know what your issue is, but itâs way too long to type now. Iâll send you a message and you can call me to explain. Iâll have to take some time and type this out, so I can post it for other members. Talk to you soonâŚ
Sorry itâs been a bit of a crazy week last week, would you please be able to type it up here when you have some time? Really appreciate the time you are taking to do this
Oh no problem, I understand. I havenât had time for in-depth responses either. I know most everyone in the community stays pretty busy. I should have time to put it up by this afternoon. See yaâŚ
@julievaleur- Hi Julie, I consider that image to be a little soft and pixelated. But I am a picky photog. Can you upload / share a higher resolution image for reference. I would start with @2X the dimensions displayed.c I could then work on it to see what the best optimization setting might be. You can PM me if you prefer. Just trying to help.
Sorry for the delay, Iâve been super busy. If Iâve made any mistakes please correct me
CMS PHOTOS:
Set up the Template Page sections:
Before gathering photos, youâll need to know the sizes of each section on the page layout
Layout your sections and the Div structure, then note the sizes on paper
Gather all photos for a project is typical, but for CMS know the sections that each âphoto setâ will reside in beforehand:
Again, since all photos in a specific section are essentially the same, find photos that will fully cover that section
If you donât have enough that will cover, find another photo, donât try to scale up a photo
Edit the photos and I recommend giving all photos the same crop size before cosmetic adjustments:
In the program you use, the crops will be associated with each individual template page section size you wrote down
This is why itâs important to know where the âphoto setâ will reside on the collection page first
After size cropping, start your cosmetic edits because you wonât want to add CSS to a photo in the Designer, a gradient cover may look great on one and ruin another
Once done, itâs best to export each âphoto setâ as the exact section size on the template page you wrote down
Ex: Headers - 1900px, Intros - 1200, etc. Whatever you chose itâs pretty much a lock, any adjustments in the Designer will often break your template page for another âItemâ
Export to PNG
Uploading into CMS:
This is why I suggest building your CMS Collection first and setting up the Template page immediately after
Now you bring all the photos into the CMS for each âItemâ and depending on the choice, whether adding a photo component or a collection list, youâll still want to add Div around that object
I find itâs easier and cleaner to set class names on the wrapper, than the actual components when using CMS because all the assets are using the same Div on the template page anyway
Photo size in Designer:
After binding the photo component to a collection, add pixel size in width to the actual photo element
I use exact pixel value because you need to match the export size of the photo - exactly
Hereâs where I ran into problems:
I know some may use 100%, but the Designer is not the same as a monitor
100% of the canvas is much different than a 1920 or 3840 resolution large display monitor
So my 1280 size header for all my Items looked fine until I published and the JPEGs blew up and blurred when live
No matter what I did JPG was always blurry because of the responsive compression process, thereâs no way to predict what the photo would look - exactly
The best option was to convert to PNG, export all same size, add âexactâsize to the photo in Designer, locked the wrapper CSS style and the photos were crisp, clean and centered in the same location for all Items
Without this setting and if you have different photo sizes here, the compression in the Designer will change each photo, then after publish youâll get various results weâre talking about
Key points to remember for CMS photos:
Take extra time in the editing process beforehand, complete optimization to reduce file sizes, before uploading to CMS.
Photos cannot be styled independently, even for combo classes, the photo for one âtemplate page sectionâ will be the same for all others.
For exact quality and clarity, add the same width size in CSS Styles panel as the âactualâ photoâs width.
Use PNG photos because of the compression process for responsiveness. The application is going to make variants of the original, explained in the University: Responsive images in Webflow | Webflow University
The process will get as close to the original as possible, but I found PNG tends to hold quality much better on a template page. I just couldnât get really clear photo crispness with JPG
PNG will have a larger file size, but there is no way to guarantee JPG quality when you donât know the size of the space itâs going to be in. How will you know the size of a userâs browser? A 100% of what? If itâs a regular asset you could plan and adjust each individual photo based on the size of that section, with a template page you canât. This is why I recommend PNG for these photo sections pretty much always.
Finally, if you absolutely have to use JPG, then go back to photo editing program and enlarge each one significantly. Must be at least 3840 width. But youâre still going to get random scaling for every user, in every browser. PNG with exact size eliminates this potential variable in your design. If scaled, resolution crispness will hold better.
Hope that helps, take care. If you have any questions, give a holler
I was answering members and just thought of you. How did it turn out? Iâm curious to see the results. It definitely made my screenshots super crisp and clean.
