Cloudinary Blog

ImageCon 2018 Speaker Ryan Cooke, Pinterest on Delivering a Better Mobile Experience

Pinterest on Delivering a Better Mobile Experience: ImageCon 2018

For our first in a series of Q&A posts with our ImageCon 2018 speakers, we spoke with Ryan Cooke, a Software Engineer and Android Developer at Pinterest, a site that serves up billions of images everyday. In the following post he discusses why improving mobile images was important for improving the user experience and offers advice on building a mobile-first site.

Check back later this week for our next speaker post and follow all things ImageCon on Twitter at #ImageCon2018.

What were the issues that drove Pinterest to test different ways of delivering "better" mobile images?

As we expanded to international markets Android was becoming our most popular app, so we really started going above and beyond to improve its quality. One thing that stood out was when iOS users tried the Android app they immediately noticed the images looked worse, and they were right. Seeing as we serve billions of images everyday this seemed like an opportunity for improvement. We were able to be really laser-focused on how images could be better. Our first couple of changes really showed an improved user experience, so we were able to justify that image quality matters, and eventually we were able to take what we learned from Android back to other platforms.

What advice would you provide developers building a mobile-first site?

My personal take is to build as little from scratch as you can. Use the tried and tested patterns, third party libraries, etc. This will let you get moving fast and will likely give you an infrastructure that won't completely need to be rewritten. New hires may even be able to work with familiar tools. In regards to image loading specifically, I'd recommend using one of the existing third party client side tools (on Android: Picasso, Glide, Fresco; on iOS: PinRemoteImage) to handle the heavy lifting. If your app is really image heavy and you expect to be doing a lot of work on making the images the best they can be it may be worth adding a wrapper around the library so you can replace it with your own or another one as the need arises.

Are the lessons learned from your experience applicable to other sites and if so what would those be?

My biggest takeaway is that good image prefetching and caching makes a big impact on how the user sees your app. On a lot of apps it is very easy for a developer to already have the images ready for the user before the user would see them. Think of something like a movie ticket app, where they show the poster for the movie. There are like 20 images total the app will display at any time and it would be easy to have those loaded before I scroll to it, but they don't. The result is even on a high quality network I see the placeholder and then the content loading over the placeholder. The content changing will often draw my eye because it is motion, but it's probably not what the developer wants the user to be looking at. Overall it gives a subconscious feeling of a slow site and something not quite done. Our users at Pinterest still sometimes see placeholder images, but through clever prefetching they see them less and less.

Recent Blog Posts

CoreMedia Adds Cloudinary to its CoreMedia Studio Platform

Today we’re pleased to announce a new technology partnership with CoreMedia, a leading Content Experience Platform provider. CoreMedia users can now leverage Cloudinary’s web-based digital asset management (DAM) solution to organize, search, manage and optimize their media assets, including images and videos, and to orchestrate, preview and deliver digital experiences consistently and optimized across all channels and browsers. The official press release is available here.

Read more
Facial-Surveillance System for Restricted Zones

In Africa, where Internet access and bandwidth are limited, it’s not cost-effective or feasible to establish and maintain a connectivity for security and surveillance applications. That challenge makes it almost impossible to build a service that detects, with facial-recognition technology, if someone entering a building is authorized to do so. To meet the final-year research requirement for my undergraduate studies, I developed a facial-surveillance system. Armed with a background in computer vision, I decided to push the limits and see if I could build a surveillance system that does not require recording long video footage.

Read more
Complex Networks Case Study

Complex Networks has been using Cloudinary since 2014 to manage and optimize images across seven websites and two mobile apps, making editorial workflow more efficient, improving page performance and load time, and increasing user engagement. Cloudinary was instrumental in enabling Complex Networks to redesign its web properties. Without the flexibility that Cloudinary offers to both creative and development teams, it would not have been possible for Complex Networks to achieve such a fast time to market.

Read more
Automate Placeholder Generation and Accelerate Page Loads

If you run a Google search on LQIP you’ll see very few relevant articles, very little guidance, and definitely no Wikipedia articles. In this post, we’ll discuss some of the feedback on LQIP we have gathered from the community and suggest and open for conversation a few approaches based on the built-in capabilities of the Cloudinary service. Specifically, we’ll explain what LQIP are, where they are best used, and how you can leverage them to accelerate page loads and optimize user experience.

Read more
Best Practices for Optimizing Web Page Speed

If you're like most consumers today, you engage more with pictures or videos on a website than text. The stats don't lie - four times as many visitors would rather watch a video about a product than read about it, and sites with compelling images average twice as many views as text-heavy ones.

Read more
A day of fun with Girls Who Code and Cloudinary

During both my computer science studies and work in the tech field, there have not been a lot of women present. While our ranks have grown, women still make up only a small percentage. In many ways, I think the traditionally male-dominated world can be intimidating to women and girls who may be interested in pursuing these types of tech careers.

Read more