<p>On my wiki small pixel-art is used, so having sprites not blur-out is very important.
</p><p>EDIT: I should mention that sprites use art-style with 2x2 pixels.
</p><p>I investigated why the images would blur in the first place and the way to fix it.
</p><p>Adding the image-rendering: pixelated tag seems to fix the problem somewhat, removing the blur.
</p><p>But the problem comes after that — the FANDOM or at least the platform, seems to be doing something to the images, which blurs them while mixing the colors which should not happen to pixel-art.
</p>
<figure class="article-thumb tright show-info-icon" style="width: 180px">
<figcaption>
<p class="caption">Blurry version</p> </figcaption></figure><figure class="article-thumb tright show-info-icon" style="width: 180px">
<figcaption>
<p class="caption">Normal version</p> </figcaption></figure><p>The first image shows a direct link to the image, zoomed at 500%, and with image-rendering: pixelated tag added afterwards. The color bleeds out to surrounding pixels, causing them to blur out.
</p><p>The second image is the same image, downloaded to my pc and opened in browser (which is really strange!), zoomed at 500%, and with image-rendering: pixelated tag added afterwards. The image displays as it should and would in any image editor.
</p><p>EDIT: The last images are the screenshots of the images as seen in browser, zoomed in with the GIMP software.
</p>
<figure class="article-thumb tright show-info-icon" style="width: 180px">
<figcaption>
<p class="caption">Blurry, opened in GIMP</p> </figcaption></figure><figure class="article-thumb tright show-info-icon" style="width: 180px">
<figcaption>
<p class="caption">Normal, opened in GIMP</p> </figcaption></figure><p>I've tried locally disabling various tags in HTML on the direct image link, but to no avail.
</p><p>I've recently learned that by adding /revision/latest/scale-to-width-down/320 to the image you can resize it on the wiki's side from this [
[1]], so maybe it has something to do with that?
</p><p>Why does this happen and is there a way to disable it?
</p><p>Thank you.
</p><p>EDIT: Fixed the link
</p>
<figcaption> <p class="caption">Blurry version</p> </figcaption></figure><figure class="article-thumb tright show-info-icon" style="width: 180px">
<figcaption> <p class="caption">Normal version</p> </figcaption></figure><p>The first image shows a direct link to the image, zoomed at 500%, and with image-rendering: pixelated tag added afterwards. The color bleeds out to surrounding pixels, causing them to blur out.
</p><p>The second image is the same image, downloaded to my pc and opened in browser (which is really strange!), zoomed at 500%, and with image-rendering: pixelated tag added afterwards. The image displays as it should and would in any image editor.
</p><p>EDIT: The last images are the screenshots of the images as seen in browser, zoomed in with the GIMP software.
</p>
<figure class="article-thumb tright show-info-icon" style="width: 180px">
<figcaption> <p class="caption">Blurry, opened in GIMP</p> </figcaption></figure><figure class="article-thumb tright show-info-icon" style="width: 180px">
<figcaption> <p class="caption">Normal, opened in GIMP</p> </figcaption></figure><p>I've tried locally disabling various tags in HTML on the direct image link, but to no avail.
</p><p>I've recently learned that by adding /revision/latest/scale-to-width-down/320 to the image you can resize it on the wiki's side from this [[1]], so maybe it has something to do with that?
</p><p>Why does this happen and is there a way to disable it?
</p><p>Thank you.
</p><p>EDIT: Fixed the link
</p>
