capacitor-assets
capacitor-assets copied to clipboard
ionic-team
File sizes significantly larger than resources generated by Ionic server
I just tried this package for the first time, and incorporated it into my project as part of a script that automatically adds the current version number to the splash screen. Everything works well (thanks, programmatic API!), but then I noticed that the files generated by cordova-res are significantly larger than the files generated by the ionic cordova resources command.
For example, using a source splash.png file with a size of 415127 bytes, I get the following Android file sizes:
| File Name | Original | New Size | Increase (bytes) | Increase (%) |
|---|---|---|---|---|
| drawable-land-hdpi-screen.png | 100948 | 142272 | 41324 | 40.94% |
| drawable-land-ldpi-screen.png | 29089 | 37660 | 8571 | 29.46% |
| drawable-land-mdpi-screen.png | 51104 | 66148 | 15044 | 29.44% |
| drawable-land-xhdpi-screen.png | 185526 | 287462 | 101936 | 54.94% |
| drawable-land-xxhdpi-screen.png | 249488 | 403147 | 153659 | 61.59% |
| drawable-land-xxxhdpi-screen.png | 318870 | 531053 | 212183 | 66.54% |
| drawable-port-hdpi-screen.png | 99679 | 137061 | 37382 | 37.50% |
| drawable-port-ldpi-screen.png | 29073 | 37162 | 8089 | 27.82% |
| drawable-port-mdpi-screen.png | 50947 | 65433 | 14486 | 28.43% |
| drawable-port-xhdpi-screen.png | 182030 | 274610 | 92580 | 50.86% |
| drawable-port-xxhdpi-screen.png | 242958 | 385503 | 142545 | 58.67% |
| drawable-port-xxxhdpi-screen.png | 312941 | 517462 | 204521 | 65.35% |
| Total | 1852653 | 2884973 | 1032320 | 55.72% |
I'm assuming the Sharp package used by cordova-res has default PNG output settings that differ from the settings used by the ionic.io API ... but I don't know what the specific differences might be.
Perhaps the user could pass in an optional object with PNG options that gets passed along to Sharp before toBuffer() runs? I can try to create a pull request that incorporates that if it sounds helpful.
The Ionic API uses imagemagick at lower quality settings. The images produced by sharp are actually much better, because as you pointed out the PNG quality defaults to 100. I think it'd be a great idea to pass in PNG options in the programmatic API. Maybe also a --quality parameter, which is likely going to be the most used option.
Yes, the images produced by cordova-res are definitely noticeably less fuzzy than those produced by the Ionic API. I got a preliminary version working last night (programmatic API only -- I forgot about the CLI, whoops) but passing in different values for quality didn't actually seem to change anything; the output files were identical.
Setting the adaptiveFiltering option to true brought the size down a tiny bit, so it seemed to be passing the options in successfully, it just wasn't having the effect I thought it would...
Still trying to figure out what's going on ... 🤔
I figured out that the problem was obvious: the default libvips that sharp uses doesn't come with libimagequant enabled. I was able to get it to build with libimagequant on Linux, but not on Windows, which is where I do most of my development. With the libimagequant-including libvips installed, my changes worked fine in the Linux version. But I still can't get it to build properly in Windows. None of the Windows builds for libvips include libimagequant in the configuration, and although I can build libimagequant on its own under Windows, I haven't yet been able to build libvips with libimagequant support.
@chorpler It's slightly concerning that Ionic devs might need to compile their own libraries just to get reasonably sized images on Windows. This utility is becoming the default in CLI 5.0.0 as you may know. I was looking over the issues on the sharp repo for this and it sounds like there isn't a good solution. Will Windows builds for libvips include libimagequant any time soon?
I made a separate issue for the quality option BTW: https://github.com/ionic-team/cordova-res/issues/13