Ryan Cooke Software Engineer, Pinterest Moving Metrics with Better Mobile Images Pinterest users come for the images. Because of that, we care about making sure the images load well. This talk examines the tricks we do to serve users better images. These optimizations decreased how much time users spent waiting on images, increased user engagement and even resulted in more daily active users (DAU). We'll also look into some optimizations that looked powerful, but that we decided not to implement. This talk is given from the perspective of working on a native Android app, but the lessons are applicable anywhere you want to display images.

1. Moving Metrics with Better
Mobile Images
Ryan Cooke
Tech Lead, Pinterest

2. 2

3. • 35BillionImagesServedDaily
• 200+MillionMAU
• ~12A/BTests

4. © Copyright, All Rights Reserved, Pinterest Inc. 2017

5. Mobile Image Loading - Intro
5
WhyIsItDifficult?
• Usersdon’thaveimagesontheirphone
• Data
• NetworkQuality
• LoadTime
• DifferentScreenSizesandResolutions
• VariableandLimitedMemory
• Easilycauseframelostinscrolling
MobileImageLoading-Intro

6. Mobile Image Loading - Intro
6
WhatShouldEveryAppDo?
• Backgroundfetchingandprocessing
• Resizing
• Caching
• Placeholder
What’sthebestwaytodothis?
• ThirdPartyLibrary
• Android:Glide,Fresco,Picasso
• iOS:PinRemoteImage
MobileImageLoading-Intro

7. What do we want to do better?
7
LessMemoryUsage
• LessCrashes
• SmootherScrolling
LessWaitTime
• RegressionTests
• NimbleDroid
• Waittimelogging
BetterQuality
Whatdowewanttodobetter?

8. Prefetch
8
Prefetchgridimages
• Graballimageswecan
• Cancelunneededrequests
Results
• 4%morepinimpressions*
• IncreaseinDAU
• Generalengagementimprovements
• 10%moreOOMcrashes
PrefetchNo Prefetch
Prefetch

9. Prefetch
9
Justnextimages
• Insteadofgrabbingtheentirepageofimages
justprefetchthenextfewimages
Results
• 1%increaseinrepinsandgeneralengagement
• 10%lessOOMcrashes
Prefetch

10. Prefetch
10
DirectionalPrefetch
• Prefetchwhenscrollingupaswellasdown
Results
• Flatmetrics
Prefetch

11. Prefetch
11
WarmHTTPConnection
• Makearequesttotheimageserverasap
Results
• Small,butunambiguousengagementwins
• Biggerinlownetworkqualityregions
Prefetch

12. Prefetch
12
PrefetchHomefeed
• Grabthehomefeedwhentheappisn’tbeing
used
• Nottimesensitivedata
• Thinkaboutnetwork
• Thinkaboutchargestatus
Results
• 1%morepinimpressions
• 2%more“Browser”users
Prefetch

13. Less Memory
13
BitmapConfiguration
• BitmapConfiguration
• ARGB_8888
• RGB_565
• OlderDevices(API<21)
• ~15%ofandroidusers
ARGB_8888 RGB_565
Results
• Crashesdown25%
• Repinsup1%
• VolumeMetricsup1-2%
• BrazilVolumeMetricsup4-5%
LessMemory

14. Less Memory
14
DisableMemoryCache
• Onlywhenappisalmostoutofmemory
• Clear&Disable
• Re-enablewhenappisnolongercriticalon
memory
Results
• LessCrashes
• 1%dropinmostengagementmetrics
LessMemory

15. Less Memory
15
LowerImageQualitybased
onNetwork
• FacebookConnectionClass
• Measurebandwidthbasedonimages
• 3qualitylevels
Results
• 2%lesscrashes
• Tinydecreaseinengagement
LessMemory

16. Quality
16
SmartFetching
• Imagesservedtomatchresolutiondisplayed
• Predefinedbuckets
• Donotrefetchifresolutionchanges
• Networkawarenessalsoincluded
Results
• 3%morerepins
• Overalllotsmoreengagementspecially
interactingwiththeimage
• LotsmoreOOM
SMBC-comics.com
Quality

17. Quality
17
Differentthresholdsfor
loweringquality
• Twogroups
• Onlylowerqualityonverypoornetwork
• Lowerqualityonallnon-amazingnetworks
Results
• Reducedqualityimprovedperformance
• Noengagementgains
• Networknotahugefactorinearlierimprovements
• Keptcontrol
Quality

18. Quality
18
Webp
• Smallerimageswithoutqualityloss
• Shouldn’timprovememory
Results
• PerformanceLoss
•NeverShipped
Quality

19. Quality
19
ProgressiveJpeg
• Imagesloadinlayers
• DisabledoniOS
Results
• DelayedEffect
• Someengagementeffect
• lowqualitynetworkregions
Quality

20. • Getthebasicsright
• ServetherightsizeImage
• Prefetch
• ProgressiveJpeg
TakeAways

21. Questions
ryancooke@pinterest.com
https://twitter.com/the__Ryanator
We’re Hiring

22. © Copyright, All Rights Reserved, Pinterest Inc. 2017