User:CzechOut/Images

Image serving is a complicated subject at Wikia. There are a number of little-known rules that most wikis never need to know. However, the faction icons highlight some of these rules, and it's taken some time to explore with Engineering just what's going on. I'm going to try to use this page to illustrate some of these rules so you can see the scope of the problem.

One of the things about image serving that's fairly unexplored is the difference between the way it happens on the desktop and the way it's done on Mercury, our mobile skin. On this wiki, how things look on mobile isn't a trivial question. Depending on how you measure things, 43 - 53% of your visitors -- so let's just call it half -- are visiting via mobile devices.

So any image solution needs to look good on mobile.

PIs actually do look better on mobile than NPIs
Let's start with this truth. The visual experience of an infobox on mobile is better with portable infobox code:

Hero images
The "hero image" is the image which goes at the top of the article on mobile, has some nice shading around the edges, and features the article name at the bottom. It looks like this:

How heroes are chosen
Hero images are defined by the code as:
 * the first image encountered whose full width is at least 301px

On desktop the images are rendered in the order defined by the template-- so is on top, while / is underneath. But in Mercury the topmost image is the first one that's at least 301px wide.

Thus, on USS Enterprise (NCC-1701) there is no difference between desktop and Mercury order. The picture stored in is over 300px, so it becomes the hero in Mercury.

You've probably already guessed the implication of this rule for you. The way you're doing icons now means that the icon is the 301px image. It becomes the hero. And that's definitely not what you mean to do.

When there is no hero
If there is no image in the infobox that's 301px then there is no hero and the images are displayed in the order set by the template. This is important to you, because a number of your comic images aren't at least 301px wide. And while it may not be possible to get an image that wide in every instance, you should know that there's good cause to try to hit that mark as often as possible.

Here's what an infobox without a hero looks like in mobile:

But notice this. On desktop, an infobox without an image that's at least the width of the infobox (220px) will result in upscaling. In other words, images that are smaller than 220px wide will likely become pixellated to one degree or another. So shooting for 301px images will not only make sure that Mercury picks your intended hero image, it also means that your desktop image will be rendered more clearly.

Only one image per variable
Normal PI markup can only accept one image per variable. So | icon1 =  results in the display of only this.jpg. And that's why I said back on the 3rd that the bot move of these images into  was only a temporary holding area. Actually using, on its own, won't lead to great results.

As you've seen and imitated from my experiments, something like appears to work fine on desktop. But, again, to roughly half your visitors, it's going to create a very bad experience at the top of the page.

That's because -- whether you're talking about the new infoboxes or the old ones -- Mercury rules are simply different from desktop ones.

Mandatory minimums
In Mercury, the minimum that an image can be is 50px x 50px. If it's lower than 50, on either dimension, then the system automatically cuts it (essentially) in half. On mobile this has the effect of rendering the image so small that you can't make any sense of it.
 * Andoria, at 220px
 * Andoria, at 22px

But here's the rub. Whether you're talking about portable or non-portable infoboxes -- no matter whether you do it through wiki-text, escaping normal PI code thorugh tags, or even using  is going to provide you with the best-looking results on both desktop and Mercury.

The exception is with Conflict infobox and Battle. Because conflicts are often between governments, the best solution there is to put up the full-width governmental symbols of the combatants, as has currently been done at First Battle of Altair VI. However, this solution would work even better if the images used were transparent.