Cloudinary Blog

FLIF, the new lossless image format that outperforms PNG, WebP and BPG

Lossless Image Formats Comparison: FLIF vs.PNG, WebP and BPG

A fresh new lossless image format has recently been introduced. It is called FLIF, which is an acronym for Free Lossless Image Format. According to the creators of FLIF, it is supposed to significantly outperform the other image formats that have lossless modes, such as PNG, WebP and the new BPG format.

At Cloudinary, we always seek to seamlessly leverage the best optimized image formats for any of the different use cases for web and mobile applications. Therefore, we quickly added support for FLIF: uploading of FLIF files and dynamic conversion of any image format to FLIF or from FLIF.

In addition, we wanted to verify FLIF performance using real life examples of our customers' user images. We performed a benchmark test and compared the generated FLIF file size with the other lossless image formats. The benchmark results are detailed below.

Webinar
How to Optimize for Page Load Speed

Why do you need an efficient lossless image format?

JPEG is the most popular format for uploading and downloading images efficiently. However, JPEG is a lossy format, which means that there is a trade off between the file size and the loss of visual quality. A lossless format allows you to keep the original images intact in your backend and decide later on regarding which lossy compression to use when delivering images and thumbnails to your users.

In addition, the most popular lossy format for photos is the JPEG format, which has no alpha channel support and therefore doesn't support semi or fully transparent pixels, which are required by common graphic design practices (see PNG optimization - saving bandwidth on transparent PNGs with dynamic underlay).

The PNG format is usually used in such cases. It is lossless, so the original image is saved as is, it has a wide color space (in contrast to the 256 colors of GIFs) and it has an alpha channel for supporting the different opacity levels of pixels in images. However, when you save photos using PNG, the generated files are huge, compared to lossy formats such as JPEG. This affects the storage space required for saving the original images as well as the bandwidth consumed in uploading and downloading these images, negatively impacting the user experience as well as increasing the IT costs involved.

Finding a way to save images without compromising on quality while having the smallest possible file, is definitely important for the modern web and mobile world. A few modern image formats aim to solve this problem and provide the best algorithm for storing images losslessly in the most efficient way. FLIF is the newest format to join this arena.

Benchmark results - FLIF is the winner

As mentioned above, we wanted to compare FLIF with the other image formats. In order to make the comparison, we used images that were uploaded to the Cloudinary accounts of our customers. We have more than 70,000 developers signed-up to Cloudinary's service, managing their sites and applications images, so we have quite a nice diversity of actual image files.

We took uploaded PNG images only. While most of the images uploaded to Cloudinary are JPEG images, there were about 1 Million PNG images that were uploaded in the last few days. We randomly sampled 200,000 out of them.

We then converted the original PNG images to the following formats. By the way, all these formats and optimizations were already supported by Cloudinary, so converting them was a breeze.

  • Optimized PNG
  • Lossless WebP
  • Lossless BPG
  • FLIF

The results were indeed impressive. As you can see in the chart below, the average file size of images converted to FLIF was 43% smaller than the original PNG files.

FLIF benchmark - File size compared to original PNG images

Notice that the lossless PNG optimization, which Cloudinary implicitly applies on generated PNG images, also reflects a saving of about 18% of the original PNG files, but FLIF still beat the optimized PNG format by about 31% percent in our benchmark testing.

As you can see in the chart below, FLIF does indeed outperform the lossless modes of the modern BPG format and WebP format of Google.

FLIF benchmark - FLIF compared to other lossless formats

The two charts above compared the average of the compression ratios, but it is also interesting to compare the total bytes required for storing the 200K images using the different formats. You can see the results in the chart below. When looking at the total bytes of all the files together, the advantages of FLIF compared to PNG and WebP are more significant, while the advantages of FLIF compared to BPG are less significant.

FLIF benchmark - Total bytes of all images compared to original PNG images

But not all PNG images are the same. There might be drawings with just a small number of colors or photos with hundred of thousands of different colors. There might be small icons or large high resolution images. All these characteristics might affect the results of the various compression algorithms in different ways. Therefore, we wanted to check the results of our benchmark tests accordingly to the number of colors in the images, the file size (in bytes) and the resolution of the images (width X height).

The following chart shows the compression ratio compared to the original PNG images while the horizontal axis displays the percentile of the number of colors. As you can see, while the FLIF format is consistently better than the other formats for all percentiles, its advantage over the BPG format is bigger for images with a smaller number of different colors (e.g., drawings).

FLIF benchmark - By number of colors percentile - Compared to PNG

As mentioned above, we also checked the effect of the original file size on the results. You can see the results in the following chart. The WebP format is clearly the second best, but while the overall results shows just a 4% saving of FLIF compared to WebP, for bigger image files the difference becomes about 10%.

FLIF benchmark - By file size percentile - Compared to PNG

The last chart below shows the results according to the percentile of the image resolution (in pixels). The results remain consistent, but we can see that the higher the image resolution, the more significant the FLIF format advantage, especially compared to the original PNG format or the optimized PNGs. The same goes for WebP where FLIF's advantage is bigger for hi-res images.

FLIF benchmark - By resolution percentile - Compared to PNG

Upload, convert and manipulate FLIF images

In order to run the benchmark tests detailed above, we used Cloudinary's dynamic image manipulation and conversion capabilities, while support for FLIF was added.

To convert previously uploaded images of any format to FLIF, simply set the file extension of Cloudinary's on-the-fly manipulation URLs to .flif. The following example URL delivers a FLIF version of an image uploaded to our demo account.

This image as a PNG weighs about 283KB, while using FLIF it weighs only 139KB, which means that we saved about 51% of file size and bandwidth requirements.

PNG image with alpha channel

Ruby:
Copy to clipboard
cl_image_tag("business_man_clipped.flif")
PHP v1:
Copy to clipboard
cl_image_tag("business_man_clipped.flif")
PHP v2:
Copy to clipboard
(new ImageTag('business_man_clipped.flif'));
Python:
Copy to clipboard
CloudinaryImage("business_man_clipped.flif").image()
Node.js:
Copy to clipboard
cloudinary.image("business_man_clipped.flif")
Java:
Copy to clipboard
cloudinary.url().imageTag("business_man_clipped.flif");
JS:
Copy to clipboard
cloudinary.imageTag('business_man_clipped.flif').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("business_man_clipped.flif")
React:
Copy to clipboard
<Image publicId="business_man_clipped.flif" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="business_man_clipped.flif" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="business_man_clipped.flif" >

</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("business_man_clipped.flif")
Android:
Copy to clipboard
MediaManager.get().url().generate("business_man_clipped.flif");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("business_man_clipped.flif")!, cloudinary: cloudinary)

FLIF images can also be generated for manipulated images, such as thumbnails. The following example URL dynamically generates a 250x250 face detection based circular thumbnail (with a transparent background). The PNG result weighs 63.2KB, while FLIF requires just 43KB, which means a saving of 32%.

Cropped PNG image with alpha channel

Ruby:
Copy to clipboard
cl_image_tag("business_man_clipped.flif", :width=>250, :height=>250, :gravity=>"face", :radius=>"max", :crop=>"thumb")
PHP v1:
Copy to clipboard
cl_image_tag("business_man_clipped.flif", array("width"=>250, "height"=>250, "gravity"=>"face", "radius"=>"max", "crop"=>"thumb"))
PHP v2:
Copy to clipboard
(new ImageTag('business_man_clipped.flif'))
  ->resize(Resize::thumbnail()->width(250)->height(250)->gravity(Gravity::focusOn(FocusOn::face())))
  ->roundCorners(RoundCorners::max());
Python:
Copy to clipboard
CloudinaryImage("business_man_clipped.flif").image(width=250, height=250, gravity="face", radius="max", crop="thumb")
Node.js:
Copy to clipboard
cloudinary.image("business_man_clipped.flif", {width: 250, height: 250, gravity: "face", radius: "max", crop: "thumb"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(250).height(250).gravity("face").radius("max").crop("thumb")).imageTag("business_man_clipped.flif");
JS:
Copy to clipboard
cloudinary.imageTag('business_man_clipped.flif', {width: 250, height: 250, gravity: "face", radius: "max", crop: "thumb"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("business_man_clipped.flif", {width: 250, height: 250, gravity: "face", radius: "max", crop: "thumb"})
React:
Copy to clipboard
<Image publicId="business_man_clipped.flif" >
  <Transformation width="250" height="250" gravity="face" radius="max" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="business_man_clipped.flif" >
  <cld-transformation width="250" height="250" gravity="face" radius="max" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="business_man_clipped.flif" >
  <cl-transformation width="250" height="250" gravity="face" radius="max" crop="thumb">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(250).Height(250).Gravity("face").Radius("max").Crop("thumb")).BuildImageTag("business_man_clipped.flif")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(250).height(250).gravity("face").radius("max").crop("thumb")).generate("business_man_clipped.flif");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(250).setHeight(250).setGravity("face").setRadius("max").setCrop("thumb")).generate("business_man_clipped.flif")!, cloudinary: cloudinary)

You can also use the Cloudinary API to upload FLIF images and then dynamically convert them to any lossless or lossy format, such as JPG or WebP. In addition, you can upload any regular image formats and tell Cloudinary to store them as FLIF in the cloud for saving storage space. Here's such an upload command for example:

Ruby:
Copy to clipboard
Cloudinary::Uploader.upload("sample.jpg", :format => "flif")
PHP:
Copy to clipboard
\Cloudinary\Uploader::upload("sample.jpg", 
  array("format" => "flif"));
Python:
Copy to clipboard
cloudinary.uploader.upload("sample.jpg",
  format = "flif")
Node.js:
Copy to clipboard
cloudinary.uploader.upload("sample.jpg", 
  function(result) { console.log(result); }, 
  { format: "flif" });
Java:
Copy to clipboard
cloudinary.uploader().upload("sample.jpg", 
  ObjectUtils.asMap("format", "flif"));

Bottom line

It's exciting to see new innovative image formats joining the web and mobile world. As shown in the benchmark results above, FLIF indeed delivers better results than PNG, BPG and WebP. In addition, the fact that FLIF is a free (released under GPL version 3) open source format, has interesting advantages over the patented proprietary formats owned by the software giants.

The main pitfall of new formats like FLIF is the fact that web browsers don't support them yet. There is a polyfill solution for displaying FLIF images in popular browsers, but it's mainly useful for demo purposes and not yet for actual production usage.

However, FLIF is already useful for saving storage space in your backend instead of storing PNG files, for example when using Cloudinary for managing your images. In addition, if you have a native mobile application, you can first convert images to FLIF before uploading them to the cloud, making uploading up to about 50% faster and also improving user experience by delivering FLIF files to your application instead of the good old PNG format.

If you want to try out FLIF using Cloudinary, it is available in all our plans, including the free tier.

Recent Blog Posts

Create Lightweight Sites With Low-Code and No-Code Technology

Consumers expect modern websites to be mainly visual. But, the more compelling and complex the related media is, the more data is involved, compounding the site’s weight. In today’s content-craving world, delivering unoptimized media can cost you because it leads to sluggish page loads, resulting in visitors abandoning your site in search of a faster alternative. In fact, a page load that takes more than three seconds can cause as many as 40% of your visitors to bounce. Given this competitive, digital-first environment, you can’t afford to lose page views, for time is of the essence.

Read more
A Blueprint for AWS-Secured Webhook Listeners for Cloudinary

tl;dr: An AWS-secured and optimized Cloudinary webhook listener for extending the Cloudinary service

Code: Github

A webhook is a communication medium for sending notifications from one platform to another about events that occurred. In place are user-defined HTTP callbacks that are triggered by specific events. When a triggered event takes place on the source site, the webhook listens to the event, collects the data, and sends it to the URL you specified in the form of an HTTP request.

Read more
New Accessibility Features for Cloudinary’s Product Gallery Widget

Cloudinary’s Product Gallery widget, which launched in 2019, has enabled many brands to effectively and efficiently showcase their products in a sleek and captivating manner, saving countless hours of development time and accelerating release cycles. By adding Cloudinary’s Product Gallery widget with its customizable UI to their product page, retailers reap numerous benefits, often turning visitors into customers in short order.

Read more
Why Successful Businesses Engage With and Convert Audiences With Visual Media

Most business buyers prefer to research purchase options online, as do many shoppers. No wonder online retail sales in the U.S. rose by 32.4% in 2020—an impressive gain of $105 billion.

For B2B and B2C businesses, text-heavy websites are no longer adequate in attracting shoppers. Instead, engaging visual media—spin images, videos, 3D models, augmented reality—are becoming a must for conveying eye-catching details and differentiators about products or services.

Read more
Making User-Generated Content (UGC) Shoppable With Cloudinary

User-generated content (UGC) is a powerful marketing tool. Not only does video complement marketing efforts for e-commerce by enabling customers to explore products in greater detail, but UGC also adds an element of trust. As a bonus, user-generated video is an exceptional opportunity for e-businesses to attract website traffic without their marketing team having to create promotional videos from scratch. User-generated content drives conversions and brand loyalty as a direct result of authentic interaction.

Read more