User blog:Pippinitis/Preparing images for infoboxes

Note: This document is a work in progress. This is a work in progress

Since Fandom's rollout of their Unified Community Platform (UCP), they've migrated to newer "portable infoboxes". Sure, it requires some migration and work from legacy templates of the longtime Wikia system, but the goal is to reach more users across desktop and mobile platforms. This document has been tailored for users of Apple products on the Apple Wiki.

Image types
There are various image types, but the most commonly used are JPEG, GIF, PNG, and now WebP.
 * JPEG (.jpg) is ideal for photos and presently does not account for transparent pixels.
 * GIF (.gif) is usable for legacy icons with 256 colors or fewer, and 1-bit transparency (it is either completely opaque or transparent, on or off).
 * PNG (.png) is ideal for modern icons and supports true color, with 8-bit transparency (256 levels of opacity from completely opaque to completely transparent pixels).
 * (.webp) is a newer format from Google with improved data compression, but is not as universally supported as PNG.

Images in infoboxes
Legacy infoboxes used to allow images to be scaled for placement within them, like Wikipedia. However, this is no longer the case by default after the UCP transition. It is possible to customize them with CSS, but there is no such guarantee that such custom work will not break with future updates (the underlying server software of this wiki).

Modern portable infoboxes will typically scale images to take up the full width of the infobox (268 pixels internally). This works fine for photos and screenshots, but is not always ideal for icons. One technique to deal with this is to shrink or scale down the image so that it is inset within the infobox. This works for reasonably well for legacy desktop users, but does not scale well for users with resolution-independent displays of ever-increasing dot pitches (e.g. mobile and 4K+).