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 += `}`;
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