Cloudinary Blog

FUIF: New, Legacy Friendly Image File Format

FUIF: New, Legacy Friendly Image File Format

Part 1 of this series introduces the Free Lossy Image Format (FUIF), which I recently developed. Part 2 explains the why, what, and how of FUIF. This post, part 3 of the series, delves into how FUIF is legacy friendly, which I alluded to in Part 2.

A vast number of JPEG images exist out there, as well as devices that produce new JPEG images every day. If the only way to transcode a JPEG image to a new image file format is to decode the JPEG to RGB pixels (or to YCbCr) and encode that to the new format, then there’s a problem. The result is either a significant generation loss or new files that are actually larger than the originals.

Compatibility With JPEG

FUIF is compatible with JPEG in the sense that it supports the 8x8 discrete cosine transform (DCT) and the YCbCr color transform. That means FUIF can losslessly represent the actual information in JPEG images while still offering you most of its benefits, such as the following:

  • Responsive by design, not limited to a scale of 1:8
  • Minimal header overhead
  • Better compression results than those from JPEG, thanks to enhanced entropy coding

Comparing FUIF to Dropbox's Lepton, which also does lossless JPEG recompression, reveals that—

  • Lepton can usually obtain a somewhat better compression.
  • Lepton is faster.
  • Lepton is bit exact, not just image exact.

However, FUIF offers these benefits:

  • You can decode FUIF progressively. Lepton is “antiprogressive” because it encodes the AC coefficients before the DC coefficients.
  • You can enhance JPEGs, for example, by adding a lossless or lossy alpha channel to them.

Unlike JPEG XT, the FUIF bitstream is completely different from legacy JPEG and it is thus unreadable to JPEG decoders. Obviously, full backward compatibility is convenient but it has serious downsides. It implies that the compression density cannot be improved compared to legacy JPEG. It also means that none of the new features (like alpha or higher bit depth) are guaranteed to be rendered correctly since, at least initially, most decoders would simply ignore any extensions of the legacy JPEG bitstream. So, in my opinion, not being backward compatible is a better design choice.

While FUIF is not backward compatible with JPEG, it is “legacy friendly” in the sense that you can convert existing JPEG images losslessly and effectively to FUIF, potentially with added information like alpha or depth channels.

Effective Recompression of PNGs and GIFs

FUIF can also effectively recompress existing (animated or still) PNGs and GIFs. Those formats are lossless within their limitations so generation loss is not an issue. However, effectively recompressing them can be challenging for new image formats since the compression methods for PNGs and GIFs differ from those for most lossy formats. For example, for images or animations with few different colors, PNG or GIF can be smaller than JPEG even though they are lossless and JPEG is lossy.

You can effectively recompress PNGs and GIFs by means of two specific image transformations in FUIF:

  • Palette: Both PNG8 and GIF use a color palette of up to 256 colors, replacing the usual three-color channels with just a single palette-index channel. FUIF supports palettes of arbitrary sizes.
  • Matching: This second transformation removes repetitive pixel patterns in images or animations, encoding them just once and replacing the other occurrences with references. This mode results in compression gains similar to what you can obtain with the dictionary-style entropy encoding of PNG and GIF. Because this mode can also compensate for interframe motion, it also works well in animations.

You can encode FUIF-recompressed PNGs and GIFs in a progressive—and thus responsive—way, either lossless or lossy.

Resilience to Generation Loss

Being able to recompress JPEGs, PNGs, and GIFs effectively without introducing additional loss is one way in which FUIF preserves the legacy of the past. Another way in which FUIF is legacy friendly pertains to the future.

Ideally, lossy compression is applied only once on an image. You should edit only lossless images and, in the final step, apply lossy compression to make those image files smaller for distribution. In practice, however, lossless originals often get lost and all that’s available as source material for editing are lossy images.

Repeated lossy encoding leads to generation loss, also called the “photocopier effect.” Ironically, advanced, modern image file formats tend to suffer more from that problem than the older formats. That’s because the advanced formats use a stronger arsenal of compression tricks, which enable them to obtain better compression but which also frequently result in more serious cumulative errors.

Realistically, it’s hard to completely avoid generation loss in lossy compression. Nonetheless, you can minimize the loss with FUIF. Here is an enlightening demo that shows how FUIF and some other image file formats behave after 500 generations of recompression:

As you can see, FUIF is legacy friendly in two key ways: it can effectively recompress existing JPEG, PNG, and GIF images (the legacy of the past) without introducing additional loss, and it is resilient to generation loss (the legacy to the future). In the next post, I will talk about compression artifacts, including those for FUIF.

Note
The FUIF Code has now been made public.


Further Reading on Responsive Images

Recent Blog Posts

Cloudinary and Contentful Make Modern Content Management Easier

I am pleased to share that Cloudinary and Contentful have joined forces to further streamline the creation, processing, and delivery of online content through Cloudinary’s digital asset management (DAM) solution and advanced transformation and delivery capabilities for images and video. What’s more, the partnership delivers a headless approach to DAM. By leveraging APIs for media management tasks, marketers and developers alike benefit from an integrated stack of optimized assets for optimization and automation. As a result, page loads are fast and beautiful, and at scale—with less overhead and effort.

Read more
Introducing Cloudinary's Nuxt Module

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development. Not surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub and 96 active modules with over a million downloads per month. And the upward trend is ongoing.

Read more
How Quality and Quantity can go Hand in Hand

When it comes to quality versus quantity, you’ll often hear people say, “It’s the quality that counts, not the quantity”. While that’s true in many situations, there are also cases where you want both quality and quantity. You may have thousands of images on your website and you want them all to look great. This is especially important if your website allows users to upload their own content, for example, to sell their own products or services. You don't want their poor quality images to reflect badly on your brand.

Read more
Product Videos 101: What Makes Them Great?

A product’s benefits and usage, including its value proposition, features, and instructive details, are best demonstrated through video. Product-video types vary, depending on the funnel, channel, and audience, the most popular ones being demos, reviews, installation, and how-tos.

Read more