Bitmap management like a boss

1. Bitmap management like a boss! Somkiat Khitwongwattana

2. What is Bitmap? The class represent a bitmap image.

3. imageView.setImageResource(R.drawable.image_rocket)

4. Bitmap Image  File UI Decode Render

5. Bitmap Image  File UI Decode Render CPU

6. Bitmap Image  File UI Decode Render GPU

7. Why should we care about Bitmap? • Make the app more beautiful • Everywhere in the app • Consume a lot of memory • Main causes of the OOM error

8. Memory Consumption

9. Heap

10. Heap

11. Bitmap Heap

12. Bitmap Heap

13. Bitmap Heap Bitmap

14. Bitmap Heap Bitmap GC

17. Bitmap Heap Bitmap Bitmap

18. Bitmap Heap Bitmap Bitmap Out of memory

19. Drawable Resource

20. drawable image_rocket.jpg 800 x 800 pixels

21. XXXHDPI

22. XXXHDPI LDPI MDPI HDPI XHDPI XXHDPI XXXHDPI 3 4 6 8 12 16 x0.75 x1 x1.5 x2 x3 x4 Scaling Ratio MultiplierDensity

23. XXXHDPI LDPI MDPI HDPI XHDPI XXHDPI XXXHDPI 3 4 6 8 12 16 x0.75 x1 x1.5 x2 x3 x4 Scaling Ratio MultiplierDensity

24. XXXHDPI image_rocket.jpg 800 x 800 3,200 x 3,200 !!

25. drawable-ldpi image_rocket.jpg 150 x 150 pixels drawable-mdpi image_rocket.jpg 200 x 200 pixels drawable-hdpi image_rocket.jpg 300 x 300 pixels drawable-xhdpi image_rocket.jpg 400 x 400 pixels drawable-xxhdpi image_rocket.jpg 600 x 600 pixels drawable-xxxhdpi image_rocket.jpg 800 x 800 pixels

26. The image will not be scaled by dpi drawable-nodpi image_rocket.jpg 800 x 800 pixels

27. LDPI MDPI HDPI XHDPI XXHDPI XXXHDPI 120dpi 160dpi 240dpi 320dpi 480dpi 640dpi

28. 140dpi 180dpi 200dpi 220dpi 260dpi 280dpi 300dpi 29 29 29 29 25 22 25 340dpi 360dpi 400dpi 420dpi 440dpi 560dpi 600dpi 25 23 19 23 28 21 29 Density API Level Density API Level

29. 140dpi 180dpi 200dpi 220dpi 260dpi 280dpi 300dpi mdpi hdpi hdpi hdpi xhdpi xhdpi xhdpi 340dpi 360dpi 400dpi 420dpi 440dpi 560dpi 600dpi xxhdpi xxhdpi xxhdpi xxhdpi xxhdpi xxxhdpi xxxhdpi Density Reference Density Reference

30. 140dpi 180dpi 200dpi 220dpi 260dpi 280dpi 300dpi x0.875 x1.125 x1.25 x1.375 x1.625 x1.75 x1.875 340dpi 360dpi 400dpi 420dpi 440dpi 560dpi 600dpi x2.125 x2.25 x2.5 x2.625 x2.75 x3.5 x3.75 Density Medium Multiplier Density Medium Multiplier

31. 140dpi 180dpi 200dpi 220dpi 260dpi 280dpi 300dpi x0.875 x0.75 x0.8333 x0.916 x0.8125 x0.875 x0.9375 340dpi 360dpi 400dpi 420dpi 440dpi 560dpi 600dpi x0.7083 x0.75 x0.8333 x0.875 x0.9166 x0.875 x0.9375 Density Reference Multiplier Density Reference Multiplier

32. 420dpi

33. drawable-xhdpi image_rocket.jpg 400 x 400 pixels drawable-xxhdpi image_rocket.jpg 600 x 600 pixels drawable-xxxhdpi image_rocket.jpg 800 x 800 pixels 420dpi

34. drawable-xhdpi image_rocket.jpg 400 x 400 pixels drawable-xxhdpi image_rocket.jpg 600 x 600 pixels drawable-xxxhdpi image_rocket.jpg 800 x 800 pixels 420dpi

35. 420dpi drawable-xxhdpi image_rocket.jpg 600 x 600 pixels 525 x 525 pixels x0.875

36. Pixel Format in Bitmap

37. ALPHA_8 Only alpha value, no color information Bitmap.Config.ALPHA_8 1 pixel required 1 byte

38. ARGB_4444 4-bit RGB with alpha, low quality Bitmap.Config.ARGB_4444 1 pixel required 2 bytes

39. RGB_565 5-bit for blue and red and 6-bit for green without alpha, common use for do not require high color fidelity Bitmap.Config.RGB_565 1 pixel required 2 bytes

40. ARGB_8888 8-bit RGB with alpha, common use for the quality Bitmap.Config.ARGB_8888 1 pixel required 4 bytes

41. RGBA_F16 16-bit RGB with alpha, wide-gamut and HDR content Bitmap.Config.RGB_F16 1 pixel required 8 bytes

42. HARDWARE Store the values in graphic memory, to draw the bitmap on a screen only Bitmap.Config.HARDWARE

43. ALPHA_8 ARGB_4444  RGB_565 ARGB_8888  RGBA_F16 HARDWARE 1 2 2 4 8 - 1 1 1 1 26 26 Byte Per Pixel API LevelFormat

44. ALPHA_8 ARGB_4444  RGB_565 ARGB_8888  RGBA_F16 HARDWARE Format Alpha value only Poor quality Common use Common use  Wide-gamut and HDR content Store in Graphic Memory only Description

45. Why 6-bit green in RGB_565? 5-bit red 6-bit green 5-bit blue

46. Why 6-bit green in RGB_565? Human eye is more sensitive to gradations of green than blue and red (actually yellowish-green)

47. 100px 100px

48. Total 100 x 100 = 10,000 px 100px 100px

49. ARGB_8888 10,000 x 4 = 40 KB RGB_565 10,000 x 2= 20 KB

51. 4,048 x 3,036 px ~12MP

52. 4,048 x 3,036 px ~12MP ARGB_8888 ~48MB RGB_565 ~24MB

53. Transparency Image ARGB_8888 Opaque Image RGB_565 balance quality & memory ARGB_8888 best for quality

54. ARGB_8888 ALPHA_8 Tint Memory Usage 100% Memory Usage 25%

55. Efficiently Decoding

56. BitmapFactory.decodeResource(...) BitmapFactory.decodeResourceStream(...) BitmapFactory.decodeFile(...) BitmapFactory.decodeFileDescriptor(...) BitmapFactory.decodeStream(...) BitmapFactory.decodeByteArray(...)

57. val options = BitmapFactory.Options().apply { inPreferredConfig = Bitmap.Config.RGB_565 inSampleSize = 2 } val resId = R.drawable.lovely_cat val bitmap = BitmapFactory.decodeResource(resources, resId, options)

61. Full Size 1/2 Size 1/4 Size inSampleSize=1 inSampleSize=2 inSampleSize=4

62. 1st Pixel inSampleSize

63. Calculate inSampleSize private fun calculateInSampleSize( outHeight: Int, outWidth: Int, reqWidth: Int, reqHeight: Int ): Int { var inSampleSize = 1 if (outHeight > reqHeight || outWidth > reqWidth) { val halfHeight: Int = outHeight / 2 val halfWidth: Int = outWidth / 2 while (halfHeight / inSampleSize >= reqHeight && halfWidth / inSampleSize >= reqWidth ) { inSampleSize *= 2 } } return inSampleSize }

64. Calculate inSampleSize private fun calculateInSampleSize( outHeight: Int, outWidth: Int, reqWidth: Int, reqHeight: Int ): Int { var inSampleSize = 1 if (outHeight > reqHeight || outWidth > reqWidth) { val halfHeight: Int = outHeight / 2 val halfWidth: Int = outWidth / 2 while (halfHeight / inSampleSize >= reqHeight && halfWidth / inSampleSize >= reqWidth ) { inSampleSize *= 2 } } return inSampleSize }

65. Decode Bitmap private fun decodeBitmapFromResource( resources: Resources, resId: Int ): Bitmap { val options = BitmapFactory.Options().apply { inPreferredConfig = Bitmap.Config.RGB_565 inMutable = true inJustDecodeBounds = true BitmapFactory.decodeResource(resources, resId, this) inJustDecodeBounds = false inSampleSize = calculateInSampleSize( outWidth, outHeight, imageView.width, imageView.height ) } return BitmapFactory.decodeResource(resources, resId, options) }

67. Decode Bitmap private fun decodeBitmapFromResource( resources: Resources, resId: Int ): Bitmap { val options = BitmapFactory.Options().apply { inPreferredConfig = Bitmap.Config.RGB_565 inMutable = true inJustDecodeBounds = true BitmapFactory.decodeResource(resources, resId, this) inJustDecodeBounds = false inSampleSize = calculateInSampleSize( outWidth, outHeight, imageView.width, imageView.height ) } return BitmapFactory.decodeResource(resources, resId, options) } ~1ms

70. Density ... val options = BitmapFactory.Options().apply { inPreferredConfig = Bitmap.Config.RGB_565 inMutable = true inJustDecodeBounds = true BitmapFactory.decodeResource(resources, resId, this) inJustDecodeBounds = false inSampleSize = calculateInSampleSize( outWidth, outHeight, imageView.width, imageView.height ) inDensity = outWidth inTargetDensity = imageView.width * inSampleSize } ...

71. Density ... val options = BitmapFactory.Options().apply { inPreferredConfig = Bitmap.Config.RGB_565 inMutable = true inJustDecodeBounds = true BitmapFactory.decodeResource(resources, resId, this) inJustDecodeBounds = false inSampleSize = calculateInSampleSize( outWidth, outHeight, imageView.width, imageView.height ) inDensity = outWidth inTargetDensity = imageView.width * inSampleSize } ...

72. Filtering inDensity & inTargetDensity

73. Full Size 1/2 Size 3/8 Size inSampleSize inDensity

74. Bitmap is Parcelable

75. val bitmap = ... val intent = Intent(this, ViewerActivity::class.java) intent.putExtra("image", bitmap) startActivity(intent)

76. TransactionTooLargeException (larger than 1MB)

77. Do not put the Bitmap in Bundle to passing to another component.

78. Save an image to internal storage then send the path to another component.

79. Internal Storage Activity A Activity B Bitmap

81. Internal Storage Activity A Activity B Bitmap Path

86. val bitmap = ... val outputStream = ByteArrayOutputStream() bitmap.compress(Bitmap.CompressFormat.JPEG, 100, outputStream)

87. Bitmap JPEG (100% Quality) Compress

88. Bitmap JPEG (100% Quality) Compress 2MB 7KB Size depend on image's detail

89. Base64 string

90. val bitmap = ... val outputStream = ByteArrayOutputStream() bitmap.compress(Bitmap.CompressFormat.JPEG, 100, outputStream) val base64 = Base64.encodeToString( outputStream.toByteArray(), Base64.DEFAULT )

91. • Base64 string 135% larger than byte array • Compressed to JPEG or PNG before encoding • Do not encode base64 from bitmap directly

92. Image Decoder Next generation of bitmap decoding

93. val source = ImageDecoder.createSource(resources, resId) val bitmap = ImageDecoder.decodeBitmap(source) { decoder, _, _ -> run { val width = imageView.measuredWidth val height = imageView.measuredHeight decoder.setTargetSize(width, height) decoder.setPostProcessor { canvas: Canvas -> ... } } } imageView.setImageBitmap(bitmap)

94. ImageDecoder is available in Android 9.0 Pie or higher version

95. ImageDecoder in AndroidX? "We are planning a Support Library for ImageDecoder" Someone from Google Team 8 May 2018 https://issuetracker.google.com/issues/78041382

96. Hard to understand? Don't worry, me too!

97. The god of image loading and caching for Android

98. Thank you! @akexorcist

Bitmap management like a boss

Recommandé

Recommandé

Contenu connexe

Similaire à Bitmap management like a boss

Similaire à Bitmap management like a boss (20)

Plus de Somkiat Khitwongwattana

Plus de Somkiat Khitwongwattana (18)

Dernier

Dernier (20)

Bitmap management like a boss