MediaWiki: applying css to image

I'm trying to scale up images in the Mediawiki: Pixel Dungeon. The images are pixel art, so I want clean sharp edges when they are scaled. I have tried appling this code:

<span style="
    -ms-interpolation-mode:nearest-neighbor;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;">
      [[File:myImage.png|96px]]
      <!-- I tried in a HTML document replacing above line with:
             <img src="myImage.png" width="96"/>
           this produced same result -->
</span>

This works in Firefox, but IE doesn't apply the span's style to the image meaning the image is blurry. How can I get the image to have the span's style or apply the style directly to the image?

I do not have admin rights on the wiki, thus [[File:myImage.png|96px|class=myClass]] will not work since I cannot create the class.

(see the actual page at http://pixeldungeon.wikia.com/wiki/Template:Pixel_image)

Solution

Honestly, your best bet is probably to ask an admin on your wiki to add the necessary CSS rules to MediaWiki:Common.css on your wiki. Something like the following should do the trick:

img.pixelart {
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

This would allow you to use [[File:myImage.png|96px|class=pixelart]] to get a nicely pixelated image.

Ps. If you're stuck on an old MediaWiki version that doesn't support adding classes to images, you can work around that by changing the CSS selector to .pixelart img and the wikitext to e.g.:

<span class=pixelart>[[File:myImage.png|96px]]</span>

In fact, if most images on your wiki are pixel art, it might be easiest to just omit the .pixelart part from the CSS entirely, so that the scaling rules are applied by default to all images. This shouldn't affect the appearance of images shown at their natural size or smaller, since MediaWiki will downscale them on the server side anyway.

Pps. In modern browsers that support it, using image-rendering: pixelated likely works even better for pixel art than crisp-edges. I would recommend either adding it to the end of the list above (so that older browsers can still fall back to crisp-edges if they don't support it) or just using it alone.

MDN describes the pixelated image rendering mode as follows:

Using the nearest-neighbor algorithm, the image is scaled up to the next integer multiple that is greater than or equal to its original size, then scaled down to the target size, as for smooth. When scaling up to integer multiples of the original size, this will have the same effect as crisp-edges.