User:Faalagorn/120 px test

This is the comparison of various sizes of scaled miniatures, based on the 32 px item image File:BaseballBatNails.png:

• 18 px (size used for old recipes)
• 20 px (size used for crafting recipes)
• No scaling (32 px by default for items)
• 120 px (size used for old icons on PZwiki)
• 128 px (32×4, should result in rounder pixels?)
• 200 px (size used for some models)
• 300 px (size used for some models)
• 320 px (10-times magnified)

Having scaling done on MediaWiki saves having to upload and maintain multiple versions of image, meaning less maintenance burden and less server usage (space and transfer) as well as faster page loads.

Since 2023-02-12, MediaWiki:Common.css on PZwiki uses the modified second approach.

Based on the answer here: https://stackoverflow.com/questions/20085594/mediawiki-applying-css-to-image

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;
}

Based on the modified answer here: https://stackoverflow.com/questions/3900436/image-scaling-by-css-is-there-a-webkit-alternative-for-moz-crisp-edges

img.pixelart {
    image-rendering:optimizeSpeed;             /* Legal fallback */
    image-rendering:-moz-crisp-edges;          /* Firefox        */
    image-rendering:-o-crisp-edges;            /* Opera          */
    image-rendering:-webkit-optimize-contrast; /* Safari         */
    image-rendering:optimize-contrast;         /* CSS3 Proposed  */
    image-rendering:pixelated;                 /* CSS4 Proposed  */
    image-rendering:crisp-edges;               /* CSS4 Proposed  */
    -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
}

Default MediaWiki scaling (blurry):

pixelart class:

Tested browsers:

Desktop:

• Firefox 110.0 – works with crisp-edges.
• Chromium 110.0.5481.100 – works with pixelated.
• Microsoft Edge 110.0.1587.49 – works with pixelated.

Mobile:

• Firefox Focus 109.2.0 – works.
• Chrome 109.0.5314.117 – works.
• Microsoft Edge – works.

TODO

• Test IE, Safari and older browsers (all should work).
• Test downscaling more, maybe with different icons and non-round scaling factors.
• Figure the best scale proportion for all the infoboxes.
• Research if there's a way to modify MediaWiki default upscaling method, including galleries and maybe thumbnails, possibly via Common.css but maybe can some extension too, didn't research that.