Scale html fragment/page using different algorithm than its content (pixel-perfect rendering in browser)

In my pixel-art game I use GL_NEAREST (pixel-perfect) filtering to draw my sprites into a fixed-size frame buffer, which then I scale and draw to fit the screen using GL_LINEAR (smooth) filtering. This ensures there are no pixel glitches, but everything can be nicely put into arbitrary size window.

Q: Can achieve the same result in web context, using html elements, where the sprites would be <img>s?

Ideally, I'd like to be able to do that for a specific element, so that its non-descendants would be rendered normally, although some whole-page scaling solution will do either. And of course it should be performant, as there might be quite a few sprites/elements, and portable (at least compatible with electron).

I know I can use image-rendering: pixelated or crisp-edges for pixel-perfect drawing, but then I'd probably need to render everything onto a canvas and scale it, for which I haven't found a robust solution. Or I could use element() attribute, but it's only implemented in Firefox.