SVG rendering pixelated on live Claim Page?

Manifold Support Questions
1

Wallet Address: 0x5dABc158b6e2a94590CB07c866Bb0640742a180B

Hey there,

Looking to run a claim page early next week.

Have been building it out in studio and everything looks amazing. However, when I finally published the actual page the image I uploaded now looks pixelated in comparison to the way the SVG was displayed in studio.

I had one version of the NFT uploaded to the Goreli testnet and that final output is looking decent on Opensea.

I also just checked the direct link on ARWEAVE and THAT looks great as well:
https://wckbiuxgtfczvgjfdqcr7mi2nffquabp4j2phesxrnjyrbn7xrna.arweave.net/sJQUUuaZRZqZJRwFH7EaaUsKAC_idPOSV4tTiIW_vFo

And yet… on the claim page it looks… like this:

Comparison Screenshots:

PIXELATED (LIVE PAGE)

Screenshot 2022-12-09 at 11.32.04 AM
Screenshot 2022-12-09 at 11.32.04 AM1556×1644 332 KB

IN STUDIO LOOKS GREAT:

Screenshot 2022-12-09 at 12.25.39 PM
Screenshot 2022-12-09 at 12.25.39 PM1296×1394 297 KB

Is there any way to change how it is displaying on the claim page???

Launching early next week and hoping to point people to the page ASAP!

2

Great catch, will fix

4

Hey @yungwknd! Any ETA on this? Or anything that can be done as a temporary fix? Mint is Tuesday and was planning on some heavy promo tomorrow!

5

No ETA right now, will have the team take a look again on Monday.

6

The reason this is the case is because Claim pages render a compressed JPG for page load performance reasons. Your SVG is 8.6MB, which loads poorly for consumer apps. However, the claim page should now have a button to show the original image, which will load your SVG.

7

Hey @wilkins.eth! Thanks for the reply. have cleared cache and I’m trying on a few different browsers, but I am not seeing a button to reveal the original image. Anything I need to do on the back end to make that visible?

Cheers!

8

@phraze try now. Should be gtg.

9

Hey @wilkins.eth - Apologies as I feel like I’m being a tremendous pain here. Found the button, but man is it hidden. I’m curious if there is ANY way to make some sort of one-off manual change in this case so the full res SVG renders in place of the jpg? I think the slight delay in load time is worth the wait for the image quality in this case.

Understand if it is not feasible, but really would love to find a way to pull it off. It looks SO good in the Studio Preview.

Anything at all that we can do here?

10

We could point to the original link, however there are two potential issues:

  1. The image may not load because arweave may block it or some clients may not connect properly to arweave if there’s higher volume
  2. The page may load really slow.
11

Hey @wilkins.eth - Even with those issues in mind I still think it’d be worth attempting to point to the original link.

If it’s completely unusable in that state for most people I will swallow my pride, come crawling back on my hands and knees, and offer a gift card to the restaurant of your choice to make the change back to this current state. (Completely serious.)

Deal? :sweat_smile:

12

Ok, I changed it, HOWEVER:
the expanded image does not load, because svg’s don’t scale with the same image props. Not something we can fix atm.

13

Looks like it doesn’t reliably load for certain people btw.

14

@phraze going offline in 35 minutes, so if you want it switched back, please message before then.

15

Hey @wilkins.eth (or @yungwknd ) - It looked great on desktop. I did see it won’t load for mobile for me, but the button works in that case. HOWEVER- I just updated the copy on the claim page and it looks like that change reverted the image back to the JPEG! Mint opens in an hour. :dizzy_face: :dizzy_face: :dizzy_face:

I should have not touched it, should have considered that might happen.

Any way to fix one last time?

And honestly… drinks on me for all the chaos this has caused you guys. Drop me an ETH addy where I can tip you both.

16

Updated. Please check.

17

Looks good here! Thank you @wilkins.eth!