Oh hey, Discord must have seen this article -- their favicon is down to 14k now.
It's not, at least for me. If you checked in devtools, that's gzip over the wire size. Hover over the size and it'll show you the actual resource size, still 285k for me.
I committed a fix, it's now 24k uncompressed! :)
Congratulations. Don't forget your 11x improvement when it comes to the end of year reviews.
Re:We analyzed 425k favicons
by ajyotirmay on Wednesday October 27, 2021 @06:44AM
(#29011483)
Yes it is! That should go on your profile. I wonder how much money that simple change is going to save!
The gzipped size is probably the correct metric to care about, right? Virtually all browsers will support that.
Sure, Discord could do a bit better, but it's not correct to knock them here for costing their users 285KB.
Re:We analyzed 425k favicons
by MrBoomixer on Wednesday October 20, 2021 @07:43PM
(#28938345)
This is bad math, not researched heavily but in 2020 discord had 300 million users. 285kb goes a long way with wasted energy and bits flowing through the pipes. I agree generally with what your saying though gzipped sizes are what's being sent some CPU usage somewhere to unzip. less bytes == less waste?
PNG basically includes gzip in the file format, so you're not reducing the amount of CPU used, you're just moving where it happens.
Re:We analyzed 425k favicons
by giantrobot on Wednesday October 20, 2021 @11:46PM
(#28939971)
Includes but doesn't always use. PNG also includes filters which can dramatically decrease sizes, especially when combined with compression.
That's why tools like OptiPng basically brute force all the combination of options. Depending on the image content different combinations of filters and compression will get the best file size.
That’s lit and a fantastic turnaround. Great work to whoever is reading this!
“ I got that 280k Discord favicon down to just 24K simply by opening it in GIMP and saving it again. “
You made me laugh out loud.
I agree that stuff like YouTube.com saying 144x but really 145x seems like it should be embarrassing.
I wouldn't be surprised if that was for a specific reason, like somehow showing up better somewhere for some reason, or something like that. Or maybe not; who knows...
Re:We analyzed 425k favicons
by JohnTHaller on Wednesday October 20, 2021 @05:23PM
(#28936862)
256x256 PNG reduced to 256 colors with pixel transparency gets it to 2.68K. I manually dropped the color depth to indexed and saved it out in PhotoShop and I used FileOptimizer to shrink it. It includes 12 different image shrinkers and runs them all.
Re:We analyzed 425k favicons
by nerfhammer on Wednesday October 20, 2021 @04:50PM
(#28936348)
there are png optimizer programs, e.g. optipng
Re:We analyzed 425k favicons
by pseudosavant on Wednesday October 20, 2021 @05:39PM
(#28937076)
The Squoosh (web) app is awesome for this too! All processing is done locally with wasm.
Yep, just tried the Discord icon with OxyPNG and it went from 285k to 6.35k, visually indistinguishable.
I'd love to have a browser plugin that converts all images I upload to CMS using Squoosh.
`optipng -o9 -strip all' is a must
ImageOptim was a favorite of mine. They have a standalone mac app and a webservice. It combines several of these tools into a single GUI.
Re:We analyzed 425k favicons
by jamesfinlayson on Wednesday October 20, 2021 @07:58PM
(#28938484)
I found https://pngquant.org/ to be pretty good.
Note that unlike some of the other tools mentioned here, pngquant does lossy compression. Might still be the right tool in many cases, but it means you should check the output while e.g. optipng is a no-brainer to add to whatever your publishing pipeline is.
Haven't managed to get my headshot down to less than 10k without looking horrible no matter how much I tweaked the JPEG or WebP settings, and thought that was just a tad too big to embed. Maybe I need to find a different picture that compresses better.
I got that 280k Discord favicon down to just 24K simply by opening it in GIMP and saving it again. I got it down to 12K by indexing it to 255 colours rather than using RGB (I can't tell the difference even at full size). You can probably make it even smaller if you tried, but that's diminishing returns. Still, I bet with 5 more minutes you can get it to ~5k or so.
It's very easy; you just need to care. Does it matter? Well, when I used Slack I regularly spent a minute waiting for them to push their >10M updates, so I'd say that 250k here and 250k there etc. adds up and matters, giving real actual improvements to your customers.
The Event Horizon Telescope having a huge favicon I can understand; probably just some astronomer who uploaded it in WordPress or something. Arguably a fault of the software for not dealing with that more sensibly, but these sort of oversights happen. A tech company making custom software for a living is quite frankly just embarrassing to the entire industry. It's a big fat "fuck you" to anyone from less developed areas with less-than-ideal internet connections.