Fresco is an image loading library that can greatly improve the performance and memory usage of displaying images in Android apps. It uses techniques like progressive JPEG, focus point cropping, and animations to load images efficiently in the background without blocking the UI. Many large apps like Facebook and Wikipedia use Fresco to display images smoothly while keeping memory usage low. Fresco provides up to a 90% reduction in image loading errors compared to default image loading approaches in Android.

2. Fresco: saving a century a
day
Tyrone Nicholas
Software Engineer

3. Demo

4. Source: https://www.redfin.com/blog/2015/10/using-fresco-to-load-images-efficiently-on-android.html

5. Source: run_comparison script, Moto G, KitKat. Results will vary with different devices, images, and network
conditions.

6. - Redfin
“Fresco allowed us to greatly improve the
performance and memory usage of displaying
images…
“By switching to Fresco, we’ve seen a whopping 90%
reduction in [image loading] errors.”
Our users report

7. Apps using Fresco
Facebook
apps
Cross-platform frameworks
Other apps
Wikipedia
Best App
s
Memrise

8. • UI draws 60 frames per
second
• =~16 ms/frame
• On all devices
Keeping ahead of the UI

9. Images are big, devices are small
• 800 x 1280 pixels
• 4 bytes per pixel
• ~3.9 MB
• 1 GB RAM
• … but only 48 MB heap!
Samsung Galaxy Tab
2

10. Memory
Default:
Java (GC)
Image courtesy of: TripAdvis
or

11. The secret sauce

12. Progressive JPEG

13. Focus Point Cropping

14. Animations

15. The Image
Pipeline
JPG
BMP
BMP JPG
JPG
JPG
UI thread Non-UI threads

16. DraweeVie
w
Show
placeholder
image
Show
actual
image
Fade-in
animation
Scale
Round
Scale
Round
Show
failure
image
Round
Scale
Load from
image
pipeline
Worked
?
Last
scan?
No
Yes
No
Update
progress
bar
Tap to
Retry

17. <com.facebook.drawee.SimpleDraweeView
android:id="@+id/my_image_view"
android:layout_width="100dp"
android:layout_height="100dp"
/>
Picasso.with(context)
.load("http://i.imgur.com/DvpvklR.png")
.into(imageView);
Converting from other libraries
<ImageView
android:id="@+id/my_image_view"
android:layout_width="100dp"
android:layout_height="100dp"
/>
draweeView.setImageURI("http://i.imgur.com/DvpvklR.png");

18. http://www.frescolib.org
Twitter: @tyronen