optimize images to generate previews on facebook

#Optimize images to generate previews on facebook how to
#Optimize images to generate previews on facebook download

From that blur radius, we were then able to compute the lowest-resolution image that would still give us the desired final image. Given the final frosted-glass effect we want to achieve on the client, we can determine the required blur radius for our Gaussian filter. On one extreme, if we send down just the average color of all the pixels in an image (aka the DC components of an image), that would require only a single “pixel” of 3 bytes - one byte each for RGB! We knew we needed higher resolution than just one pixel, but how few pixels could we get away with? Image resolution and compressionĬlearly, the more we blur our images, the lower resolution we need and the more we can compress. The more we are willing to blur the displayed image, the smaller our source image can be. Band-limiting essentially means throwing away detail and quickly changing information in the original source image. The nice thing about this blurring filter, besides looking good, is that it “band-limits” the signal. What was the lowest resolution we could use? How would we compress the image? How would we display that image on the client? This is where things got interesting.ĭisplaying the image was the most straightforward part: The frosted-glass look is relatively easy to achieve with a Gaussian blur filter. Having decided on the desired user experience, we needed to figure out the technical details to make it happen. We felt that a frosted-glass “impression” of an image would provide something both visually interesting and consistent with the original image.

#Optimize images to generate previews on facebook how to

The challenge now became how to squeeze a cover photo into 200 bytes!

#Optimize images to generate previews on facebook download

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. 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. 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. It was determined that if we could shrink a cover photo down to 200 bytes, it could efficiently be delivered via the GraphQL response. 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. 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. To address these issues, we asked ourselves if we could create a visual impression of the image using only 200 bytes. We needed to attack both of these problems simultaneously. The latency of this second network request can be quite long, typically much longer than the first network request. Then, to actually get the image, it uses that URL to make a second network request to the CDN to get the image bytes. Before downloading a picture, the application makes a network request for the picture’s URL from the GraphQL server. That’s a lot of data when you realize that 2G connections might be transferring data as slowly as 32 KB/second. First, cover photos often reach 100 KB, even after JPEG compression. The cover photo is one of the most visible parts of these surfaces, yet it’s also one of the slowest to load. We initially focused on the cover photo, the beautiful, high-resolution picture at the top of profiles and pages.

Our engineering team took this on as a challenge: What could we design and build that would leave a much better first impression? This is a problem in developing markets such as India, where many people new to Facebook are primarily using 2G networks. This is especially true on low-connectivity or mobile networks, which often leave you staring at an empty gray box as you wait for images to download. These pictures are an integral part of the Facebook experience, but sometimes they can be slow to download and display. Some of the first things you see when you visit someone’s profile or page on Facebook are the pictures. First impressions matter, whether you’re on a first date, in a job interview, or just choosing new decorations for your house.