FANDOM


  • Hello all staff members. I have troubles about some tests i did.

    Well, i tried make an animated png for wikia and i achieved find a balance between weight and quality to may have it on wikia, but it presents 2 big troubles.

    1. The animated png can't be resized, when i try resize it on wikia the animation turns static. Gif have some troubles when is resized and it have a transparent background (blinking effects between others) but allows resize it, the apng directly don't allow do it while on html page is perfectly possible.
    2. Animated png works on a lot browsers, but while apng works correctly on Google Chrome (from V59) when the file is upload to use it on wikia, it turns static viewing it on Google Chrome. At first i thought that the issue was from Fandom, but i wanted discard it and i tried see it from a external link, i did put it as background using css and i was able to see it correctly on Chrome. Knowing that, seems the issue comes from host "vignette.wikia.nocookie.net" because is where the images are uploaded.

    Of course i understand fix that isn't an easy work, because it would need a lot test of compatibility on root code and most important, no much people is worried for that, but it's a fact that apng quality is far away from gif.

    I really hope get some tips about this, maybe using a script could fix the viewing on Chrome, sincerely i don't know, i have little knowledge with js.

    Sorry for the long text, thanks in advance and best regards ^_^

      Loading editor
    • The issue is in Vignette, FANDOM's service for thumbnail generation. It most likely doesn't support APNGs very well judging by the lack of appearance of the term in the code, so any kind of scaling applied to APNGs on FANDOM is very likely to break them.

      However, there is a possibility of hotlinking APNGs in their original size without Vignette's interference in certain cases. Where are you trying to use APNGs, which APNGs are you trying to use and for what purpose?

        Loading editor
    • Hi KockaAdmiralac, thank you for your response.

      I want replace some gifs on Dokkan Battle Wikia, is the wikia of a card game of Dragon Ball. The best rarity cards have an animated thumbnails and artwork, example.

      The thumbnail is used in other pages changing the size to show it in different categories (leader skill, passive skill, links, category, etc...).

      Honestly i'm disposed to make one thumbnail per size if finally it doesn't support resize, but the real issue is the viewing on Chrome. Isn't viable use apng files if users of Chrome will see it static, the people have to see the same.

      Thank you for your time ^_^

        Loading editor
    • Is there a reason they need to be APNGs? Could you covert them to animated GIFs instead? Those seem to work just fine with vignette.

        Loading editor
    • Hi Andrewds1021, thank you for your response.

      The animations actually are on gif format, and yes, when gif haven't a transparent background works fine with vignette.

      The main reason is be able to have HD animations, because the GIF quality (8 bits without alpha channel) is far away from APNG quality (16 bits with alpha channel).

      I worked hard to convert that LQ animation to HD (granulated correction, depth color, etc...) and, maybe i shouldn't say it to myself, but now looks awesome.

      After a lot tests i achieved reduce considerably the weight of that apng to be viable use it on web, my last wall is the compatibility on Chrome. I insist Chrome have native compatibility with apng, the issue is just when file is upload on vignette.

      Of course isn't a case of life or die, but is a sorrow can't use it.

      Best regards ^_^

        Loading editor
    • Ah. Okay then.

        Loading editor
    • Hmm. There is a possibility of directly linking the images you're trying to embed in the original format by copying the "original file" link from their file page and then placing the link on other pages. However, this makes the file unable to show a lightbox when selected, doesn't show backlinks to it in Special:WhatLinksHere (and might appear on Special:UnusedFiles) and may require some template modifications to display inside of the infobox.

      Your best bet here is probably contacting Staff to see if they have any other solutions or, if they don't, create a ticket for adding APNG support to Vignette. I don't know how prioritized could that ticket be, so you couldn't really expect anything.

        Loading editor
    • KockaAdmiralac wrote: Hmm. There is a possibility of directly linking the images you're trying to embed in the original format by copying the "original file" link from their file page and then placing the link on other pages. However, this makes the file unable to show a lightbox when selected, doesn't show backlinks to it in Special:WhatLinksHere (and might appear on Special:UnusedFiles) and may require some template modifications to display inside of the infobox.

      Oh, are you talking about using <div style="position: relative;">? Because i tried use it on css for show it as background from a external link and works well, but that implies have the animations in a external host, and of course the download is more slowly when is a free hosting.

      If you referring about other method, could you be so friendly to gift me a link where i can learn how do it?

      KockaAdmiralac wrote: Your best bet here is probably contacting Staff to see if they have any other solutions or, if they don't, create a ticket for adding APNG support to Vignette. I don't know how prioritized could that ticket be, so you couldn't really expect anything.

      Well, my first think was try to call the attention of staff too, hence the title of thread. But honestly i can understand that the staff members have more important things to do than talk to a nobody about a issue that isn't a real priority, i understand it humbly.

      But pretty probably you're right, if finaly i can't find a solution i will try send a ticket, the miracles also exists :)

      Really thanks for your response, very kind ^_^

      P.D. By the way, the standard format of animated png is *.png. Maybe would be possible include something on png appearance to fix the issue on Chrome? Of couse i'm talking from ignorance.

        Loading editor
    • I'm referring to external links to images uploaded to FANDOM being automatically converted to images embedded into the page. These should have no effect on the loading time as you're downloading from the same host you would be downloading the image if it were embedded via a File: link, but perhaps the format=original parameter in the image URL could bypass Vignette and show the file in its original form.

      Staff are certainly going to respond to your request if you send it. It may not have an immediate effect due to the engineers working on tickets with higher priority but at least it will be ticketed and its priority may be raised if more users make the same suggestion. Also, I'm not finding anything APNG-related in Vignette code.

      And no problem. :)

        Loading editor
    • Hmm, apologies for my unknowledge, i tried delete some parts of link to bypass Vignette but i don't know how integrate format=original how you said.

      I took the liberty to make a simple apng to do tests here.


      ChromeAPNG

      The link of this apng is https://vignette.wikia.nocookie.net/central/images/a/a9/ChromeAPNG.png/revision/latest?cb=20190104195557

      How should be write to use it directly from root?

        Loading editor
      1. Go to the file's file page: File:ChromeAPNG.png.
      2. Copy the "original file" link (https://vignette.wikia.nocookie.net/central/images/a/a9/ChromeAPNG.png/revision/latest?cb=20190104195557&format=original).
      3. Paste it onto a page:
        ChromeAPNG.png
        Loading editor
    • Yeah!!! It works on Chrome now. Thank you, thank you very much.

      Probably i will can add the possibility that it have a link, combining z-index with position:relative and using a transparent image.

      Anyway you found the solution for my pain-head.

      Seriously, thank you very much ^_^

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message