brands icon indicating copy to clipboard operation
brands copied to clipboard

optipng should be ran on all images

Open pimlie opened this issue 7 months ago • 4 comments

The problem

Many images seem way larger then what is strictly required. F.e. https://github.com/home-assistant/brands/blob/master/custom_integrations/xsense/dark_logo.png is 1.6MB, but after running optipng this file is only 22KB

Additional information

It seems that optipng could/should be ran once for all existing images. This would probably significantly reduce the 'release' size. Alternatively optipng could be ran for all images during build, but this would probably cause a significant increase in build time

pimlie avatar May 15 '25 10:05 pimlie

Agree & disagree.

It would be nice, however, we do handle it before serving (optimization through CloudFlare), so that is not a big concern. What is a concern is that this will majorly increase size of this git repository (as changes of binaries are recorded in history).

../Frenck

frenck avatar May 15 '25 12:05 frenck

It would also be beneficial to the environment, edge optimizations through CloudFlare/Netlify are not a run-once type of thing. It depends on cache clearing after deployments, POP, number of requests etc. So during their lifetime in this repo non-optimized images would need to be optimized multiple times costing unnecessary extra cpu time, elektricity & co2 release 💚

Although my own use case is mainly because its also useful for self-hosting of the brand images ;)

pimlie avatar May 15 '25 12:05 pimlie

@frenck FYI, just noticed that the logo's used in HA itself if you f.e. go to Settings -> Integrations are not being optimized. The url's used on that page are like this: https://brands.home-assistant.io/mobile_app/dark_icon.png and thus also https://brands.home-assistant.io/brands/xsense/dark_logo.png which is the full 1.6MB image if the image is requested for the first time through a Netlify edge pop. This is because Netlify optimization seems to be async, so the first request is a cache miss and will return the full 1.6MB image, and only requests after that will return an optimized image. Netlify uses a cache key based on the full url, so you can add any query string like ?bla to request an image anew.

Its also noteworthy that the biggest size for integration logo's in HA itself seems to be 100x100 with the other sizes being 24x24 and 40x40. Also in the docs the image sizes seem to be max Nx64 (see fe https://www.home-assistant.io/integrations/group/). But the smallest image size in this repo is currently 256x256, so technically you could probably consider the current @1x images already as @2x and the current @2x images could be @3x then add a new size of Nx128 as @1x. Storing all images in this repo as 128x128 directly provides another pretty significant size reduction, even though its only a couple of KB per image simply due to the huge amount of images it's gonna add up...

pimlie avatar May 16 '25 10:05 pimlie

I've also had really good luck with the Rust equivalent oxipng, which is multithreaded and can easily be run by Github Action.

leoherzog avatar Jun 03 '25 14:06 leoherzog