hey guys i was building on of the web app and Image in my webpage looks blurry even if it is high resolution. can you guys help me to fix it?

as you can see here, it looks blurrry.

Here is my code:

#album-cover img{
    position: absolute;
    top: 15px;
}

<img src = {name.imageURL} width = "150" height = "150"/>  

hey guys i was building on of the web app and Image in my webpage looks blurry even if it is high resolution. can you guys help me to fix it?

as you can see here, it looks blurrry.

Here is my code:

#album-cover img{
    position: absolute;
    top: 15px;
}

<img src = {name.imageURL} width = "150" height = "150"/>  

how can i fix this? thank you

• javascript
• html
• css
• reactjs

• Upload image separately, or upload on net, and provide link here. – Deadpool Commented Dec 11, 2020 at 4:38

4 Answers 4

What site are you working on? i meant what platform? If you have a high res-image and then resize it using CSS, chances are that it will turn blurry, whereas if you crop it or resize it manually to 150px x 150px and upload it, it will retain its sharpness even if you omit the width and height in css like this:

The problem may e from your styling. You are setting the size of the image 150x150, which may be different from the original ratio. Since the image must be resize to that ratio it could lead to this behavior.

You may either try to use only width or height and let the other property auto calculated, or you can try using max-height or max-width instead. Another solution is that you can resize the image using some library before display it.

Insert this line in your styling for the image. When images are being downscaled (or upscaled), an image rendering algorithm has to be used. The line below specifies this rendering algorithm to one that looks clear.

image-rendering: pixelated;

Check this link out: https://www.w3schools./cssref/css3_pr_image-rendering.asp

set the object-fit property to cover. This will not mess with the resolution of the image.