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

WebP Support for Images #269

Open
WhiteNervosa opened this issue Jul 19, 2020 · 0 comments
Open

WebP Support for Images #269

WhiteNervosa opened this issue Jul 19, 2020 · 0 comments

Comments

@WhiteNervosa
Copy link
Contributor

WebP files are smaller than PNG but for the Emote Spritesheet dramatically so, being consistently 1/4th the size.

Adding this script code (from https://modernizr.com/) will add the webp class to HTML. Without any noticable drop in quality ( before / after - Quality 80 ) I recommend building a WebP emote sheet along with the PNG emote sheet by generating a WebP spritesheet along with the PNG.

CSS specificity will only load one spritesheet.
For the Glue script

scss += ".webp { " + NEWLINE + names + '{' + NEWLINE;
scss += `    background-image:url('../../emotes/${name}.webp');` + NEWLINE;
scss += `}}`;
scss += names + "{" + NEWLINE;
scss += `    background-image:url('../../emotes/${name}.png');` + NEWLINE;
scss += `    background-repeat:no-repeat;` + NEWLINE;
scss += `}`;
@jbpratt jbpratt assigned slugalisk and unassigned slugalisk Jul 19, 2020
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

No branches or pull requests

2 participants