Blurry image animation

Hi everyone,

Im having an issue where my Image Animation ends up blurry when the website is published, even though it is greta quality in the preview and editor views.

The first image upon scrolling on the home page is the one that is blurry (click here to see the real preview and blurry picture)

Thanks a lot for helping, I will be responding to comments fast if you need more information to help guide me.


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

Hi @Anthony_Boisclair I have tried replicate your issue but have no luck. It seems that is loading low res image for to me unknown reason as img srcset is ok

You can try to turn of reponsiveness of this one image.

  1. select image
  2. COMMAND + SHIFT + O (it reveal option in image setting)

CleanShot 2021-03-30 at 21.06.24

  1. uncheck Responsive Image.

now publish and see if this helps. You can also try to check HiDPI option to see what happened.

IMHO you image is way to big as you reveal only a small part of it. It will be worth to try to crop image to size and shape you need and try it also with this cropped image.

Cropping image to used size will be IMHO better solution as disabling responsiveness may slow page load speed on mobile devices because image over 1MB is very large. Your call. :slight_smile:

Hi Stan,

Why is it that the option doesn’t show up for me? the Responsive image option

Thanks!

Hi @Anthony_Boisclair you have to select your image and than do step 2

Here is what is on webflow universtity. You can spend some time to read it. :slight_smile:

You can disable this feature for a specific image by hitting CMD+SHIFT+O on Mac or CTRL+SHIFT+O on Windows, then clicking the checkbox that’s revealed in the image settings panel.

It worked! I disabled the responsive image and then HiDPI helped sharpen the image. Thank you for the second time today :wink:

1 Like