Efficient Android Images Presented by Lucas Nelaupe 18th March, 2019 

Agenda Today’s topic Self Introduction Bitmap Drawable Vector drawable New API update Q&A 

Self Introduction Who am I and where I work ? /lucasnelaupe Lucas Nelaupe Android developer @ Grab (Consumer Experience) Working on Grab Passenger App 

Bitmap drawable Large and efficient Images 

Display a full screen bitmap Case of study: Grab banner image 1. Impact on APK size 2. Memory footprint 

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 

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 

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) 

Color precision per pixel and memory footprint Full HD Image: 2,073,600 pixels 

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 

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 

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) 

Android Vector Drawable Differences with SVG and tradeoff 

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 

How VectorDrawable works M move to L line to C (cubic bezier) curve to Z close (line to first point) 

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. 

Common problems with VectorDrawable Follow Lint warning Vector is constrained by - “android:width” : max 200dp - “android:height” : max 200dp - “android:parth”: max 1000 char 

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 

Code snippet to detect possible issues Regex to detect problematic VectorDrawable Detect too large path Detect large VectorDrawable 

Result on our App 20% reduction of crashes due to OutOfMemory 

What’s new ? New API Images 

Deprecated way of loading images Old fashion way 

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 

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 

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 

Thank-you for your attention Questions Feedback Comments