The Not-So-Perfect Picture: Understanding the Realities of JPEG Degradation

In their raw and uncompressed format, digital images contain a significant amount of visual data, resulting in large file sizes, which pose challenges in terms of storage space and transmission bandwidth.

JPEG was created in 1992 to solve this problem by using a revolutionary compression algorithm, and 30-something years on, it’s probably the most widely used image format on the web. While it can efficiently compress and store digital images with reasonable image quality, it can also lead to a degradation in image quality with successive editing and re-saving.

Visual fidelity will be critical if your use case involves using images to drive engagement (eCommerce is a particularly relevant example for this). JPEG degradation is not acceptable – as that leaves you with more problems to handle, such as compression artifacts, color distortion, and, generally, loss of fine detail.

Can this problem be solved or managed? If yes, how? In this article, we will dive deeper into JPEG, understand JPEG degradation, and learn how we can work with JPEG images and still maintain their high quality.

What is JPEG Degradation?

JPEG uses lossy compression that reduces file sizes by discarding some of the less important or redundant information in an image, resulting in an acceptable balance between compression ratio and visual quality. JPEG does this by exploiting the limitations of human visual perception - it removes details that are less noticeable to the human eye, thus reducing the file size while still maintaining perceived image quality.

However, while JPEG has provided us with several benefits like reduced file sizes, faster transmission, storage efficiency, and the like, it has also introduced a new problem — JPEG degradation. This term describes the loss of image quality that occurs when a JPEG image is edited and/or re-saved; this is also referred to as the “Photocopier Effect.” It is named so because it is similar to the loss of fidelity between an original document and its many reproductions when copies are made.

A JPEG image gradually loses its quality after being re-saved several times.

Why you should care about JPEG Degradation

This progressive degradation in visual fidelity can be disastrous for businesses that rely on visuals to grow and market themselves. Imagine owning an online fashion retailer that sells clothing through its e-commerce platform. The success of your business largely depends on the visual appeal of your products, as customers make purchasing decisions based on how the items look and how well they are presented.

And the process involved in the creation of these visual assets is an iterative one. Each edit contributes to perfecting the asset, driving traffic, and converting them into paying users, fueling profit.

So, with every round of image compression that occurs when edits are made to the JPEG, we lose data, and this loss is permanent. It happens because of the way JPEG compression works. This loss of data is a significant concern because, even though the details that are removed might not be noticeable at first, they add up and eventually lead to images on websites looking blurry, pixellated, and with visible color fringing and banding, which can decrease the appeal of your product offering.

As each time we compress the image, this problem gets worse, industries that depend on visuals now face a big challenge: How can they keep their images looking clear and sharp as they make changes and compress the images, all while still meeting the requirements for file size and fast online loading?

Why does JPEG degradation happen?

JPEG degradation occurs due to the inherent characteristics of the JPEG image compression algorithm. Information loss is unavoidable and builds up if you keep re-editing and re-saving your JPEG images.

Let’s examine how the problem is inherent to the JPEG compression pipeline's crucial parts.

1. Chrominance Downsampling

Since the human eye is more sensitive to changes in brightness than color, the JPEG algorithm reduces the amount of data needed to represent the color information in an image (subsampling), while keeping brightness information intact. This is an effective way to save space without significantly affecting perceived image quality.

In the JPEG compression process, the original image represented in the RGB color space is first converted into the YCbCr color space. YCbCr consists of three channels: Y (Luma), Cb (Chrominance Blue), and Cr (Chrominance Red). Y carries the brightness or grayscale information, while Cb and Cr store color details that recreate the full-color image when combined with Y.

To reduce the file size without significantly affecting perceived image quality, a deliberate reduction in the resolution of the color information is performed. This is where chrominance downsampling comes into play. The process involves grouping neighboring pixels into blocks, often in 2x2 configurations, where four pixels are treated as a single unit. The color values in the Cb and Cr channels are averaged within each block to calculate a single representative color value.

This averaged value is then used to replace the original chrominance values for all four pixels in the block.

This reduction from four distinct chrominance values to a single averaged value leads to only a quarter of the original color data being retained. Consequently, the size of the image is halved in terms of the chrominance information.

As you can tell, this is a net loss in precision for these color values. And with each edit and re-saving of the JPEG image, the JPEG pipeline is repeated, including the chroma subsampling.

More and more chrominance data is lost with each generation, affecting the accuracy and fidelity of the color representation on the image. As a result, color information becomes increasingly distorted and less faithful to the original.

This degradation due to chroma subsampling can be seen as various visual artifacts – blocky color transitions, color fringing, and color bleeding along edges. These become even more noticeable when compressing images with fine color gradients or subtle color transitions. These regions that rely on precise color information suffer from noticeable artifacts where blocky or pixelated patterns disrupt the smoothness of color transitions.

2. Quantization

With chroma subsampling, we used human psychology to reduce image detail without affecting its perceived quality. With Quantization, however, we perform a more objective reduction in precision instead – using complex mathematics to round off frequency values to bring them close to whole numbers, meaning now we’ll need fewer bits to represent the image.

To do this, we’ll need to convert raw pixel values for each 8x8 block of 64 pixels into a frequency-domain representation, representing different image frequency components. This is done using a mathematical transformation - The Discrete Cosine Transform (DCT).

After DCT, each block is represented by a set of coefficients. These coefficients are essentially numbers describing how different frequencies contribute to that image block.

Now, you have the opportunity to perform controlled loss of data. By dividing these DCT coefficients by a set of quantization tables (one for luminance, and another for chrominance), you can decide how much detail to retain and how much to discard.

This is a simple division operation that results in fractional values – and to represent these values with fewer bits, they are rounded to the nearest integer.

The quantization tables can be customized to control the degree of quantization applied to different frequency components. Higher values in the tables lead to stronger quantization and more data reduction but can negatively impact image quality. This trade-off between file size and image quality is essential during Quantization, for balancing compression efficiency with acceptable visual fidelity.

Of course, this simplifies the coefficient values, making them closer to whole numbers (or zeroes). And with every edit or resizing, the already quantized data in a JPEG image is manipulated, and re-saving the image amplifies the impact of quantization-induced degradation.

Quantization degradation manifests prominently in edited or resized JPEG images. When images are enlarged, the loss of fine details due to quantization becomes more pronounced, leading to pixelation and blurriness. Edits, such as adjusting brightness, contrast, or colors, cause further data manipulation that can accentuate the existing artifacts caused by quantization. Additionally, text or sharp edges in the image may suffer from unevenness or irregularities as a result of lost high-frequency information.

This degradation caused by chrominance downsampling and quantization may be unnoticeable at first. However, this becomes a problem when the images have to go through these compression processes multiple times as they are passed from one individual/stakeholder to another, who would probably re-save or edit the JPEG image before passing it to the next person. Over time, the JPEG image will become less appealing or may not be as crisp as it initially was.

How can we prevent this then? If this is inherent to the JPEG process itself, are there ways to prevent this from happening?

How do I prevent JPEG degradation?

Preventing JPEG degradation involves adopting practices that reduce lost image information during compression, resaving, and editing. Some of these practices include:

• Use Lossless Formats for Editing: Ensure that intermediate edits are done using lossless formats like TIFF or PNG before converting to JPEGs, which will be shipped to the consumer. These lossless formats preserve all the image data without compression artifacts. Only convert to JPEG when you're done with the edits and ready for final compression.
• Minimize Generations: Aim to keep the number of times an image is compressed and saved as close to one as possible. Reducing the number of times you open, edit, and re-save a JPEG image is essential. Each generation introduces compression artifacts, leading to a cumulative loss of image quality. If possible, keep a high-quality source file (like TIFF or RAW) as your master copy and create JPEGs only when necessary for distribution.
• Don’t use chroma subsampling: Instead of avoiding chroma subsampling altogether, consider using it judiciously. Chroma subsampling can significantly reduce file size while maintaining acceptable quality. Use a minimal subsampling ratio like 4:4:4, which retains full chrominance information. Only reserve 4:2:2 or 4:2:0 subsampling for cases where strict file size constraints apply.
• Avoid Aggressive Compression: JPEG compression allows you to adjust the quality level when saving an image. Choosing a very low-quality level, often below 50% or even lower, will make the compression algorithm discard a substantial amount of image data, resulting in a much smaller file size but at the cost of noticeable blocky patterns, color shifts, blurriness, and loss of fine detail. This will be especially problematic for low-light or high-ISO photographs.
• Be Mindful of Resizing, Cropping, and Rotating: When you resize, rotate, or crop a JPEG image, you're altering the pixel dimensions and arrangement, which in turn affects how the compression algorithm interprets and discards information. Avoid repeatedly resizing or rotating images, as it can exacerbate quality loss. If you absolutely have to resize, crop, or rotate JPEG images, use software that supports "lossless transformations" (this feature is often termed "non-destructive editing"). This way, you can make these changes without introducing compression artifacts.

While these techniques are always relevant to prevent or reduce JPEG degradation; one other way we didn’t really touch on is how using the right image management service will ultimately prevent your JPEG from degradation and also help you deliver high-quality images to your customers, regardless of their device types. Let’s quickly talk about that.

How ImageKit helps you work with high-quality images without quality degradation

ImageKit is a complete digital asset management, transformation, optimization, and delivery solution that helps you improve your website's or mobile app's performance by delivering fast and high-quality images to your customers.

ImageKit helps you deliver the best visual experience possible on the web, through real-time image optimization and transformation. It offers an array of advanced features that automate the process of converting and delivering images in a way that maintains high quality while reducing file sizes. Let’s see how ImageKit’s features can help you deliver a superior web experience.

1. Lossless Formats For Your Masters

After your graphic design team has designed/edited your digital images using tools like Photoshop, ensure that they are exported at a high resolution. While exporting, the highest possible quality should be used without compressing it too much and in a format like TIFF or PNG.

You can upload source images to ImageKit's Media Library in lossless formats like TIFF and PNG using the ImageKit dashboard.

Once uploaded, the original copies of the images and files are stored permanently within the Media library. So you and your team members can access the original copy of the images whenever they need it. So, the issue of passing around JPEG images to different individuals, thereby reducing the quality of the images with each successive edit, is solved.

2. Control Chroma Subsampling and PNG Compression

ImageKit makes it easy to control chroma subsampling and also to ensure your source images/masters are not being compressed in a lossy way.

You can turn on/off chroma subsampling for images stored in your Media Library (off by default). This is in Settings -> Images -> Advanced on the ImageKit dashboard. Depending on your specific use case and the importance of color accuracy or maintaining color accuracy, you can toggle this setting on or off as needed.

You can also control compression (or turn it off completely, if you so choose) for the masters that you upload to ImageKit’s Media Library, by setting the PNG Compression mode (Also within the “Advanced” section of “Images”)  to Minimum for lossless compression only.

3. Automatic Format Conversion

JPEG enjoys universal compatibility and the smallest file sizes, but other image formats exist which might be better for your use case or efficiency. On browsers which support it, AVIF (AV1 Image Format) offers superior image quality and cutting-edge compression. WebP is another web dev darling, a newer format known for its excellent compression efficiency.

But with ImageKit, you’ll never have to choose or manually convert your master images, as it offers automatic image format conversion (depending on device and browser compatibility) before delivering them to your users.

If a user is browsing your site using the latest Chrome on a desktop, ImageKit's automatic format conversion can automatically convert and deliver your master image as an AVIF. If they’re on a mobile device, they’ll get WebP. The same image will be delivered in JPEG if they're on Safari. With this feature, users with compatible browsers receive images with higher quality and compression efficiency, resulting in smaller file sizes without significant quality loss, all with no work on your part beyond a dashboard setting.

With the 'Use Best Format For Image Delivery' setting turned on within the ImageKit dashboard, there will be no need to manually convert your JPEGs to different formats, preventing the image from undergoing further compression.

4. Automatic Quality Optimization

ImageKit supports Automatic Quality Optimization, allowing you to set the perceived visual quality of your images using a numerical value ranging from 1 to 100. This feature allows you to fine-tune the balance between image quality and file size according to your specific requirements, ensuring a consistent level of image quality across your website or application that suits your brand's visual identity.

For example, in e-commerce platforms, product images are critical in attracting and engaging customers. Using a quality value between 85-95 for this use-case ensures that images appear sharp, vibrant, and detailed, enhancing the overall shopping experience.

Lower values result in stronger compression and smaller file sizes, while higher values will lead to less compression and larger file sizes. But bear in mind that setting a very high value here (95-100) will not enhance the quality of your images beyond the quality of the source.

5. Real-Time, Non-Destructive Transformations

With ImageKit, you can perform over 50+ transformations on your JPEG images, ranging from resizing, cropping, adding text overlays, applying watermarks, etc., by making simple tweaks to URL parameters. By using ImageKit's URL-based API, you can dynamically make edits in a non-destructive way from the source, thus always keeping the number of your generations to one, preventing JPEG degradation.

How do you do this? After uploading an image to ImageKit, you’ll get a public URL for your image.

With that URL, you can edit the image on the fly using Imagekit’s Transformations API. For example, you can resize the image to be a 300x400 image, to be used in a Card component: https://ik.imagekit.io/hhmnlrce0/photo-1.jpeg?tr=w-300,h-400

With this developer-friendly API, you could even optimize your images based on Device Pixel Ratios, to ensure the right image size gets delivered for each target device.

Device Pixel Ratio (DPR) is a measure of the pixel density on a device's screen. It represents the number of physical pixels available to properly represent one CSS pixel. For example, a device with a DPR of 2 has four physical pixels (2x2) for each CSS pixel, while a DPR of 1 has a one-to-one mapping. (These days most devices have a device-pixel-ratio between 1.0 and 4.0).

When considering image optimization for devices with varying DPRs, it's essential to understand that a higher DPR device can render more image detail. Here's why:

• DPR 1 (1x): On a device with a DPR of 1, a 1x wide image with high quality (90) looks great because each CSS pixel directly corresponds to one physical pixel. The image appears sharp and detailed.
• DPR 2 (2x): On a device with a DPR of 2, however, a 2x wide image with lower quality (50) can look even better. This is because the higher DPR device has more physical pixels to represent each CSS pixel. When you load a 2x image, it provides twice the detail compared to the 1x image, even if it has lower quality. As a result, the 2x image appears sharper and more detailed, despite having a similar file size.

ImageKit lets you optimize for DPR by setting the dpr value and quality (q)of each image.

Let’s consider the example below:

• Image 1 - High-quality image without DPR: https://ik.imagekit.io/hhmnlrce0/photo-1.jpeg?tr=w-300,q-90
• Image 2 - Low-quality image with DPR optimization: https://ik.imagekit.io/hhmnlrce0/photo-1.jpeg?tr=w-600,dpr-2,q-50

NB: The dpr parameter can only be used when either the height or width of the desired output image is specified.

Conclusion

In digital imagery, the convenience of JPEG compression is undeniable, yet its inherent trade-offs cannot be ignored. As we've explored the journey from crisp pixels to compressed artifacts, the reasons behind JPEG degradation have become clear. It's a delicate balance between file size and visual quality that requires careful consideration when preserving the essence of an image.

Equipped with knowledge, you can take proactive steps to safeguard your visual assets. From starting with the right format to understanding the implications of compression, preventing JPEG degradation is within your grasp. And in this pursuit of image perfection, there's a solution that aligns seamlessly with your goals: ImageKit.

ImageKit doesn't just optimize images; it transforms how you perceive image optimization. With its automatic file conversion capabilities, you can seamlessly deliver high-quality images without impacting performance. Through dynamic resizing, responsive delivery, and a global content delivery network, ImageKit empowers you to present stunning visuals without compromising speed.

Sign up for a free ImageKit trial today and leverage all the features it offers to prevent JPEG degradation and deliver fast, high-quality, crispy image assets to your users.