Since the rise of responsive web design, sites have become increasingly filled with large images, and are expected to look just as good on a five-inch smartphone as they do on a twenty-seven-inch monitor. This often creates images and file sizes that are larger than the ideal and slow down page load speed, which can become problematic on cell phones with limited data plans or capped networks. Unfortunately, if a site takes several seconds to load, a user will likely bounce before the content can be displayed.
At WTM Digital, all new sites go through a rigorous checklist process by both the development and SEO teams. Page load speed is often one of the hardest issues to tackle. If compressing a site’s header image saves a quarter of the file size but makes the image look grainy and dull, is it worth it? This balance is often difficult to reach and can result in some serious questions about your site’s priorities.
Why is image compression important?
JPEG is twenty-five-year-old technology and is ready for a modern replacement, or an improvement that is faster and more efficient. Luckily, solutions are coming. While this is by no means a complete list of new compression technology, there has been a significant buzz about three new types of file compression (HEIF, Guetzli, and mozjpeg) that may very well replace or improve JPG as the de facto compression algorithm in the future.
HEIF Image Compression
H.265 is a popular compression format for videos, and HEIF (high-efficiency image format) is the still image version of that technology. Tests have shown that images compressed with HEIF are about half the size of the equivalent JPEG, and look sharper, with better colors. Additionally, HEIF supports image transparency and sequences of images, meaning it could also be a replacement format for PNG and GIF, as well.
Recently, Apple announced that HEIF would be the image compression of choice for iOS 11 and macOS High Sierra. This is relevant because the iPhone’s camera is one of the most popular and widely used cameras in the world, and the iPhone makes up a significant portion of mobile web traffic.
Image Courtesy of Nokia Tech
Nokia Tech’s Github page has sample HEIF comparison images, showing the superior quality and lower file sizes, and Kelly Thompson has provided some before and after HEIF images demonstrating the technology.
It is important to note that HEIF is not owned by Apple, though they are the largest company to adopt it. Support for HEIF across devices is still limited, and at launch, the iPhone will convert HEIF images to JPEG for sharing across the web.
Guetzli Compression
Guetzli, which stands for “cookie” in Swiss German, is an open-source image encoder developed by Google that uses JPEG compression and promises 20-30% smaller image sizes. While not an entirely new image format, it does offer some significant benefits over HEIF. It is supported by Google, promising fast adoption, and is available now for implementation on sites. Since Guetzli uses the JPEG format, any browser or software that can read existing JPEG images can read images using this compression. Because Guetzli is backed by Google, it is likely to take off and be widely supported across the web.
There aren’t many downsides to Guetzli, and though there are some equal JPEG competitors, Guetzli’s free, open-source model provides an edge. However, Guetzli image processing is very (very) slow and CPU intensive, but can be installed server side for behind-the-scenes compression.
Image Courtesy Google Research Blog. Guetzli compression on the right.
To learn more about Guetzli, read Google’s press release, where they offer detailed explanations of the software as well as provide sample images.
mozjpeg
Developed by Mozilla in 2014, mozjpeg is similar to Guetzli in that it uses the standard JPEG format but improves on compression file sizes and is compatible with every modern browser. It was designed specifically to be used for the web and reduce bandwidth and supports progressive loading. From our internal tests, file sizes between Guetzli and mozjpeg compressed images were very similar. Guetzli took significantly longer to encode, sometimes several minutes instead of a few seconds with mozjpeg, with similar visual fidelity.
mozjpeg on the left. Image by Ibrahim.ID (Psarisomus dalhousiae – Kaeng Krachan.jpg) [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons
Read more about mozjpeg on the Mozilla blog.
What should you do?
It’s important to note that adopting cutting-edge technologies can be risky. While HEIF may be the long-term winner of the compression war, mozjpeg and Guetzli are the safer bet at the moment, and can be implemented immediately with more backwards compatibility. Because of the slow compression times and indistinguishable differences, we believe mozjpeg is the current winner, and will be implementing this compression on all of our new web development projects. Guetzli will likely continue to develop and get faster, but until it compresses images at smaller sizes or better visuals than mozjpeg, we believe it is too early for full-scale adoption.