svg to avif test

[plowsof]

closes #2274

• ive hard coded the roadmap (emojis/*) to 64x64.. looks too big. will try 32x32. these svgs have no implicit dimensions hardcoded and use css to fill elements.
• wallet-generator.html links to the safari tab. not editing. we've deleted the svg and it will change the hash of the file / require it to be singed again by bF
• i have left the font svg files untouched, as i'd have to research whats going on there. it seems that our css has the svg as a fallback if the browser can not use the other font file formats (? i have no idea why or if this is a early 2000's thing)
• on our press kit, the svg of the mrl-logo is served, so that remains in our file tree but site displays the png version

todo: delete the png files if avifs are OK

[netlify]

✅ Deploy Preview for barolo-time-757cf9 ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	4bd4dc7
🔍 Latest deploy log	https://app.netlify.com/sites/barolo-time-757cf9/deploys/66ce578c5c0c1700089bd757
😎 Deploy Preview	https://deploy-preview-2359--barolo-time-757cf9.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[HardenedSteel]

closes #2274?

[HardenedSteel]

what about other compressed formats? because PNGs will increase the page size a lot

[plowsof]

what about other compressed formats? because PNGs will increase the page size a lot

I made an attempt to compress the png's with some small gains. What other file format would you suggest so i can try to see any gains? we're talking about, in some cases,small 16x16 / 64x64 pixel images so i suspect the gains would be minor. on the other hand, there is the mrl-logo which gets drawn at a whopping 1500x1500 in our css lol not sure what thats about

[plowsof]

thanks to @HardenedSteel for exposing me to avif / jpgxl and srcset

to attempt to display the not so widely supported jpgxl format and fallback to avif it is as simple as:

    <img class="matrix" 
         srcset="/img/matrix-logo.jxl, /img/matrix-logo.avif" 
         src="/img/matrix-logo.avif" 
         title="Matrix" 
         alt="Matrix logo">

all we've done is add the srcset= option to the image. We've agreed this would be better handled in a follow up/future PR, that would convert all images to jpgxl and avif + add srcset values to all instances of the <img> html tag.

As for this PR i am satisfied with replacing the SVG's with AVIF's with the final TODO being to look at the font files. we can most likely just delete the SVG font files (as the svg is seemingly a fallback for browsers that dont support the standard font types)