Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

svg to avif test #2359

Draft
wants to merge 7 commits into
base: master
Choose a base branch
from
Draft

svg to avif test #2359

wants to merge 7 commits into from

Conversation

plowsof
Copy link
Collaborator

@plowsof plowsof commented Aug 23, 2024

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

Copy link

netlify bot commented Aug 23, 2024

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...

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
Copy link
Contributor

closes #2274?

Copy link
Contributor

@HardenedSteel HardenedSteel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@plowsof plowsof marked this pull request as draft August 24, 2024 14:08
@plowsof
Copy link
Collaborator Author

plowsof commented Aug 27, 2024

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 plowsof changed the title svg to png test svg to avif test Aug 27, 2024
@plowsof
Copy link
Collaborator Author

plowsof commented Aug 28, 2024

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)

  • after realising the trouble of raw html in md files causes for translations i am against using srcset until there is a more elagant approach, perhaps in a markdown parsing plugin

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Replacing .svg files
2 participants