Efficient Android Images

Bitmap memory management and Android Vector drawable tradeoff.

1. Bitmap images memory footprint and optimisation: Bitmap pool / Color configuration / Hardware bitmap.
2. Android vector drawable tradeoff: Performance and limitation of rendering and scaling complex vector drawables

https://www.meetup.com/kotlinsg/events/259591175/

Transcript

1. Efficient Android Images Presented by Lucas Nelaupe 18th March, 2019
2. Agenda Today’s topic Self Introduction Bitmap Drawable Vector drawable New API update Q&A
3. Self Introduction Who am I and where I work ? /lucasnelaupe Lucas Nelaupe Android developer @ Grab (Consumer Experience) Working on Grab Passenger App
4. Bitmap drawable Large and efficient Images
5. Display a full screen bitmap Case of study: Grab banner image 1. Impact on APK size 2. Memory footprint
6. Common Image optimization tools Website and libraries that can optimize PNG for you PNGQuant, ImageMagick , PNGGauntlet, PNGOut, PNGCrush, OptiPNG, CryoPNG, PNG Compressor, Yahoo Smush.it, PNGOptimizer, PunyPNG, TinyPNG, PNGWolf, Advpng, DeflOpt, Defluff, Huffmix, TruePNG, PNGnq-s9, Median Cut Posterizer, scriptpng, pngslim, zopfliPNG
7. How it works: PNG optimization Few steps for a tinier APK Reducing Colors: Reducing the number of unique colors in your image Filtering: Reduce dynamic by how variant adjacent pixel colors are to each other. Deflate: Remove redundant informations Indexed images: Chooses the best 256 colors to use, and replaces all your pixels with an index into that color palette. Result: Reduction from 16 million colors (24bpp) to 256 More info: https://medium.com/@duhroach/8473480d0476
8. Memory Impact to display a Full HD image Full HD Image: 1920x1080 (2,073,600 pixels) Simple case: Black and white Image 1 Bit per pixel (0: White, 1: Black) Total memory used: 2,073,600 bit (0.26MB)
9. Color precision per pixel and memory footprint Full HD Image: 2,073,600 pixels
10. Color precision per pixel and memory footprint Hardware bitmap Introduced in Android O Store pixel data only in graphics memory Only use half of the memory compare to RGG_8888 for the exact same result More Info: https://bumptech.github.io/glide/doc/hardwarebitmaps.html
11. Bitmap caching and bitmap pool LRUcache (Least Recently Used): In-memory cache, - keep the final bitmap - Avoid redundant computation Bitmap Pool: Keep dirty bitmap - Reuse old image memory space - SDK 19: Bitmap pool support different images dimensions More info: https://medium.freecodecamp.org/49efa5c93ad8
12. Keep it simple and use a library Library like Glide and Fresco implement all those optimisation. Fresco: #1 choice (Created by Facebook) - Most advanced but complex APIs Glide: Best compromise (Recommended by Google) - LRUcache - Bitmap pool - Hardware bitmap / Pixel Color configuration - Gif support Picasso: Lightweight but outdated - (Spoiler alert: Wait for Picasso 3)
13. Android Vector Drawable Differences with SVG and tradeoff
14. Why VectorDrawable and not SVG SVG: Many complex capabilities like - Blur and filter effects - Embedding other images - Animated gifs - Executing arbitrary javascript “Android runs on constrained mobile devices so supporting the entirety of the SVG spec wasn’t a realistic goal.” More info: https://medium.com/androiddevelopers/ab09e41d5c68
15. How VectorDrawable works M move to L line to C (cubic bezier) curve to Z close (line to first point)
16. Steps to render a vector drawable From XML to Bitmap 1. Inflation: Parse your AVD file into VectorDrawable modeling the the paths, groups etc you declare 2. Drawing: These model objects then have to be drawn by executing Canvas drawing commands. Steps are proportional to the complexity of the vector and the type of operations you perform Drawing stage only needs to be performed once and can then be cached to a Bitmap Vectors provide the aforementioned benefits but at the cost of being more expensive to render.
17. Common problems with VectorDrawable Follow Lint warning Vector is constrained by - “android:width” : max 200dp - “android:height” : max 200dp - “android:parth”: max 1000 char
18. Optimize your SVG and VectorDrawable Lossy SVG: Avocado and svgo libraries Optimisation: - Svgo for SVG - Avocado: for VectorDrawable Sets of algorithm to - Reduce complexity of path (3 digit of precisions) - Remove redundant or unnecessary informations [Note] Svgo: Implemented by default in zeplin
19. Code snippet to detect possible issues Regex to detect problematic VectorDrawable Detect too large path Detect large VectorDrawable
20. Result on our App 20% reduction of crashes due to OutOfMemory
21. What’s new ? New API Images
22. Deprecated way of loading images Old fashion way
23. New API: Image decoder Only on Android P ImageDecoder: Class for converting encoded images (like PNG, JPEG, WEBP, GIF, or HEIF) - Transformations Support - Error handling - Treading Create source object Convert to Bitmap or Drawable
24. New update: Picasso Picasso (library) is not dead Picasso 3.0 - Android P ready (Use ImageDecoder) - More efficient image loading - Still no support of BitmapPool :-( More Info: https://speakerdeck.com/jakewharton/rinsing-the-brush-picasso-3-dot-0-droidcon-nyc-2018
25. References Awesome list of great stuff https://medium.com/appnroll-publication/what-is-new-in-android-p-imagedecoder-animatedimagedrawable-a65 744bec7c1 https://medium.com/androiddevelopers/understanding-androids-vector-image-format-vectordrawable-ab09e41d 5c68 https://medium.com/androiddevelopers/using-vector-assets-in-android-apps-4318fd662eb9 https://medium.com/androiddevelopers/draw-a-path-rendering-android-vectordrawables-89a33b5e5ebf https://medium.freecodecamp.org/how-we-reduced-memory-footprint-by-50-in-our-android-app-49efa5c93ad8 https://speakerdeck.com/jakewharton/rinsing-the-brush-picasso-3-dot-0-droidcon-nyc-2018?slide=17 https://developer.android.com/reference/android/graphics/ImageDecoder https://github.com/alexjlockwood/avocado
26. Thank-you for your attention Questions Feedback Comments