Worse image quality on website than in Windows Fotos app

Question

I implement an image via

<div class="position-relative" style="height: fit-content; width: fit-content">
    <img class="image-size" src="xyz.png" alt="...">
    <span>...</span>
</div>

The css class image-size only sets the height: .image-size {height: 400px}.
The problem is that the image quality is way worse on the website than in the Windows Fotos app. The following image depicts this. (I zoomed a little in. So, also in the Windows Fotos app you can see pixels. That is okay.)

left: Windows Fotos app, middle: website

I tested it in Edge, Chrome and Firefox. Firefox displays the image in good quality. This seems to be a known issue with Chromium browsers and I found a possible fix here. Unfortunately, the css img {image-rendering: -webkit-optimize-contrast;} even makes it worse in my case. This is depicted on the right hand side. I tested the different values of the image-rendering property but did not get a satisfying result.

Is there a way to fix this?

Answer 1

This indeed has to do with the way chrome renders images. As far as I know there is (and it seems to me) no way to get it the same everywhere except with: image-rendering: pixelated;.

For the rest, you can use any of these 3. Just test and see which you like best.

image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

Here you can look for more information on this: https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering