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