If you've ever tried to put an image of a video game sprite on your site and display it in different sizes, you might have noticed it looks blurry and ugly instead of crisp and pixelated. You can avoid this by setting the image-rendering property to pixelated.
For example, let's look at this Pichu sprite from Pokemon Gold. I've only applied width: 150px on it to make it larger. The sprite on the left is its native 56px x 56px dimensions.
Notice how blurry it is. This is due to how your browser handles scaling images. Exactly what it does depends on what browser you're using, but for the most part, pixelated images like sprites will generally look terrible. It's just like when you try to resize them in something like Photopea using the default settings.
Now look at this one with image-rendering: pixelated applied.
Look at how much better it is. It's not perfect but it's definitely much nicer than before.
You could just edit the image and resize it in an image editor but that's so inconvienient. What if you change your mind and want it to be a different size? What if your website's design is responsive and the image automatically resizes based on the user's browser's size? Using CSS means you don't have to worry about that.
By the way, it works with animated images too:
Again, it's not perfect but it definitely is convenient.
You can find more info about the image-rendering property on MDN.