WebP Support for Images
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 16
- Forks
- 33
- PR merge metrics
- No merged PRs in 30d
Description
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 += `}`;
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with scripts/glue.js, especially the sprite stylesheet generation around the referenced line, and inspect assets/index.html for the WebP detection class. Confirm how the PNG emote sheet is generated and add the corresponding WebP output and CSS fallback behavior. Done means supported browsers use the WebP sheet while others continue using PNG.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, scss
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100