I’ve been working on adding some imagery to my portfolio website and for some reason, the images that I added to the designer were noticeably blurry and a bit distorted. The link is down below.
I’m not entirely sure why does this happen. I suspected that it was something related to the responsive images check box. However, when I unchecked this option the images were still blurry.
I’ve attached a preview link resembling the problem that I’m currently facing - Essentially when I use “Background images”, they look super sharp & crispy on almost every breakpoint. When I use “Inline-images”, they get a bit blurry and distorted even though both of them are the same image.
Any tips or pointers would be immensely appreciated. Thanks!
Here is my site Read-Only: Webflow - Transition Reduced Test
Preview Link: https://transition-reduced-test.webflow.io/
Sorry to bother you, but can I get some moderator attention for this issue?
The last 5-6 times I posted issues in this forum. Almost no one responded and I can’t seem to find a decent solution for this issue anywhere.
Thanks in advance.
Hey @Ahmad_Mansour thanks for tagging me. Let’s see if I can help.
The first thing that comes to mind is that inline images are automatically set to responsive which delivers a source set of the image’s variant sizes. The browser then uses what it determines is the appropriate size to show. Sometime this can give unexpected results.
It is possible to disable responsive images in the Designer so that only the original uploaded image is used. To enable this option, select the image and open the element settings panel. Then use the following keyboard command.
Then uncheck the responsive image option.
Try that and see if it solves the issue.
Thank you very much for your swift response, Matthew!
The responsive variants were indeed showing a lower quality version of the images but now the issue is solved thanks to your help.
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.