Maps uploaded via Firefox are not converted to webp

[drglove]

Tonight we had a session with a user, let's call him Dave, who has very slow internet. Our DM had created a scene using this tool and Dave had a very hard time loading this scene, despite us hosting with a rock-solid gigabit upload on a good rig and no other users experiencing issues. Diving further, we found that the scene in question had been named with the .webp extension, but it was still in fact a PNG and was gigantic (~60MB in our case).

I created a test world to play with, and found that if I created the scene using either the Electron app, Chrome, or Edge the resulting map was a valid WEBP file and was appropriately small. These all behaving identically (and I checked the output WEBP file is bit-wise identical) makes sense since I think this is all Chromium doing the work. However, when using Firefox to create the scene in an identical manner, the result was a PNG file with a .webp extension that was giant.

Repro steps (100%):

• Install Foundry VTT 0.7.9, Dungeondraft Importer 1.1, and in our case the system Sandbox System Builder
• Use Firefox to connect to the Foundry installation
• Create a world that uses the Dungeondraft Importer module
• Go to the Scenes tab and open the Dungeondraft Import tool
• Enter a scene name, and leave all other options at default (storage type = user data, image type = png, convert to webp = checked, fidelity = lowest, offset = 0.1)
• Upload a .dd2vtt map exported from Dungeondraft (I've attached a sample map that repros the issue)
• Click Import
• Once done, inspect the resulting WEBP file placed into the worlds directory
• Notice that the file is not a valid WEBP file, is actually a PNG file, and is of large size
• Trying the above with Chrome/the Electron app/Edge does not exhibit this behaviour

Here is a Google Drive link (it is too large to attach) containing a sample test map for importing, and the resulting output for both Chrome and Firefox.

[drglove]

Probably related to shortcomings with WEBP support in Firefox more than anything. The canvas.toBlob function seems to ignore the MIME-type passed in if it's image/webp and just falls back to PNG with Firefox. I bet this issue is related https://bugzilla.mozilla.org/show_bug.cgi?id=1505383

I'm not sure what workarounds exist.

[m42e]

@drglove I don't think there is a (easy to implement) workaround, besides: converting it to webp is really done by the browser. All the libraries I found doing that in native JS aren't that usable, but that may be my fault. So, converting it in the first place or using a browser which supports the feature would be recommended. Or a PR with another solution if you dare dealing with JS graphic libraries.

[drglove]

@m42e thanks for the response. I tried using libwebpjs with a little luck, as it seemed to be the only native JS library I could find. It seemed to do the trick, but it ran very slowly in the larger cases I tested with and there are many unknown knobs to me so I abandoned it. In the end I settled for a quick program I wrote to convert all images to webp on the backend and update references.

Perhaps just warning the user that the WEBP conversion was not possible, and writing out the file to disk with an accurate extension is all that's needed here to tip off to users that things aren't as they expected.

[m42e]

@drglove I tried a workaround I stumbled upon, if you know how, you could try #86 else you might have to wait a bit longer, so it is released.

[drglove]

Thanks, @m42e! I will try your changes out prior to our next session (not sure when that will be yet though), and let you know how it goes.

[intuited]

Is there a reason why the conversion isn't done server-side? I can't imagine it would be difficult to find a .webp conversion library for node.

[moo-man]

Well, because modules run on the client side, Foundry's server does not inherently support modules.