I use some hero images that are 1920px wide for my site. These images are in jpg-format, with around 5-8 in compression before I upload them. These images have no advanced functions. They are just large images. They look great in Webflow Designer but once I publish the site they look rather hideous on my live site. They come out heavily compressed and “blurry”. Something I dont want.
I’ve read some posts on this very matter on the forum but I haven’t gotten a clear idea what is causing this or how to solve it. Some say the images should be made 3200px wide. Some say its best to disabling responsive images. Some say its a Chrome (OS X) issue (but I just checked it in Firefox where it was equally unpleasant.) Some say a custom CSS is needed to solve the issue.
Some mixed messages there. If you could give me some advice of how to get my hero images to show up nice and sharp I would really appreciate it.
I don’t know why you need to use those particular images with the large background colors? You can save the actual images (without the background color and the large padding) in PNG or SVG format and simply center them on a background color of your choice. Like this:
Thank you for your response. I really appreciate it.
Your approach make a whole lot of sense. Thank you for showing it to me!
I read the FAQ’s you sent. Outside the approach you just showed me what is the best practices when it comes to having large images (like 1920px wide) on a site made in Webflow? I mean, for large images when the background is just one solid color I totally get that your approach is better. When it comes to jpg-images that are filled with information (like a photo or painting) though, is there a way to avoid it getting as severely compressed?
Hi @mellanskogen thank you so much for reaching out and great question!
Since you’re using inline images in your site, we’re creating responsive variants of the images.
You’re already optimizing your images before you upload them to your site so to retain the original file without any additional compression you can turn off the responsive images feature for each of the inline images in your collection template page.
You can disable this feature for a specific image by hitting CMD+SHIFT+O (CTRL+SHIFT+O on Windows), then clicking the checkbox that’s revealed in the image settings panel.
