Streaming live at 10am (PST)

Image Sharpness Issue

Hi everyone,

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?

Thanks for the help :+1:

Julie


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi,
Did you get the image resolved? If not, I can help ya.

1 Like

Hi,

I tried a temporary fix but not sure it’s the best solution so happy to hear your suggestion :slight_smile:

I just looked… which photo and page are looking at again?

It’s the hero image on this page

If you’re looking in webflow, it’s in the CMS under 1500

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…

Hi @julievaleur,

I never heard back from you. If you don’t have to call let me know and type up the explanation.

Hi @garymichael1313,

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 :slight_smile:

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.

Hey @julievaleur,

Sorry for the delay, I’ve been super busy. If I’ve made any mistakes please correct me :slight_smile:

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:

  1. Take extra time in the editing process beforehand, complete optimization to reduce file sizes, before uploading to CMS.

  2. Photos cannot be styled independently, even for combo classes, the photo for one ‘template page section’ will be the same for all others.

  3. For exact quality and clarity, add the same width size in CSS Styles panel as the ‘actual’ photo’s width.

  4. Use PNG photos because of the compression process for responsiveness. The application is going to make variants of the original, explained in the University: https://university.webflow.com/article/responsive-images
    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

  5. 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.

  6. 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 :slight_smile: