46
edits
Changes
Created page with "* If possible, use a VectorDrawable (SVG can be converted to VectorDrawable) ** '''DO NOT USE VectorDrawable FOR IMAGES > 200DP''' - this is likely to result in performance is..."
* If possible, use a VectorDrawable (SVG can be converted to VectorDrawable)
** '''DO NOT USE VectorDrawable FOR IMAGES > 200DP''' - this is likely to result in performance issues due to the rendering required.
To optimise images (in this example we optimise foxfinder.png). Assuming the image resources are already in the correct locations (mobile/android/base/resources/drawable-[xx]hdpi
cd mobile/android/base/resources
* Investigate whether a solid background can be added, this allows removing the alpha channel
** This is only useful if all places where the image is used have the same background.
** Is unlikely to be worthwhile for icons (which should be VectorDrawable anyways) - this is more important for large images such as those used for onboarding.
find . -name foxfinder.png -exec convert {} -background "#F5F5F5" -alpha remove {} \;
* Run png optimisation tools (you may need to install these yourself, refer to your package manager for availability):
find . -name foxfinder.png -exec optipng -o7 {} \;
find . -name foxfinder.png -exec advdef -z4 {} \;
* Consider converting to webp - this can result in significant size savings
** '''Do not use webp for images containing transparency''': those are only supported on Android >= 4.3 (support was introduced with 4.2.1, but 4.2.0 isn't supported [https://developer.android.com/guide/appendix/media-formats.html]).
** '''Verify each image manually''', webp conversion can result in a loss of fidelity - edge artifacts are a particular issue with webp, and seem to affect computer generated images the most.
find . -name foxfinder.png -exec bash -c 'cwebp {} —c 90 -o ${x%.png}.webp' \;
* If webp conversion looks satisfactory, delete the png files, and clobber - both gradle and mach builds will trip up otherwise. Feel free to adjust the quality factor (-q 90) above until the images look acceptable.
== Example numbers ==
From [https://bugzilla.mozilla.org/show_bug.cgi?id=1319254 Bug 1319254]:
Original image (png): 166k
Optimised using optipng -o7 && advdef -z4: 118k
Removed alpha channel (solid background), then optimised as above: 94k
webp default (-q 75): 9k (was discarded)
webp acceptable quality (-q 90): 16k
** '''DO NOT USE VectorDrawable FOR IMAGES > 200DP''' - this is likely to result in performance issues due to the rendering required.
To optimise images (in this example we optimise foxfinder.png). Assuming the image resources are already in the correct locations (mobile/android/base/resources/drawable-[xx]hdpi
cd mobile/android/base/resources
* Investigate whether a solid background can be added, this allows removing the alpha channel
** This is only useful if all places where the image is used have the same background.
** Is unlikely to be worthwhile for icons (which should be VectorDrawable anyways) - this is more important for large images such as those used for onboarding.
find . -name foxfinder.png -exec convert {} -background "#F5F5F5" -alpha remove {} \;
* Run png optimisation tools (you may need to install these yourself, refer to your package manager for availability):
find . -name foxfinder.png -exec optipng -o7 {} \;
find . -name foxfinder.png -exec advdef -z4 {} \;
* Consider converting to webp - this can result in significant size savings
** '''Do not use webp for images containing transparency''': those are only supported on Android >= 4.3 (support was introduced with 4.2.1, but 4.2.0 isn't supported [https://developer.android.com/guide/appendix/media-formats.html]).
** '''Verify each image manually''', webp conversion can result in a loss of fidelity - edge artifacts are a particular issue with webp, and seem to affect computer generated images the most.
find . -name foxfinder.png -exec bash -c 'cwebp {} —c 90 -o ${x%.png}.webp' \;
* If webp conversion looks satisfactory, delete the png files, and clobber - both gradle and mach builds will trip up otherwise. Feel free to adjust the quality factor (-q 90) above until the images look acceptable.
== Example numbers ==
From [https://bugzilla.mozilla.org/show_bug.cgi?id=1319254 Bug 1319254]:
Original image (png): 166k
Optimised using optipng -o7 && advdef -z4: 118k
Removed alpha channel (solid background), then optimised as above: 94k
webp default (-q 75): 9k (was discarded)
webp acceptable quality (-q 90): 16k
