Streaming live at 10am (PST)

Webflow serving blurry images. Why?


#1

Please look at the “Gummy Worm” image on a desktop computer. You will notice the image is blurry in Chrome me however when you look at the same image in IE the image is sharp.

Here is the link: http://omega-direct.webflow.io/product-page

I’ve spent HOURS trying to figure out what is going on. I don’t know what’s causing the issue but I have narrowed down the issue. For some reason on certain images Webflow is creating multiple source links to the same image. For example, here is the code to the gummy worms:

img width=“378” src=“http://uploads.webflow.com/58e578f865e7cf27340e7bd7/59a48d34b154e300016ff523_test78.jpg” srcset=“http://uploads.webflow.com/58e578f865e7cf27340e7bd7/59a48d34b154e300016ff523_test78-p-500.jpeg 500w, http://uploads.webflow.com/58e578f865e7cf27340e7bd7/59a48d34b154e300016ff523_test78.jpg 756w” sizes="(max-width: 479px) 100vw, (max-width: 767px) 47vw, 378px"

If you look at another image on the page, the Supplements Facts panel image, you will notice it is nice and sharp in Chrome. If you look at the source code you will see there is only one “src” code link:

img width=“379” src=“http://uploads.webflow.com/58e578f865e7cf27340e7bd7/59a0b5bcfdd0390001e0099d_test46.png

I think Webflow is serving up a low resolution image in Chrome on certain images. I REALLY need to get this site up and going and fix this issue.

Can someone please take a look and see why certain images are blurry? For what its worth if I take the same Gummy worm image and save it with smaller dimension webflow only has one “src” link and the image is sharp. So I just need to figure out why Webflow is saving certain images with multiple src links and serving blurry images.

Thanks for any and all help!


Here is my public share link: https://preview.webflow.com/preview/omega-direct?preview=2bc1fef112a830aa85b295af6ea7fe00
(how to access public share link)


#2

“gummy worm image”

You’re going to need to be more specific than that.


#3

I forgot to include the link. I’ve edited my post. Here’s the link:

http://omega-direct.webflow.io/product-page


#4

I’m getting the same image served on both Safari and Chrome. Neither looked “blurry” but on my machine it certainly does seem as if Safari is doing a slightly better job at retaining quality while resizing the image.

I am on a non-retina screen.


#5

I’m on a PC so I can’t check Safari. However, I think you are seeing the same blurry image when it should be sharp. You have IE by chance?


#6

No, thank goodness, no IE or Edge here.

Could you show screenshots of what you’re seeing as far as a sharp version and a blurry version?


#7

There you go. You can easily spot the difference.


#8

The questions that need to be answered:

  1. Why do some image have multiple source links and not others?
  2. Why are the image blurry in Chrome when they have multiple source links?
  3. How can we fix/avoid this issue?

#9

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.