The problems with resaving JPEGs
In this video, you can see what happens to image quality when you re-encode a JPEG image many times. JPEG offers quality settings that result in a trade-off between compression and visual quality. But if you just save the JPEG at a high enough quality setting, there won’t be a problem, right? Not exactly. Information that is lost when JPEGs are re-saved cannot be magically recovered. So if you take a JPEG image that was saved with a quality of 70, then re-saving it with a quality of 90 will, of course, not make the image look any better. In fact, it will even be worse. Every additional JPEG encoding will introduce additional loss, even if it is done at a higher quality setting than the original JPEG. To understand this problem, we have to appreciate how this format uses several mechanisms to reduce the file size of an image, some of which don’t accumulate while others do. The first is a color space transformation. Digital images are typically represented as pixels containing three separate 8-bit RGB (red, green, blue) values, which are statistically correlated in most images. For example, in a grayscale image, the three channels are completely identical. So if image compression is the goal, RGB is not the best representation. Instead, JPEG uses the YCbCr color space. The Y channel is called luma (the intensity of the light, i.e. the grayscale image), the two other channels, Cb and Cr, are called chroma (the color components). Besides decorrelating the pixel information, this color transformation has another advantage: The human eye is more sensitive to luma than it is to chroma, so in lossy compression, you can get away with more loss in the chroma channels than in the luma channel. The color space transformation itself already introduces some loss, due to rounding errors and limited precision. If you transform an image containing all 16.7 million different colors from RGB to YCbCr and back, and then count the number of different colors, you’ll end up with only about 4 million different colors; most of the loss is in the red and blue channels.

Issues with other image formats
You might expect that JPEG suffers from generation loss because it is a 25-year-old file format, and newer formats are better. But that’s not so. Modern image formats, such as WebP (released in 2010) or BPG (released in 2014) suffer even more from generation loss than JPEG. WebP and BPG use variable-sized, larger macroblocks, which is good for compression, but can result in an error in one part of the image more easily propagating to other parts of the image. This does not mean that WebP and BPG are bad image formats, you just have to be careful in how you use them. FLIF is a lossless image format that outperforms other lossless image formats. FLIF also has a lossy encoder that modifies the image so that the lossless compression works better on it. It is much less sensitive to generation loss because the format itself is lossless. Generation loss commonly occurs when you significantly modify the image between generations, for example by performing a rotation or resizing. The color space of FLIF is YCoCg, which does not introduce loss, and there is no chroma subsampling, nor transformation to DCT that introduces rounding errors. Instead of using quantization, FLIF rounds small values to zero and discards a number of bits. This works because the values it encodes are differences (between predicted pixel values and actual pixel values), not absolute values (of DCT coefficients).Avoiding generation loss
There are only two ways to avoid generation loss:- Keep the number of generations as close as possible to 1—the generation count has a larger impact on the image quality than the actual quality settings you use. (For example, if you save an image first with a JPEG quality of 85 and then re-save it with a quality of 90, the result will actually be more lossy than if you saved it only once with a quality of 80.)
- Don’t use a lossy format—when editing images, it is best to store the original and intermediate images using lossless image formats like PNG, TIFF, FLIF, or native image editor formats like PSD or XCF. Only when you’re done should the final image be saved using a lossy format like JPEG to reduce the file size. If you later change your mind and want to do some further editing, you can go back to the lossless originals and start from there. When this is not an option—say, you find an image on the internet that you want to edit and reuse, chances are the image is a JPEG file, and the original cannot be found. In this case, one thing you can do is track down the image using Google Image Search, and try to find the earliest generation, i.e. the oldest and highest resolution version of the image.
WDD Staff
WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.
Read Next
3 Essential Design Trends, December 2023
While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…
10 Easy Ways to Make Money as a Web Designer
When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…
By Louise North
The 10 Most Hated Fonts of All Time
Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…
15 Best New Fonts, November 2023
2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…
By Ben Moss
Old School Web Techniques Best Forgotten
When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…
By Simon Sterne
20 Best New Websites, November 2023
As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…
30 Amazing Chrome Extensions for Designers and Developers
Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…
By Robert Reeve
Exciting New Tools for Designers, November 2023
We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…
The Dangers of Doomscrolling for Designers and How to Break Free
As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…
By Louise North
From Image Adjustments to AI: Photoshop Through the Years
Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…
By Max Walton
3 Essential Design Trends, November 2023
In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…
30 Obsolete Technologies that will Perplex Post-2000s Kids
Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…