Optimized web assets?

[MacLemon]

Story or task

As a user I want to have the UI load quickly.

We're displaying cover art in the UI. The quality spectrum of these cover files is quite broad.

Would it make sense to derive web-optimized images from the existing song images? Either by the importer or a separate process?

These derived images could be super-optimized in file size by ImageOptim or other software to make them as small as possible.

Which sizes and formats would make sense?

• JPEG (Can be optimized with ImageOptim and guetzli)
• PNG (Can be optimized with ImageOptim and bruteforced to the smallest size with multiple PNG optimizers.)
• WebP? Additional format available for devices that can use it?
  • Does that really make transfers smaller/faster since it we'd need to provide a lot more HTML via <image> tag instead of a single simple <img> each.
• Any benefit in considering multiple assets for @1x, @2x @3x screen density?
• Would Flutter even support using multiple image formats and sizes depending on the device?

Notes

• Performance is a feature.

[anlumo]

https://pub.dev/packages/flutter_avif?

Would Flutter even support using multiple image formats and sizes depending on the device?

Yes, but I don't see the use case for that.

Does that really make transfers smaller/faster since it we'd need to provide a lot more HTML via tag instead of a single simple each.

Flutter doesn't use HTML, so there are no image tags.

[anlumo]

Task: convert all covers to JPEG and compress as necessary