Facebook’s Method of Compressing Images

As a social networking website, photos form the heart and soul of Facebook. As such, no matter what page you load while browsing Facebook, pictures cannot be ignored. In fact display pictures and cover photos are some of the very basic building blocks of Facebook’s layout model.

And as the world’s largest social network Facebook is used by a wide audience, ranging from people using high speed internet connections in metropolitan cities to folks relying on 2G internet connections in remote areas.

So if photos fail to load then the browsing experience suffers. Recently the engineers at Facebook came up with a solution for this problem.

Prelude

First take a look at the cover photo. It’s quite natural for cover photos to reach 100 to 200 KB in size simply because these are higher resolution and are shown as a full image rather than a thumbnail. For all practical purposes 200KB is hardly anything – but if you were to browse via 2G internet on a slower mobile device, loading a 200KB image will become a painful experience.

There’s not much that can be done about the connection speed, but Facebook chose to focus on the other side of the problem.

Before a picture loads the application makes a network request for the concerned picture’s URL from the GraphQL server. Thereafter that picture’s URL is used to make a new request, this time to the Content Delivery Network, in order to fetch the actual image.

alt=”facebook CDN network images graphql”>

Compression Solutions

To solve this problem and improve load times across slower networks the team at Facebook created a visual impression of each image. Essentially since GraphQL cannot handle full image data, the image itself was shrunk down to 200 bytes so it could be delivered via the GraphQL response.

The CDN could happen in the background simultaneously offering better page load times even on 2G networks.

To get a realistic comparison look no further than JPEG image compression. By eliminating the original header and using a predefined JPEG header the image easily compressed down to 200 bytes. The server would then send this 200 bytes as part of the GraphQL response.

Talking Points

The Facebook team has come up with a novel solution for improving page load times and overall UX for users who are stuck with a slower internet connection. By doing away with the image size the page load speed has increased by roughly 30%.

You can read more about their experiment here.

There are some lessons we can learn from this.

Even though the current file format trend is in favor of SVG and even PNG, JPG images can still do a great job when it comes to compression.

Also in my view, while this experiment worked for Facebook, I do not think it can be scaled well for other projects. Certain extreme cases and usage scenarios could put more strain on the compression algorithm & server environment. While this image compression technique is a step forward it is surely not a catch-all solution.

What do you think of Facebook’s recent compression experiment? Share your views in the comments below!