How to fix pixelated background-image on Chromium-based browsers?

Question

On Chromium-based browsers, downscaled images used as background-image are pixelated while they look more blurred when displayed with an <img> tag. Is there a way to change the render style of a background image so it look like the display in the tag? I tried the image-rendering property but it doesn't seem to work on background-image. It looks fine on Firefox.

Example of render on Brave, left is background-image and right is with the <img> tag:

#backgroundImage, img {
  width: 80px;
  min-height: 80px;
  margin: 10px 5px;
  display: inline-block;
}

#backgroundImage {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url("https://i.sstatic.net/X5EfB.png");
}

<div id="backgroundImage"></div>
<img src="https://i.sstatic.net/X5EfB.png" />

Answer 1

This seems to be happening only when both the size:cover and position:center rules are applying. You can have the same result in the <img> by changing its object-fit to cover:

#backgroundImage, img {
  width: 80px;
  min-height: 80px;
  margin: 10px 5px;
  display: inline-block;
  object-fit: cover;
}

#backgroundImage {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url("https://i.sstatic.net/X5EfB.png");
}

<div id="backgroundImage"></div>
<img src="https://i.sstatic.net/X5EfB.png" />

So to avoid it, you can replace the background-size:cover rule with 100% 100%:

#backgroundImage, img {
  width: 80px;
  min-height: 80px;
  margin: 10px 5px;
  display: inline-block;
}

#backgroundImage {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url("https://i.sstatic.net/X5EfB.png");
}

<div id="backgroundImage"></div>
<img src="https://i.sstatic.net/X5EfB.png" />