'Image seems to look compressed even though it has enough pixels to look good

So I'm trying to embed an image in my react app and I'm struggling with sizing and quality. My image is like 1800x900 pixels and I only need the image to be like 300x150 which makes it reasonable for me to think there will be no problems with its quality. But then I upload my photo to imgbb and place the link in the src attribute and it looks full on blurry on my webpage.

What's weirder is that if I zoom in using my trackpad on my laptop, it regains quality and I see that its not actually blurry. So what am I doing wrong exactly? Is it the way I'm linking my image, the way I'm sizing it?

<ProjectImage src="https://i.ibb.co/TRbML9h/financee.jpg" alt="financee" />

const ProjectImage = styled.img `
  width: 290px;
  height: 154px;
  border: 1px solid black;
`
cssreactjsimagestyled-components


Solution 1:[1]

Add object-fit: contain; that will adjust image according to parent div or respected image size

More Properties:

object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;

Solution 2:[2]

It looks normal to me I think, but my 20/20 days are long gone

https://stackblitz.com/edit/react-lkkkwk

It is a pretty large image that is being super compressed

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Abbas Hussain
Solution 2 Luiz Avila

Related Questions