{"id":21374,"date":"2016-05-04T15:25:32","date_gmt":"2016-05-04T15:25:32","guid":{"rendered":"http:\/\/why_jpeg_is_like_a_photocopier"},"modified":"2026-03-11T17:36:20","modified_gmt":"2026-03-12T00:36:20","slug":"why_jpeg_is_like_a_photocopier","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier","title":{"rendered":"Why JPEG is like a photocopier"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Generation loss, a term originally rooted in the world of analog media, refers to the quality degradation that occurs when audio or video is reproduced. In the context of analog tape and audio transfers, each copy of an original source is a new generation, and with each transfer, the quality inevitably declines. This degradation in analog media is due to factors like signal loss, physical abrasion, and electronic noise, characteristics distinct from digital generation loss.<\/p>\n<p>Interestingly, this concept of generational decline, though historically associated with analog formats, has parallels in the digital realm, particularly in digital imaging.<\/p>\n<p>If you make a copy of a copy of a copy, the quality will deteriorate with every \u2018generation\u2019. This problem is called \u2018generation loss\u2019. It is not difficult to understand why this happens with actual copier machines. Scanning and printing are not perfect, being based on noisy sensors and physical paper and ink, and the resulting noise will tend to accumulate.<\/p>\n<p>Digital images should theoretically not have this problem: a file can be copied over and over again, and it will still be bit-for-bit identical to the original.<\/p>\n<p>However, lossy image formats like JPEG can behave like photocopiers. If you simply copy a JPEG file, nothing changes, but if you open a JPEG file in an <a href=\"https:\/\/cloudinary.com\/tools\/image-editor\">image editor<\/a> and then save it, you will get a different JPEG file. The same happens each time an image is uploaded to, say, Facebook or Twitter: the image is re-encoded automatically (in the case of these two social networks, with a relatively low quality setting, to save on storage and bandwidth). Some information is lost in the process, and compression artifacts will start to accumulate. If you do this often enough, eventually the image will degrade significantly.<\/p>\n<p>In this article we\u2019ll take a deeper look at the generation loss of JPEG and other lossy image formats. We\u2019ll explain what causes it, and how it can be avoided.<\/p>\n<h2>What happens if you save a JPEG over and over again?<\/h2>\n<p>This is what happens if you re-encode a JPEG image many times:<\/p>\n<iframe loading=\"lazy\" width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/jjhomJ04S18?rel=0\" frameborder=\"0\" allowfullscreen style=\"max-width: 100%\"><\/iframe>\n<div>\n<div style=\"float: left; margin: 0 10px 0 0\">\n<div style=\"margin: 5px 0\"><strong>First encoding:<\/strong><\/div>\n<a target=\"_blank\"  href=\"https:\/\/res.cloudinary.com\/jon\/JPEG-copier-frame-00001.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"First encoding of JPEG\" src=\"https:\/\/res.cloudinary.com\/jon\/w_350\/JPEG-copier-frame-00001.jpg\" width=\"350\" height=\"197\"\/><\/a>\n<\/div>\n<div style=\"float: left; margin: 0 0 0 10px\">\n<div style=\"margin: 5px 0\"><strong>After 100 encodings:<\/strong><\/div>\n<a target=\"_blank\"  href=\"https:\/\/res.cloudinary.com\/jon\/JPEG-copier-frame-00100.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"After 100 JPEG encodings\" src=\"https:\/\/res.cloudinary.com\/jon\/w_350\/JPEG-copier-frame-00100.jpg\" width=\"350\" height=\"197\"\/><\/a>\n<\/div>\n<\/div>\n<div style=\"clear: both; margin: 0 0 15px 0\">\n<\/div>\n<div>\n<div style=\"float: left; margin: 0 10px 0 0\">\n<div style=\"margin: 5px 0\"><strong>After 1,000 encodings<\/strong><\/div>\n<a target=\"_blank\" href=\"https:\/\/res.cloudinary.com\/jon\/JPEG-copier-frame-01000.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"After 1,000 encodings\" src=\"https:\/\/res.cloudinary.com\/jon\/w_350\/JPEG-copier-frame-01000.jpg\" width=\"350\" height=\"197\"\/><\/a>\n<\/div>\n<div style=\"float: left; margin: 0 0 0 10px\">\n<div style=\"margin: 5px 0\"><strong>After 10,000 encodings:<\/strong><\/div>\n<a target=\"_blank\" href=\"https:\/\/res.cloudinary.com\/jon\/JPEG-copier-frame-10000.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"After 10,000 JPEG encodings\" src=\"https:\/\/res.cloudinary.com\/jon\/w_350\/JPEG-copier-frame-10000.jpg\" width=\"350\" height=\"197\"\/><\/a>\n<\/div>\n<\/div>\n<div style=\"clear: both\">\n<\/div>\n<p>JPEG has a \u2018quality\u2019 setting that allows you to make a trade-off between compression and visual quality. Lower quality settings will give you smaller files, at the price of discarding more image information. Higher quality settings result in larger files, but more information is retained so the resulting image is closer to the original.<\/p>\n<p>So if you just save the JPEG at a high enough quality setting, there won\u2019t be a problem, right?<\/p>\n<p>Sadly, no. Obviously, information that is already lost cannot be magically recovered. So if you take a JPEG image that was saved with a quality of, say, 70, then re-saving it with a quality of 90 will, of course, not make the image look any better. But here\u2019s the problem: 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.<\/p>\n<h2>Why does this happen?<\/h2>\n<p>To understand why JPEG works this way, we have to dig a little deeper into how JPEG actually works. The JPEG format uses several mechanisms to reduce the file size of an image, some of which don\u2019t accumulate while others do.<\/p>\n<p>First of all, JPEG uses a color space transformation. Digital images are typically represented as pixels containing three separate 8-bit RGB values (red, green, blue). That is how computer screens display their pixels: each of the three color channels can have 256 different levels of intensity, resulting in 16.7 million possible colors (256*256*256) if you consider all the different combinations of red, green and blue.<\/p>\n<p>These three RGB color channels 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 \u2018luma\u2019 (the intensity of the light, i.e. the grayscale image), the two other channels, Cb and Cr, are called \u2018chroma\u2019 (the color components).<\/p>\n<p>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.<\/p>\n<p>This 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\u2019ll end up with only about 4 million different colors. Most of the loss is in the red and blue channels.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/jon\/w_500\/RGB_YCbCr.png\" alt=\"https:\/\/res.cloudinary.com\/jon\/RGB_YCbCr.png\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"500\" height=\"417\"\/><\/p>\n<h3>Chroma subsampling<\/h3>\n<p>The YCbCr color transform by itself does not result in generation loss. It\u2019s a relatively small, one-time loss in color precision, but it does not accumulate. JPEG does something else too though: it does so-called \u2018chroma subsampling\u2019, often referred to with the somewhat cryptic notation 4:2:0 (<a href=\"https:\/\/cloudinary.com\/glossary\/chroma-subsampling\">chroma subsampling<\/a> is optional, but typically done by default). This means that only the Y channel is encoded at full resolution; for the two chroma channels Cb and Cr, the image resolution is cut in half both horizontally and vertically. In that way, instead of having chroma channels that take up two thirds of the information, they are reduced to one third of the total.<\/p>\n<p>Chroma subsampling does contribute to generation loss and can lead to so-called `color bleeding\u2019 or \u2018color drifting\u2019. Effectively, the chroma channels become increasingly blurry with each iteration of subsampling\/upsampling. For example, this is what happens if you take an image and save it with a JPEG quality of 100 with 4:2:0 chroma subsampling:<\/p>\n<div>\n<div style=\"float: left; margin: 0 5px 0 0\">\n<div style=\"margin: 5px 0\">Original:<\/div>\n<img loading=\"lazy\" decoding=\"async\" alt=\"Original\" src=\"https:\/\/res.cloudinary.com\/jon\/chroma_subsampling_original.png\" width=\"170\" height=\"170\"\/>\n<\/div>\n<div style=\"float: left; margin: 0 5px 0 5px\">\n<div style=\"margin: 5px 0\">After 1 encoding:<\/div>\n<img loading=\"lazy\" decoding=\"async\" alt=\"After 1 encoding\" src=\"https:\/\/res.cloudinary.com\/jon\/chroma_subsampling_1.png\" width=\"170\" height=\"170\"\/>\n<\/div>\n<div style=\"float: left; margin: 0 5px 0 5px\">\n<div style=\"margin: 5px 0\">After 100 encodings<\/div>\n<img loading=\"lazy\" decoding=\"async\" alt=\"After 100 encodings\" src=\"https:\/\/res.cloudinary.com\/jon\/chroma_subsampling_50.png\" width=\"170\" height=\"170\"\/>\n<\/div>\n<div style=\"float: left; margin: 0 0 0 5px\">\n<div style=\"margin: 5px 0\">After 1,000 encodings:<\/div>\n<img loading=\"lazy\" decoding=\"async\" alt=\"After 1,000 JPEG encodings\" src=\"https:\/\/res.cloudinary.com\/jon\/chroma_subsampling_100.png\" width=\"170\" height=\"170\"\/>\n<\/div>\n<\/div>\n<div style=\"clear: both\">\n<\/div>\n<p>This is one of the factors that can lead to generation loss. But we haven\u2019t discussed the real loss introduced by JPEG yet\u2026<\/p>\n<h3>Quantization<\/h3>\n<p>The details of how JPEG compression actually works \u2013 the Discrete Cosine Transform (DCT) in 8&#215;8 blocks \u2013 are a bit tricky to understand (if you\u2019re interested: the <a href=\"https:\/\/en.wikipedia.org\/wiki\/JPEG#Discrete_cosine_transform\">Wikipedia article on JPEG<\/a> is a good starting point). But the thing that is relevant for generation loss can be understood without needing to dig that deep. The core of JPEG compression is quantization, which is a very simple yet effective mechanism.<\/p>\n<p>How does it work? Suppose you want to compress some sequence of numbers \u2013 it doesn\u2019t really matter whether these numbers represent pixel values, DCT coefficients or something else. The amount of space you need to encode these numbers depends on how large the numbers are: for smaller numbers, less bits are needed.<\/p>\n<p>So how can you make those numbers smaller? The answer is simple: just divide them by some number (this number is called a \u2018quantization constant\u2019) in the encoder, and then multiply it again by that same number in the decoder. The larger this quantization constant, the smaller the encoded values will become, but also the more lossy the whole operation becomes, since we\u2019re rounding everything to integers here (otherwise the numbers wouldn\u2019t really become smaller).<\/p>\n<p>For example, suppose you want to encode the following sequence of numbers:<\/p>\n<table style=\"border: none; border-collapse: collapse;\"><colgroup><col width=\"122\" \/><col width=\"76\" \/><col width=\"78\" \/><col width=\"79\" \/><col width=\"79\" \/><col width=\"79\" \/><col width=\"79\" \/><\/colgroup>\n<tbody>\n<tr style=\"height: 0px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">Original:<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #dbdbff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">50<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #b7b7ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">100<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #9292ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">150<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #6e6eff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">200<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #4949ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">250<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #2525ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">300<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>If you use a quantization constant of 50, you can greatly reduce these numbers and still get back to the original sequence:<\/p>\n<table style=\"border: none; border-collapse: collapse;\"><colgroup><col width=\"109\" \/><col width=\"65\" \/><col width=\"68\" \/><col width=\"69\" \/><col width=\"69\" \/><col width=\"69\" \/><col width=\"69\" \/><col width=\"74\" \/><\/colgroup>\n<tbody>\n<tr style=\"height: 0px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">Encode:<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">1<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">2<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">3<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">4<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">5<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">6<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: right;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">times 50<\/span><\/p>\n<\/td>\n<\/tr>\n<tr style=\"height: 0px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">Decode:<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #dbdbff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">50<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #b7b7ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">100<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #9292ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">150<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #6e6eff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">200<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #4949ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">250<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #2525ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">300<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Most of the time, we will not be that lucky and we will get some loss, but the resulting values are still \u2018close enough\u2019. For example, if we use the quantization constant 100, we get even smaller numbers, at the cost of some loss:<\/p>\n<table style=\"border: none; border-collapse: collapse;\"><colgroup><col width=\"110\" \/><col width=\"63\" \/><col width=\"69\" \/><col width=\"69\" \/><col width=\"69\" \/><col width=\"69\" \/><col width=\"69\" \/><col width=\"74\" \/><\/colgroup>\n<tbody>\n<tr style=\"height: 0px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">Encode:<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">0<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">1<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">1<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">2<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">2<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">3<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: right;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">times 100<\/span><\/p>\n<\/td>\n<\/tr>\n<tr style=\"height: 0px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">Decode:<\/span><\/p>\n<\/td>\n<td style=\"border: 1px solid #cccccc; vertical-align: bottom; padding: 3px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">0<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #b7b7ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">100<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #b7b7ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">100<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #6e6eff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">200<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #6e6eff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">200<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #2525ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">300<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>As you can see, the \u2018smooth\u2019 sequence of numbers now became a not-so-smooth sequence of numbers. It\u2019s this kind of quantization effect that leads to so-called `color banding\u2019.<\/p>\n<p>The higher the quantization constant, the lower the image quality and the smaller the JPEG file. Quality 100 corresponds to the quantization constant 1, in other words, no quantization at all. For the sake of this example, suppose a JPEG quality of 70 corresponds to the quantization constant 60, while a JPEG quality of 80 corresponds to the quantization constant 35. Clearly, the quality 80 image will be closer to the original than the quality 70 image:<\/p>\n<table style=\"border: none; border-collapse: collapse;\"><colgroup><col width=\"108\" \/><col width=\"67\" \/><col width=\"68\" \/><col width=\"69\" \/><col width=\"69\" \/><col width=\"69\" \/><col width=\"69\" \/><col width=\"73\" \/><\/colgroup>\n<tbody>\n<tr style=\"height: 0px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">Quality 80 encode:<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">1<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">3<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">4<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">6<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">7<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">9<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: right;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">times 35<\/span><\/p>\n<\/td>\n<\/tr>\n<tr style=\"height: 0px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">Quality 80 decode:<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #e6e6ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">35<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #b3b3ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">105<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #9999ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">140<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #6666ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">210<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #4d4dff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">245<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #1a1aff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">315<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">&nbsp;<\/td>\n<\/tr>\n<tr style=\"height: 0px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">Original:<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #dbdbff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">50<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #b7b7ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">100<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #9292ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">150<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #6e6eff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">200<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #4949ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">250<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #2525ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">300<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">&nbsp;<\/td>\n<\/tr>\n<tr style=\"height: 0px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">Quality 80 error:<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ffb2b2; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">-15<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ffffe6; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">5<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ffcccc; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">-10<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ffffcd; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">10<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ffe5e5; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">-5<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ffffb3; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">15<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div style=\"margin: 20px 0\"><\/div>  \n<table style=\"border: none; border-collapse: collapse;\"><colgroup><col width=\"109\" \/><col width=\"65\" \/><col width=\"68\" \/><col width=\"69\" \/><col width=\"69\" \/><col width=\"69\" \/><col width=\"69\" \/><col width=\"74\" \/><\/colgroup>\n<tbody>\n<tr style=\"height: 0px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">Quality 70 encode:<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">1<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">2<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">2<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">3<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">4<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">5<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: right;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">times 60<\/span><\/p>\n<\/td>\n<\/tr>\n<tr style=\"height: 0px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">Quality 70 decode:<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #d4d4ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">60<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #a8a8ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">120<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #a8a8ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">120<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #7c7cff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">180<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #5151ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">240<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #2525ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">300<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">&nbsp;<\/td>\n<\/tr>\n<tr style=\"height: 0px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">Original:<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #dbdbff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">50<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #b7b7ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">100<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #9292ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">150<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #6e6eff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">200<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #4949ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">250<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #2525ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">300<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">&nbsp;<\/td>\n<\/tr>\n<tr style=\"height: 0px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">Quality 70 error:<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ffffcd; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">10<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ffff9a; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">20<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ff6666; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">-30<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ff9999; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">-20<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ffcccc; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">-10<\/span><\/p>\n<\/td>\n<td style=\"border: 1px solid #cccccc; vertical-align: bottom; padding: 3px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">0<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>In this case, the quality 80 sequence has a maximum error of 15 (and in general it cannot have a larger error than half of the quantization constant, so 17), while the quality 70 sequence has a maximum error of 30.<\/p>\n<p>But what happens if you take the quality 70 image, and re-encode it at quality 80? Now the \u2018original\u2019 is no longer the original sequence, but the decoded quality 70 image is:<\/p>\n<table style=\"border: none; border-collapse: collapse;\"><colgroup><col width=\"109\" \/><col width=\"65\" \/><col width=\"68\" \/><col width=\"69\" \/><col width=\"69\" \/><col width=\"69\" \/><col width=\"69\" \/><col width=\"74\" \/><\/colgroup>\n<tbody>\n<tr style=\"height: 0px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">Quality 70 decode:<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #d4d4ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">60<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #a8a8ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">120<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #a8a8ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">120<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #7c7cff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">180<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #5151ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">240<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #2525ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">300<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">&nbsp;<\/td>\n<\/tr>\n<tr style=\"height: 0px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">Quality 80 encode:<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">2<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">3<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">3<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">5<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">7<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">9<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: right;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">times 35<\/span><\/p>\n<\/td>\n<\/tr>\n<tr style=\"height: 0px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">Quality 80 decode:<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ccccff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">70<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #b3b3ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">105<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #b3b3ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">105<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #8080ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">175<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #4d4dff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">245<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #1a1aff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">315<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">&nbsp;<\/td>\n<\/tr>\n<tr style=\"height: 0px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">Original:<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #dbdbff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">50<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #b7b7ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">100<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #9292ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">150<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #6e6eff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">200<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #4949ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">250<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #2525ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">300<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">&nbsp;<\/td>\n<\/tr>\n<tr style=\"height: 0px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">Quality 80 error:<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ffffcd; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">10<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ffb2b2; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">-15<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ffb2b2; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">-15<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ffe5e5; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">-5<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ffffe6; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">5<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ffffb3; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">15<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">&nbsp;<\/td>\n<\/tr>\n<tr style=\"height: 0px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">Total error w.r.t. original:<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ffff9a; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">20<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ffffe6; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">5<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ff1919; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">-45<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ff7f7f; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">-25<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ffe5e5; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">-5<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ffffb3; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">15<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>If we are lucky, like on the second value in the sequence, the error of the first generation encoding (+20) is partially compensated by the error of the second generation encoding (-15) and the result is actually closer to the original again. But that\u2019s just luck. The errors can just as well add up. In this example, the maximum error is now 45, which is larger than the maximum error from either quantization by itself.<\/p>\n<p>This explains why <strong>re-saving a JPEG file at a higher quality setting than the original is always a bad idea: you\u2019ll get a larger file, with more loss<\/strong> than if you would re-save it at the exact same quality setting.<\/p>\n<h2>What about other image formats?<\/h2>\n<p>The JPEG file format is about 25 years old now, so maybe that\u2019s why it suffers from this problem of generation loss. Surely more modern image formats like WebP (released in 2010) or BPG (released in 2014) are better in this respect, right?<\/p>\n<p>Sadly, no again. In fact, WebP and BPG suffer even more from generation loss than JPEG. It\u2019s not really a practical issue at this point, since the formats are not commonly used by end-users and most WebP or BPG images you\u2019ll find on the internet will be \u2018first generation\u2019. But this could very well become a bigger problem should those formats become more popular.<\/p>\n<iframe loading=\"lazy\" width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/ujBp5B35el4?rel=0\" frameborder=\"0\" allowfullscreen style=\"max-width: 100%\"><\/iframe>\n<div>\n<div style=\"float: left; margin: 0 10px 0 0\">\n<div style=\"margin: 5px 0\">After 1,000 encodings:<\/div>\n<a target=\"_blank\"  href=\"https:\/\/res.cloudinary.com\/jon\/comparison-frame-01000.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"After 1,000 encodings\" src=\"https:\/\/res.cloudinary.com\/jon\/w_350\/comparison-frame-01000.jpg\" width=\"350\" height=\"197\"\/><\/a>\n<\/div>\n<div style=\"float: left; margin: 0 0 0 10px\">\n<div style=\"margin: 5px 0\">After 5,000 encodings:<\/div>\n<a target=\"_blank\"  href=\"https:\/\/res.cloudinary.com\/jon\/comparison-frame-05000.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"After 5,000 encodings\" src=\"https:\/\/res.cloudinary.com\/jon\/w_350\/comparison-frame-05000.jpg\" width=\"350\" height=\"197\"\/><\/a>\n<\/div>\n<\/div>\n<div style=\"clear: both; margin: 0 0 15px 0\">\n<\/div>\n<p>Compared to WebP and BPG, JPEG is relatively robust in terms of generation loss. One of the reasons for this is that JPEG does everything in 8&#215;8 blocks of pixels (or 16&#215;16 if you take chroma subsampling into account), and most of the error accumulation cannot cross the boundaries of these macroblocks. The more modern formats WebP and BPG use variable-sized, larger macroblocks, which is good for compression, but it also means that an error in one part of the image can more easily propagate to other parts of the image.<\/p>\n<p>This does not at all mean that WebP and BPG are bad image formats. They are actually great image formats. It just means that you have to be somewhat careful in how you use them.<\/p>\n<h3>What about FLIF?<\/h3>\n<p><a href=\"http:\/\/flif.info\/\">FLIF<\/a> is a lossless image format that <a href=\"https:\/\/cloudinary.com\/blog\/flif_the_new_lossless_image_format_that_outperforms_png_webp_and_bpg\">outperforms other lossless image formats<\/a>. FLIF also has a <a href=\"http:\/\/flif.info\/lossy.html\">lossy encoder<\/a> which 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 \u2013 the color space is not YCbCr but YCoCg, which does not introduce loss, and there is no chroma subsampling, nor transformation to DCT which introduces rounding errors \u2013 and also because of the way it adds loss. Instead of using quantization, it 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). For example, to go back to the example that illustrated how quantization loss can accumulate:<\/p>\n<table style=\"border: none; border-collapse: collapse;\"><colgroup><col width=\"105\" \/><col width=\"62\" \/><col width=\"66\" \/><col width=\"76\" \/><col width=\"66\" \/><col width=\"66\" \/><col width=\"66\" \/><col width=\"143\" \/><\/colgroup>\n<tbody>\n<tr style=\"height: 0px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">Original:<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #dbdbff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">50<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #b7b7ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">100<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #9292ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">150<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #6e6eff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">200<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #4949ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">250<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #2525ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">300<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">&nbsp;<\/td>\n<\/tr>\n<tr style=\"height: 0px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">FLIF high quality<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #ddddff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">48<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #babaff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">96<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #9797ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">144<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #6e6eff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">200<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #4b4bff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">248<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #2828ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">296<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">3 bits discarded, values &lt; 20 become 0<\/span><\/p>\n<\/td>\n<\/tr>\n<tr style=\"height: 0px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">FLIF low quality<\/span><\/p>\n<\/td>\n<td style=\"border: 1px solid #cccccc; vertical-align: bottom; padding: 3px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">0<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #babaff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">96<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #8b8bff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">160<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #7474ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">192<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #4545ff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">256<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; background-color: #2e2eff; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt; text-align: center;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;\">288<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">5 bits discarded, values &lt; 60 become 0<\/span><\/p>\n<\/td>\n<\/tr>\n<tr style=\"height: 19px;\">\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\" colspan=\"3\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">FLIF high quality after low quality: nothing changes<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\" colspan=\"4\">\n<p style=\"line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;\" dir=\"ltr\"><span style=\"font-size: 13.3333px; font-family: Arial; vertical-align: baseline; white-space: pre-wrap; background-color: transparent;\">FLIF low quality after high quality: same as low quality directly<\/span><\/p>\n<\/td>\n<td style=\"vertical-align: bottom; padding: 3px 3px 3px 3px; border: solid #cccccc 1px;\">&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>However, even lossy FLIF is not immune to generation loss if you significantly modify the image between generations, for example by doing a rotation or resizing.<\/p>\n<h2>How to avoid generation loss<\/h2>\n<p>There are only two ways to avoid generation loss: either don\u2019t use a lossy format, or 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.<\/p>\n<p>Avoiding lossy formats is a good idea if possible. 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\u2019re 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.<\/p>\n<p>In some cases this is not an option though. If you find an image on the internet that you want to reuse and edit (say to create a very funny meme), 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 <a href=\"https:\/\/images.google.com\/\">Google Image Search<\/a>, and try to find the earliest generation, i.e. the oldest and highest resolution version of the image.<\/p>\n<p>In particular, if you encounter images on social media websites like Facebook or Twitter, take into account that these websites automatically transcode uploaded images, so generation loss can easily accumulate if an image goes viral and it jumps frequently between those different websites. For this reason, using \u201cShare\u201d or \u201cRetweet\u201d is better than downloading the image and then re-uploading it.<\/p>\n<p>Finally, if you really need to edit a JPEG file, there are some ways to avoid or minimize generation loss, depending on what kind of edits you want to make:<\/p>\n<ul>\n<li>If all you need to do is cropping or rotation by 90 degrees: this <a href=\"https:\/\/en.wikipedia.org\/wiki\/Libjpeg#jpegtran\">can actually be done without fully re-encoding<\/a> the JPEG file, so without any generation loss.<\/li>\n<li>If you do actual editing of some (but not all) of the pixels, you should of course work with lossless files in your image editor, but to save the final image, it\u2019s probably best to use the exact same quality settings as the original JPEG file (as we explained above, this introduces less generation loss than if you use a higher quality setting).<\/li>\n<li>If your editing is changing all or most of the pixels \u2013 e.g. you\u2019re scaling down, rotating by an arbitrary angle, applying some kind of global filter or effect \u2013 then the original quality setting doesn\u2019t really matter anymore, so using a high(er) quality setting certainly makes sense.<\/li>\n<\/ul>\n<p>If you\u2019re using Cloudinary, I would recommend always uploading the highest resolution, highest quality original image you have available (lossless if possible), especially if you\u2019re using <a href=\"https:\/\/cloudinary.com\/blog\/transparent_webp_format_cdn_delivery_based_on_visitors_browsers\">automatic format selection (<code>f_auto<\/code>)<\/a>. Cloudinary always keeps your original image as is (adding zero generation loss), and each derived image is encoded directly from the original (adding one generation, which is inevitable). That way you ensure that your image assets are future-proof: when in the future, higher image qualities and\/or resolutions are required or desired, or new image formats become available, it will be an effortless change.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21375,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[426,179,321],"class_list":["post-21374","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-featured","tag-jpeg","tag-webp"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Why JPEG is like a photocopier (generation loss)<\/title>\n<meta name=\"description\" content=\"Lossy image formats are like photocopiers: the quality deteriorates with each copy. We investigate this issue\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Why JPEG is like a photocopier\" \/>\n<meta property=\"og:description\" content=\"Lossy image formats are like photocopiers: the quality deteriorates with each copy. We investigate this issue\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-04T15:25:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-12T00:36:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649735795\/Web_Assets\/blog\/jpeg_photocopier\/jpeg_photocopier.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"156\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Why JPEG is like a photocopier\",\"datePublished\":\"2016-05-04T15:25:32+00:00\",\"dateModified\":\"2026-03-12T00:36:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649735795\/Web_Assets\/blog\/jpeg_photocopier\/jpeg_photocopier.jpg?_i=AA\",\"keywords\":[\"Featured\",\"JPEG\",\"WebP\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2016\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier\",\"url\":\"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier\",\"name\":\"Why JPEG is like a photocopier (generation loss)\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649735795\/Web_Assets\/blog\/jpeg_photocopier\/jpeg_photocopier.jpg?_i=AA\",\"datePublished\":\"2016-05-04T15:25:32+00:00\",\"dateModified\":\"2026-03-12T00:36:20+00:00\",\"description\":\"Lossy image formats are like photocopiers: the quality deteriorates with each copy. We investigate this issue\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649735795\/Web_Assets\/blog\/jpeg_photocopier\/jpeg_photocopier.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649735795\/Web_Assets\/blog\/jpeg_photocopier\/jpeg_photocopier.jpg?_i=AA\",\"width\":300,\"height\":156},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Why JPEG is like a photocopier\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Why JPEG is like a photocopier (generation loss)","description":"Lossy image formats are like photocopiers: the quality deteriorates with each copy. We investigate this issue","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier","og_locale":"en_US","og_type":"article","og_title":"Why JPEG is like a photocopier","og_description":"Lossy image formats are like photocopiers: the quality deteriorates with each copy. We investigate this issue","og_url":"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier","og_site_name":"Cloudinary Blog","article_published_time":"2016-05-04T15:25:32+00:00","article_modified_time":"2026-03-12T00:36:20+00:00","og_image":[{"width":300,"height":156,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649735795\/Web_Assets\/blog\/jpeg_photocopier\/jpeg_photocopier.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier"},"author":{"name":"","@id":""},"headline":"Why JPEG is like a photocopier","datePublished":"2016-05-04T15:25:32+00:00","dateModified":"2026-03-12T00:36:20+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649735795\/Web_Assets\/blog\/jpeg_photocopier\/jpeg_photocopier.jpg?_i=AA","keywords":["Featured","JPEG","WebP"],"inLanguage":"en-US","copyrightYear":"2016","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier","url":"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier","name":"Why JPEG is like a photocopier (generation loss)","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649735795\/Web_Assets\/blog\/jpeg_photocopier\/jpeg_photocopier.jpg?_i=AA","datePublished":"2016-05-04T15:25:32+00:00","dateModified":"2026-03-12T00:36:20+00:00","description":"Lossy image formats are like photocopiers: the quality deteriorates with each copy. We investigate this issue","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649735795\/Web_Assets\/blog\/jpeg_photocopier\/jpeg_photocopier.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649735795\/Web_Assets\/blog\/jpeg_photocopier\/jpeg_photocopier.jpg?_i=AA","width":300,"height":156},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Why JPEG is like a photocopier"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649735795\/Web_Assets\/blog\/jpeg_photocopier\/jpeg_photocopier.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21374"}],"version-history":[{"count":7,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21374\/revisions"}],"predecessor-version":[{"id":39866,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21374\/revisions\/39866"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21375"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}