Image delivery currently works via uncompressed .png images transferred over the Home Assistant Brands-CDN and requires all users to have a constant and fast internet connection while browsing the Home Assistant UI, to fully load all UI aspects.
What are the issues with the current behavior?
There are two issues with this:
-
Inefficient picture encoding:
Delivering all images via .png instead of more modern image formats like .avif or even .webp would immensely reduce loading times for users on slow connections, make the Home Assistant interface faster and would reduce loads on the Home Assistant infrastructure. The old .png images can still be loaded as a fallback via standard HTML image sourcelists, respecting browser capabilities and other preferences. Using avif would be preferred here, since we can archive lower file sizes without compromising browser support. -
Online dependency:
Users using Home Assistant in an offline environment might get visual glitches or unexpected loading times, when the online Home Assistant CDN is not reachable. Using a more optimized image encoding like .avif would immensely reduce file sizes and would possibly allow shipping all images with or as an additional download for Home Assistant.
What changes do I propose?
I propose the following changes:
- Provide all logos and images on the CDN as .avif in addition to .png.
- Implement Sourcesets to priorize loading optimized .avif versions of images if the browser supports it. (HowTo)
- Include or easily allow to install optimized .avif files for local only operation on Home Assistant. (Optional)
What would improve?
This would improve responsiveness of all Home Assistant Users, reduce infrastructure cost for the Home Assistant team, bring forward adoption of modern web technologies and help with data usage and offline use.