One thing I noticed is that Chrome seems to display CSS background-images differently compared to using the <img /> tag.
I tested two identical images resized to the same dimensions
- The first image set as a CSS background-image appeared pixelated
- Whereas the second image inserted with the
<img />tag was anti-aliased.
<style>
.a {
width: 292px;
height: 233.594px;
display: inline-block;
}
div.a {
background-image: url("data:image/png;...");
background-size: cover;
}
</style>
<div class="a"></div>
<img class="a" src="data:image/png;..." />
https://i.sstatic.net/hq9hz.png
To experiment further, visit this playground: https://jsfiddle.net/tjpn9ecu/3/
I wonder if there is a way to make Chrome apply anti-aliasing to CSS background-images as well?