The images on my website are blurry even if they are high quality

Design help General
1

Hi, I’ve started importing images from figma for a software product and chose high quality ones because I wanted them to be readable.

But I have an issue, even if I uploaded high quality images, they appear blurry. Is this because their size is smaller in the image settings?
here are the image settings of a blurry image for example:

image
image908×617 110 KB

And if it is the case, is there a way to make the texts on the images more readable while keeping the same page layout with the same image width?

(I also tried using SVG files and it still was blurry)

Here is my site Read-Only: https://preview.webflow.com/preview/schoolmakertest?utm_medium=preview_link&utm_source=designer&utm_content=schoolmakertest&preview=9e5517eb344f70bd9ad5c9c3f7f48eb5&pageId=61096a073266c134b0e38671&workflow=preview/

2

I have moved your image element to the root below the navbar symbol.
When its full size it looks fine. If you click the corner of the image element to resize it you will see the effect you are getting.
I have downloaded your source image which looks ok, bit blurry but its ok.
I have uploaded it to figma and /2 and it resizes fine.
So my answer is to size the image as best you can to fix the container it is going into.
Browser is not a great resizing program.

Hope this helps and if it does, to keep the forum tidy, tick solutions and show the love by ticking the heart.

1 Like