On my wiki small pixel-art is used, so having sprites not blur-out is very important.
EDIT: I should mention that sprites use art-style with 2x2 pixels.
I investigated why the images would blur in the first place and the way to fix it.
Adding the image-rendering: pixelated tag seems to fix the problem somewhat, removing the blur.
But the problem comes after that — the FANDOM or at least the platform, seems to be doing something to the images, which blurs them while mixing the colors which should not happen to pixel-art.
The first image shows a direct link to the image, zoomed at 500%, and with image-rendering: pixelated tag added afterwards. The color bleeds out to surrounding pixels, causing them to blur out.
The second image is the same image, downloaded to my pc and opened in browser (which is really strange!), zoomed at 500%, and with image-rendering: pixelated tag added afterwards. The image displays as it should and would in any image editor.
EDIT: The last images are the screenshots of the images as seen in browser, zoomed in with the GIMP software.
I've tried locally disabling various tags in HTML on the direct image link, but to no avail.
I've recently learned that by adding /revision/latest/scale-to-width-down/320 to the image you can resize it on the wiki's side from this [], so maybe it has something to do with that?
Why does this happen and is there a way to disable it?
I see now. That is due to the thumbnailer that Fandom uses. I don't think there is a way around it (unless you hotlink images) but you can ask staff. I know you said that pixel art is typically done with 2x2 pixels. What happens if you do single pixels instead?
I didn't mean the pixel-art in general, I meant that the game the sprites come from does things this way, sorry. As for the thumbnailer, I presume you refer to this [] site, right?
I don't think it is a problem though, 'cause if you go to the another wiki(although it is not FANDOM, but Gamepedia), it uses the same thumbnailer, without actually (sort of) having this problem.
If you look at this file [] which I've got from the aforementioned wiki, it doesn't have this sort of the problem. But, if you go to the link and remove the part of the url after the .png part, it will yield you this [], which has the ugly pixel bleeding problem. So, somehow they did it.
The "-ms-" is called a vendor prefix. That means the property is not an official CSS property but one that a particular web browser (or web browser engine) decided to add on its own. This particular vendor prefix is for Internet Explorer. Other common vendor prefixes are "-o-" for Opera, "-moz-" for Firefox, and "-webkit-" for Safari, Chrome, and any other browser that uses Blink/Chromium (list of examples).
Now the thumbnailer won't enable the whole interpolation so the image will look as intended.
If the link doesn't have any parameters, just add it(?format=original) at the very end.
I didn't find any methods on how to modify links automatically, using templates and such, so the only way this solution can be used is via hotlinking (as Andrewds1021 put it), or in other words, linking to the file directly, without the usual [[File:name.ext|etc]], which wouldn't be very practical.
Yes, indeed the WEBP format is allowed on UCP wikis. Uploading WEBP is probably the best option. However, if you want to go with hotlinking, there is HotlinkVignette. It isn't 100% working the way I want but it is working for basic cases; which seems to be what you would want. But again, only if you think you really need it. I believe the WEBP option is the better way to go.