Mobile Image Processing at London Web Perf Meetup, 2016

A9a379f2e92c7ded4564190c5b286b78?s=47 Tim Kadlec
February 11, 2016

Mobile Image Processing at London Web Perf Meetup, 2016

Loading images isn’t as simple as you think. We often discuss image weight and download time, but mobile devices deal with many other challenges, such as decode times in underpowered CPUs, limited CPU/GPU transfers, and memory consumption. In this talk we’ll explain those limitations, their impact, and how you can best handle them on your own site.

Presented at London Web Perf Meetup in London, UK on Feb 11, 2015.

A9a379f2e92c7ded4564190c5b286b78?s=128

Tim Kadlec

February 11, 2016
Tweet

Transcript

  1. 3.
  2. 5.
  3. 13.
  4. 14.
  5. 15.
  6. 28.
  7. 29.
  8. 30.
  9. 31.
  10. 32.
  11. 33.
  12. 34.
  13. 39.
  14. 45.
  15. 46.
  16. 48.
  17. 50.
  18. 51.
  19. 52.
  20. 53.
  21. 57.
  22. 58.
  23. 59.

    R: 45 G: 48 B: 46 A: 1 R: 177

    G: 167 B: 157 A: 1 R: 190 G: 187 B: 181 A: 1
  24. 60.
  25. 65.
  26. 66.
  27. 67.
  28. 69.
  29. 71.
  30. 72.

    “…25% of new Android phones have only 512MB of RAM.”

    Jen Fitzpatrick VP of product management for Google Maps
  31. 75.
  32. 78.

    (600 x 600 - 550 x 550) x 4 =

    230,000 wasted bytes
  33. 79.

    (200 x 200 - 150 x 150) x 4 =

    70,000 wasted bytes 230,000 wasted bytes
  34. 84.
  35. 87.
  36. 89.
  37. 91.
  38. 92.
  39. 93.
  40. 94.
  41. 95.
  42. 96.
  43. 97.
  44. 98.

    4

  45. 99.

    4 4

  46. 101.
  47. 102.
  48. 103.
  49. 104.
  50. 105.

    4

  51. 106.

    4 2

  52. 108.
  53. 109.
  54. 110.
  55. 111.
  56. 112.
  57. 113.

    4

  58. 114.

    4 1

  59. 116.
  60. 117.
  61. 118.
  62. 119.
  63. 120.
  64. 121.

    4

  65. 122.

    4 2

  66. 124.
  67. 125.
  68. 126.
  69. 127.
  70. 128.
  71. 131.

    (W x H x 3) - (W x H x

    SUBSAMPLE_LEVEL x 2)
  72. 137.
  73. 138.
  74. 139.
  75. 140.
  76. 141.
  77. 142.
  78. 143.
  79. 144.
  80. 148.
  81. 150.
  82. 158.
  83. 162.
  84. 163.
  85. 164.
  86. 165.
  87. 166.
  88. 167.
  89. 168.
  90. 169.

    “…as bandwidth grows, and as processing power grows, and as

    browsers get better we just keep filling everything up. ” Jeff Veen
  91. 173.

    RESIZE IMAGES 1 2 META VIEWPORT IS YOUR FRIEND 3

    SMALL BREAKPOINTS FOR LARGE IMAGES
  92. 174.

    RESIZE IMAGES 1 2 META VIEWPORT IS YOUR FRIEND 3

    USE 4:2:0 SUBSAMPLING 4 SMALL BREAKPOINTS FOR LARGE IMAGES