<p>JPEG compression involves three main steps:</p>

<ol>
<li><p><a href="https://en.wikipedia.org/wiki/Chroma_subsampling">Chroma subsampling</a>. The image is converted from RGB into YCbCr color space, in which the <em>luma</em> or brightness (Y) is stored separately from the <em>chroma</em> or color components, Cb and Cr.  The Y component is kept at full resolution, but Cb and Cr are downsampled, typically to half resolution on each axis.  This exploits the fact that the human visual system is more sensitive to fine details of brightness than of color.</p></li>
<li><p><a href="https://en.wikipedia.org/wiki/Quantization_%28image_processing%29#Frequency_quantization_for_image_compression">Frequency quantization.</a> The Y, Cb, and Cr images are converted into a frequency representation, by breaking them up into 8x8 blocks and applying the <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">discrete cosine transform</a> (a variant of the Fourier transform) to each block.  The result is a matrix of numbers that describe the amplitudes of different spatial frequencies in the block.  These numbers can then be quantized (rounded off to a chosen number of bits of precision). Different levels of quantization are used for different frequencies, exploiting our visual system's relatively lower sensitivity to high frequencies.  This is where the JPEG encoder's quality setting comes into play: lower qualities use coarser quantization.</p></li>
<li><p><a href="https://en.wikipedia.org/wiki/Entropy_encoding">Entropy coding</a>. The  quantized DCT values are passed through an entropy coder, which losslessly compresses the bit stream by using fewer bits to represent the more common values, sort of like a zip file.</p></li>
</ol>

<p>Steps 1 and 2 are the lossy ones, and each produces its own type of artifacts (though there is some overlap).  Chroma subsampling tends to blur sharp edges between regions of different colors.  This is particularly visible in vector art, where brightly colored shapes pick up vicious jaggies around their edges. Frequency quantization blurs fine details in general, and also creates block-shaped artifacts at low quality settings, because the DCT is done on a block-by-block basis.  It is particularly visible on text.</p>

<p>This is why JPEG usually isn't used for images containing vector graphics or text&mdash;its compression algorithms are poorly suited for those cases, although they work well for photographs and other images with complex texture and not-too-sharp edges.</p>

CC BY-SA 3.0
2015-08-05T10:51:02.013Z
Thank you very much for your detailed explanation Nathan +1. I understand the compression algorithms have their limitations for JPEG, but I just wanted to find out if there's a right balance of the amount of compression together with other options (when saving it) that can make the artifacts less noticeable. I edited my question with samples.
Armfoot
CC BY-SA 3.0
2015-08-05T07:23:16.503Z
2015-08-05T07:23:16.503Z
Nathan Reed
<p>There are 2 main factors that seem to lead to <a href="https://en.wikipedia.org/wiki/Digital_artifact" rel="noreferrer">digital artifacts</a> when creating JPEG images: Aliasing and Compression.</p>

<p>Example:</p>

<blockquote>
  <p>Converting a PNG with characters on it to a JPEG or placing vector images over a photograph, will result in pixelization on their edges. The antialiasing generally creates a kind of blur around them, but if the image is <a href="https://en.wikipedia.org/wiki/Lossy_compression" rel="noreferrer">lossy compressed</a>, part of the details are also lost, therefore the blur and the pixelization may become less noticeable.</p>
</blockquote>

<p>Is this the right thing to do? I.e. since a lossless compression generates a highly detailed image, the artifacts resulting from aliasing will be more noticeable, so a balance may be found by using the right compression, although compromising the image quality.</p>

<h2>Edit</h2>

<p>I just saved this JPEG in mspaint (3.46KB):</p>

<p><a href="https://i.sstatic.net/uPlhy.jpg" rel="noreferrer"><img src="https://i.sstatic.net/uPlhy.jpg" alt="Lossless"></a></p>

<p>Here's the same JPEG with maximum compression (lowest quality, 0.5KB):</p>

<p><a href="https://i.sstatic.net/5HPZJ.jpg" rel="noreferrer"><img src="https://i.sstatic.net/5HPZJ.jpg" alt="Lossy"></a></p>

<p>Here's yet the same JPEG with 50% compression (notice the difference in size, 1.29KB):</p>

<p><a href="https://i.sstatic.net/kS88V.jpg" rel="noreferrer"><img src="https://i.sstatic.net/kS88V.jpg" alt="Half-no-options"></a></p>

<p>The same 50% compression but saved as "progressive JPG", kept the original EXIF and XMP data, and "tried to save with original JPG quality" (you can notice that there are no grey pixels around, 2.96KB):</p>

<p><a href="https://i.sstatic.net/i5A7q.jpg" rel="noreferrer"><img src="https://i.sstatic.net/i5A7q.jpg" alt="Half-options"></a></p>

<p>And finally the same as before with <strong>chroma subsampling disabled</strong> (same file size, 2.96KB):</p>

<p><a href="https://i.sstatic.net/V8FMk.jpg" rel="noreferrer"><img src="https://i.sstatic.net/V8FMk.jpg" alt="Half-no-chroma"></a></p>

CC BY-SA 3.0
2017-01-14T13:43:18.547Z
keep in mind that `mozjpeg` compressor has a special trick to produce less distortion on these kinds of images. (and it's more efficient in general than usual jpeg writers too.) did you try it?
Display Name
CC BY-SA 3.0
2015-08-05T03:20:34.207Z
Just curious, what is your reason for wanting jpg, is it the smaller file size? In case it helps your specific situation, do you know about dxt compression or distance field textures?
Alan Wolfe
CC BY-SA 3.0
2015-08-05T07:31:18.370Z
It's unclear to me what your question is. Do you want to know whether it's good to compress using JPEG? Do you want to know what kinds of images compress well with JPEG? Or, are you already using JPEG and you'd like to know how to author your images in order to minimize the artifacts caused by JPEG?
Mokosha
CC BY-SA 3.0
2015-08-05T10:23:18.237Z
@AlanWolfe I have encountered a few occasions that I was only able to use JPEG (mostly in web apps), and that's why I needed it to be in JPEG. Thanks, but I was not familiar with dxt compression nor distance field textures, from what I have seen in [wikipedia](https://en.wikipedia.org/wiki/S3_Texture_Compression), dxt algorithms are different from the ones used in JPEG, do you mean they can be used to create JPEGs?
Armfoot
CC BY-SA 3.0
2015-08-05T10:24:46.870Z
@Moshoka thanks, it's more related to your last question: how to minimize the "visual impact" brought by artifacts in JPEG images?
Armfoot
<image><compression><artifacts>
When creating a JPEG, how can I minimize the occurence of artifacts?
Armfoot
# When creating a JPEG, how can I minimize the occurence of artifacts?

(Asked by: username_0 on 2015-08-05)

There are 2 main factors that seem to lead to [digital artifacts](https://en.wikipedia.org/wiki/Digital_artifact) when creating JPEG images: Aliasing and Compression.

Example:

> Converting a PNG with characters on it to a JPEG or placing vector images over a photograph, will result in pixelization on their edges. The antialiasing generally creates a kind of blur around them, but if the image is [lossy compressed](https://en.wikipedia.org/wiki/Lossy_compression), part of the details are also lost, therefore the blur and the pixelization may become less noticeable.

Is this the right thing to do? I.e. since a lossless compression generates a highly detailed image, the artifacts resulting from aliasing will be more noticeable, so a balance may be found by using the right compression, although compromising the image quality.

## Edit

I just saved this JPEG in mspaint (3.46KB):

[![Lossless](https://i.sstatic.net/uPlhy.jpg)](https://i.sstatic.net/uPlhy.jpg)

Here's the same JPEG with maximum compression (lowest quality, 0.5KB):

[![Lossy](https://i.sstatic.net/5HPZJ.jpg)](https://i.sstatic.net/5HPZJ.jpg)

Here's yet the same JPEG with 50% compression (notice the difference in size, 1.29KB):

[![Half-no-options](https://i.sstatic.net/kS88V.jpg)](https://i.sstatic.net/kS88V.jpg)

The same 50% compression but saved as "progressive JPG", kept the original EXIF and XMP data, and "tried to save with original JPG quality" (you can notice that there are no grey pixels around, 2.96KB):

[![Half-options](https://i.sstatic.net/i5A7q.jpg)](https://i.sstatic.net/i5A7q.jpg)

And finally the same as before with **chroma subsampling disabled** (same file size, 2.96KB):

[![Half-no-chroma](https://i.sstatic.net/V8FMk.jpg)](https://i.sstatic.net/V8FMk.jpg)

**Tags:** image, compression, artifacts

> **Comments:**
> **username_2**: Just curious, what is your reason for wanting jpg, is it the smaller file size? In case it helps your specific situation, do you know about dxt compression or distance field textures?  
> **username_3**: It's unclear to me what your question is. Do you want to know whether it's good to compress using JPEG? Do you want to know what kinds of images compress well with JPEG? Or, are you already using JPEG and you'd like to know how to author your images in order to minimize the artifacts caused by JPEG?  
> **username_0**: @username_2 I have encountered a few occasions that I was only able to use JPEG (mostly in web apps), and that's why I needed it to be in JPEG. Thanks, but I was not familiar with dxt compression nor distance field textures, from what I have seen in [wikipedia](https://en.wikipedia.org/wiki/S3_Texture_Compression), dxt algorithms are different from the ones used in JPEG, do you mean they can be used to create JPEGs?  
> **username_0**: @Moshoka thanks, it's more related to your last question: how to minimize the "visual impact" brought by artifacts in JPEG images?  
> **username_1**: keep in mind that `mozjpeg` compressor has a special trick to produce less distortion on these kinds of images. (and it's more efficient in general than usual jpeg writers too.) did you try it?  

---

## 1 answers

### Answer by username_4 on 2015-08-05. Score: 9 | Accepted answer

JPEG compression involves three main steps:

1. [Chroma subsampling](https://en.wikipedia.org/wiki/Chroma_subsampling). The image is converted from RGB into YCbCr color space, in which the *luma* or brightness (Y) is stored separately from the *chroma* or color components, Cb and Cr. The Y component is kept at full resolution, but Cb and Cr are downsampled, typically to half resolution on each axis. This exploits the fact that the human visual system is more sensitive to fine details of brightness than of color.
2. [Frequency quantization.](https://en.wikipedia.org/wiki/Quantization_%28image_processing%29#Frequency_quantization_for_image_compression) The Y, Cb, and Cr images are converted into a frequency representation, by breaking them up into 8x8 blocks and applying the [discrete cosine transform](https://en.wikipedia.org/wiki/Discrete_cosine_transform) (a variant of the Fourier transform) to each block. The result is a matrix of numbers that describe the amplitudes of different spatial frequencies in the block. These numbers can then be quantized (rounded off to a chosen number of bits of precision). Different levels of quantization are used for different frequencies, exploiting our visual system's relatively lower sensitivity to high frequencies. This is where the JPEG encoder's quality setting comes into play: lower qualities use coarser quantization.
3. [Entropy coding](https://en.wikipedia.org/wiki/Entropy_encoding). The quantized DCT values are passed through an entropy coder, which losslessly compresses the bit stream by using fewer bits to represent the more common values, sort of like a zip file.

Steps 1 and 2 are the lossy ones, and each produces its own type of artifacts (though there is some overlap). Chroma subsampling tends to blur sharp edges between regions of different colors. This is particularly visible in vector art, where brightly colored shapes pick up vicious jaggies around their edges. Frequency quantization blurs fine details in general, and also creates block-shaped artifacts at low quality settings, because the DCT is done on a block-by-block basis. It is particularly visible on text.

This is why JPEG usually isn't used for images containing vector graphics or text—its compression algorithms are poorly suited for those cases, although they work well for photographs and other images with complex texture and not-too-sharp edges.

> **Comments:**
> **username_0**: Thank you very much for your detailed explanation username_4 +1. I understand the compression algorithms have their limitations for JPEG, but I just wanted to find out if there's a right balance of the amount of compression together with other options (when saving it) that can make the artifacts less noticeable. I edited my question with samples.  

---

