Avoiding Generation Loss with Web Images

Everyone knows what happens if you make a photocopy of a photocopy: The quality deteriorates with each subsequent copy. This phenomenon is called “generation loss.” In theory, digital images shouldn’t suffer from this problem, since a file can be copied and should remain bit-for-bit identical to the original.

But, some commonly used lossy formats – like JPEG – often behave like photocopiers, particularly if you open the JPEG file in an image editor and resave it. During that process, some information can be lost and compression artifacts can accumulate. Make too many copies of a lossy image format file, and the image will eventually degrade significantly.

Despite being one of the oldest image formats, JPEG isn’t the only one that suffers these problems. 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, but it 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, such as rotating or resizing it.

There are two primary ways to prevent generation loss in your web images:

1. Keep the Number of Generations as Close to One as Possible.
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.

2. Don’t Use a Lossy Format.
When editing images, it is best to store the original and intermediate images using lossless image formats (PNG, TIFF, FLIF) or native image editor formats (PSD or XCF). Once you’re done editing, then you can save 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.

Sometimes using a lossless format is not an option. For example, when you find an image on the internet that you want to reuse and edit, chances are the image is a JPEG file, and the original is not available. In this case, you can track down the image using Google Image Search in an attempt to find the earliest generation, i.e. the oldest and highest resolution version of the image.

An effective image management solution can help you avoid the photocopier effect. With the solution, you should be able to upload the highest resolution, highest quality original image you have available (lossless if possible), especially if you’re using automatic format selection. It should also keep your original image as is (adding zero generation loss), and then directly encode each derived image from that original.

If you take this approach with your image management, you will be able to futureproof your image assets. If you ever need higher image qualities and/or resolutions in the years to come, or new image formats become available, it will be an effortless change.