edit:
crisp-edgesdoesn't have consistent browser support.pixelateddoes. use that one instead
extra tip: you can use both
<img style="image-rendering: pixelated; image-rendering: crisp-edges;" src="link here" alt="describe image here" title="description/hover text here" >
On browsers with support for crisp-edges they'll use that, on browsers without, it'll use pixelated ✨
What's the difference? Well, crisp-edges will attempt to preserve edge detail on non-integer scales, so it's useful if you have an image whose max-width is 100% (and so might scale down on mobile - you are chosting with mobile in mind, right? 🥺). It's basically nearest neighbour scaling (pixelated) versus sharp bilinear (crisp-edges).