MediaWiki: applying css to image

Question

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)

Ilmari Karonen · Accepted Answer · 2023-04-06 14:50:05Z

5

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.

edited Apr 6, 2023 at 14:50

answered Nov 27, 2013 at 0:11

Ilmari Karonen

50.5k9 gold badges96 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mdsimmo Over a year ago

Thanks mate, I recently became an admin on that site so I could edit common.css myself. The wiki isn't 1.20+ so it didn't support the addition of classes in images but directly formatting the img class worked! :D

Ilmari Karonen Over a year ago

Glad to see it's working! BTW, if you found the answer useful, you can mark it as accepted by clicking the check mark icon next to it. This will mark your question as answered, and also give both of us a bit of rep. Once you have a little more rep, you can also vote up any answers you like.

Collectives™ on Stack Overflow

MediaWiki: applying css to image

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related