How Facebook Cover Images Appear Quickly on Mobile Devices

How does Facebook ensure that its mobile users see cover images, and not gray boxes, especially in developing countries where 2G connections are common?

How does Facebook ensure that its mobile users see cover images, and not gray boxes, especially in developing countries where 2G connections are common?

Director of engineering Brian Cabral and engineer Edward Kandrot used a post on Facebook’s engineering blog to describe the process of taking cover photos that can run as large as 100 kilobytes and displaying them as mere 200-byte images.

Cabral and Kandrot explained why the social network’s engineering team undertook this project:

We initially focused on the cover photo, the beautiful, high-resolution picture at the top of profiles and pages. The cover photo is one of the most visible parts of these surfaces, yet it’s also one of the slowest to load. There were two big reasons for this. First, cover photos often reach 100 KB, even after JPEG compression. That’s a lot of data when you realize that 2G connections might be transferring data as slowly as 32 KB per second. The second reason is subtler. Before downloading a picture, the application makes a network request for the picture’s URL from the GraphQL server. Then, to actually get the image, it uses that URL to make a second network request to the CDN to get the image bytes. The latency of this second network request can be quite long, typically much longer than the first network request. We needed to attack both of these problems simultaneously.

As for why they chose 200 bytes as the optimal image size, they wrote:

To address these issues, we asked ourselves if we could create a visual impression of the image using only 200 bytes. Why 200 bytes? In order to remove that second network request, we needed to include some facsimile of the image itself in the initial network request. This in turn meant that the image had to be part of the GraphQL response, but GraphQL isn’t designed to handle full-size image data. It was determined that if we could shrink a cover photo down to 200 bytes, it could efficiently be delivered via the GraphQL response. The cool thing about this solution, if successful, was that it addressed both the small byte requirement and the need for a second network request in one fell swoop.

We estimated that this would allow us to display the preview photo in our very first drawing pass, reducing the total latency to display profiles and page headers significantly. Eventually, we still want to download and display the full-size image from the CDN, but this can be done in the background while ensuring that the user experience still feels snappy and enjoyable. The challenge now became how to squeeze a cover photo into 200 bytes!

70KBTo200B

For extensive technical details on the process, please see the blog post. Cabral and Kandrot were happy with the results:

In our data, we saw big improvements. For people on a slow connection, this helped speed up profile and page loads by 30 percent. Even on the fastest connections, this ensured that people would always see a cover photo preview immediately, making their overall experience more seamless. It took a lot of creativity to make it happen, but thanks to everyone’s hard work, it paid off!

Readers: Have you ever lost your patience waiting for photos on Facebook to load on your mobile devices?

BlurAndScaleToPreviewPhoto

Image of woman with mobile phone courtesy of Shutterstock.