Pretty sure this is related to how Chrome downscales images, if for example, you open up the browser inspector and set an emoji to the intrinsic dimensions (72px square in this case)… the image is crisp:
Some more examples:
72 / 36 = 2 crisp emoji
72 / 37 = 1.945 blurry emoji
We render emoji at 20px, so:
72 / 20 = 3.6 blurry emoji
In theory this would go away if we used 60px images for emoji instead of 72px? Though I wonder if this is related to pixel density/scaling… some devices use 2X, some use 3X
SVGs and color fonts would be a better way to solve them, but I’m still vouching for the CSS-only solution, CSS is not my expertise but that seems like the least breaking one