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.stack.imgur.com/X5EfB.png");
}

<div id="backgroundImage"></div>
<img src="https://i.stack.imgur.com/X5EfB.png" />

What you thinks about your question “its technological implementation differs? Or is it tied to whatever browser's base, no?” In my opinion, its technological implementation different. — DSDmark, Jan 15 '23 at 09:38
@DSDmark Sorry I'm not sure I understand your question. I noticed this rendering behaviour on Brave, Electron and Egde, which all use Chromium, but not on Firefox. — Arkellys, Jan 15 '23 at 10:18

score 1 · Accepted Answer · answered Jan 15 '23 at 12:34

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.stack.imgur.com/X5EfB.png");
}

<div id="backgroundImage"></div>
<img src="https://i.stack.imgur.com/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.stack.imgur.com/X5EfB.png");
}

<div id="backgroundImage"></div>
<img src="https://i.stack.imgur.com/X5EfB.png" />

answered Jan 15 '23 at 12:34

Kaiido

123,334
13
219
285

Thank you for your answer, I had not thought that it could come from the other properties. However, in my case it doesn't really solve the problem because `background-size: 100% 100%;` is different from `cover` and it will change the aspect ratio of the image. I managed to get inconsistent renderings by removing `background-repeat`, it changes evey time I reload. Changing size and position (which I can't do) seems to affect `.png` and `.jpg` differently... I wish I could find a way that work for every images every time. – Arkellys Jan 15 '23 at 13:12
@Arkellys I thought you wanted the same behavior as your . `background-size: 100% 100%;` is what your is currently applying. – Kaiido Jan 15 '23 at 13:15
Sorry if my question is misleading. On my question I used a small image as an example to show the problem. I want to get the same display quality as the img tag but I can't change the background size and position properties. – Arkellys Jan 15 '23 at 13:20
I also want to point out that changing `background-size: 100% 100%;` doesn't work on Electron, so I suppose it also depends on the browser/app. – Arkellys Jan 15 '23 at 13:27
Then raise an issue at https://crbug.com so that they change their behavior. Not much we can give you if you can't change anything from what you have. – Kaiido Jan 15 '23 at 14:14
Yeah, I will accept your answer because even though it doesn't solve my particualr case it does solve my initial question. Thanks. – Arkellys Jan 15 '23 at 14:31

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

1 Answers1