As you probably know, images — in particular JPEGs — make up the vast majority of a web page’s overall size. The other elements — text, stylesheets, scripts — usually account for just a few percent of the total page size. When you load a modern news website like ExtremeTech, it’s not unusual for a single page to consist of a few megabytes of data, most of which are images. If the file size of images could be reduced by just a few percent, huge speed gains and bandwidth savings could be realized — for home and office surfers, but more importantly for people on woefully constrained and metered mobile data connections. Mozilla’s latest effort, mozjpeg, aims to do that just, by reducing the size of JPEGs by 10% or more.
The JPEG (Joint Photographic Experts Group) file format has been around since 1992. It wasn’t originally designed for the web (the World Wide Web as we know it didn’t exist until 1993, and didn’t become truly popular until the late ’90s), but it quickly became the de facto standard for web images due to its small file size and acceptably shitty quality. There has been some competition throughout the ages – GIFs, which date back to 1987, were popular in the early days of CompuServe and web, and PNGs, which were developed as an alternative to GIFs in 1996, have done okay — but really, JPEG’s popularity has never significantly waned.
The problem is, JPEG is old. The standard has remained virtually unchanged in over 20 years, despite the fact that the state of the art for compression algorithms is now much more advanced. If JPEG had been designed today, the file size would probably be half that of current JPEGs, while retaining the same image quality. Of course, various groups have tried to introduce new, more efficient file formats — such as Google’s WebP — but they’ve always been hamstrung by a lack of support. Say what you like about JPEG’s shortcomings, but the fact that just about every device and browser in the world can display JPEGs is a huge reason for its continuing reign. What good is a new file format if you can only view it in Chrome? Furthermore, why would a website developer ever use a file format that only 30% of his audience can view? Unseating an incumbent technology is hard.
What you can do, though, is tweak the JPEG compression algorithm slightly. By being clever, you make file sizes a bit smaller, while still retaining compatibility with those billions of JPEG-rendering devices and browsers. Enter
mozjpeg. “We wondered if JPEG encoders have really reached their full compression potential after 20+ years,” Josh Aas says on the Mozilla Research blog.
“We talked to a number of engineers, and concluded that the answer is
‘no,’ even within the constraints of strong compatibility requirements.”
Average total transfer size, for the top 100 websites
Average image transfer size, for the top 100 websites. As you can see, it’s around 60% of the website’s total transfer size.
Version 1.0 of
mozjpeg is a fork of libjpeg-turbo (a popular open-source JPEG library), with Loren Merritt’s jpgcrush
functionality built in. Without affecting compatibility, if you use
mozjpeg to create your images, you should be able to reduce JPEG file
size by a full 10%. If you consider that the average web page has around
1MB of images on it — and that figure is growing by 2-3% every month,
thanks to faster internet connections and high-res displays — then a 10%
reduction is huge. Over a month, if you primarily use your smartphone
for surfing websites, a 10% reduction in JPEG size could equate to
hundreds of megabytes saved.To make this a reality, image editors — like Photoshop, Gimp, and Fireworks — need to implement this new mozjpeg library. That will take time, but it’s much more realistic than getting every browser to support WebP or another alternate image standard. Mozilla isn’t stopping at a 10% reduction in file size, too — using trellis quantization, and perhaps even more advanced methods, it should be possible to squeeze good ol’ humble JPEG by a few more percentage points.
No comments:
Post a Comment