Mobile/Fennec/Android/png optimisation

• 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
  • The information below is obsolete - you can just use Android 4.3 or newer: https://developer.android.com/studio/write/convert-webp.html
  • 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 [1]).
  • 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 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