Mobile Image Processing at Velocity SC, 2015

Mobile Image Processing at Velocity SC, 2015

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 Velocity SC 2015 in Santa Clara, CA on May 29, 2015.

A9a379f2e92c7ded4564190c5b286b78?s=128

Tim Kadlec

May 29, 2015
Tweet

Transcript

  1. 3.
  2. 5.
  3. 12.
  4. 13.
  5. 26.
  6. 27.
  7. 28.
  8. 29.
  9. 30.
  10. 31.
  11. 32.
  12. 33.
  13. 34.
  14. 39.
  15. 45.
  16. 50.
  17. 51.

    R: 65 G: 47 B: 35 A: 1 R: 26

    G: 26 B: 29 A: 1 R: 30 G: 29 B: 32 A: 1
  18. 52.
  19. 57.
  20. 58.
  21. 59.

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

    Jen Fitzpatrick VP of product management for Google Maps
  22. 63.
  23. 68.

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

    230,000 wasted bytes
  24. 69.

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

    70,000 wasted bytes 230,000 wasted bytes
  25. 74.
  26. 76.
  27. 78.
  28. 80.
  29. 81.
  30. 82.
  31. 83.
  32. 84.
  33. 85.
  34. 86.
  35. 87.

    4

  36. 88.

    4 4

  37. 90.
  38. 91.
  39. 92.
  40. 93.
  41. 94.

    4

  42. 95.

    4 2

  43. 97.
  44. 98.
  45. 99.
  46. 100.
  47. 101.
  48. 102.

    4

  49. 103.

    4 1

  50. 105.
  51. 106.
  52. 107.
  53. 108.
  54. 109.
  55. 110.

    4

  56. 111.

    4 2

  57. 113.
  58. 114.
  59. 115.
  60. 116.
  61. 119.

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

    SUBSAMPLE_LEVEL x 2)
  62. 122.
  63. 123.
  64. 124.
  65. 125.
  66. 126.
  67. 127.
  68. 131.
  69. 133.
  70. 142.

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

    browsers get better we just keep filling everything up. ” Jeff Veen
  71. 146.

    RESIZE IMAGES 1 2 META VIEWPORT IS YOUR FRIEND 3

    SMALL BREAKPOINTS FOR LARGE IMAGES
  72. 147.

    RESIZE IMAGES 1 2 META VIEWPORT IS YOUR FRIEND 3

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