10

When converting a color JPG image to grayscale, and saving it back to JPG, one can usually see at least 20% file size reduction, which seems natural.

Question:

  1. Is there a specific "grayscale" format in the JPG specifications? I see this in the JPEG File Interchange Format, but not sure if it's the standard used nowadays

  2. Or is a "grayscale JPG" just usually a color RGB JPG where R = G = B, and thus the file size reduction results from a compression of 3-times-duplicated numbers?

It seemed to me that it's 2. because in various languages, JPG export functions don't have a grayscale option, for example toDataURL in Javascript:

var fullQuality = canvas.toDataURL('image/jpeg', 1.0);
var mediumQuality = canvas.toDataURL('image/jpeg', 0.5);
var lowQuality = canvas.toDataURL('image/jpeg', 0.1);
Basj
  • 41,386
  • 99
  • 383
  • 673

2 Answers2

7

A color JPEG has 3 components: Y Cb Cr

A grayscale JPEG has 1 component: Y

You can convert a color JPEG into a grayscale simply by updating the header to indicate 1 component and deleting the Cb and Cr scans.

user3344003
  • 20,574
  • 3
  • 26
  • 62
  • Oh I thought a color JPEG has 3 components: R, G, B, do you mean it's stored internally with Y Cb Cr (https://en.wikipedia.org/wiki/YCbCr)? – Basj Jun 24 '18 at 17:37
  • 1
    So removing Cb Cr to keep only grayscale could theoritically reduce the file size by ~66% is that right? I tried with Photoshop, etc. but usually, when using the grayscale feature, the JPG is reduced by max 20%. Probably Cb Cr data are much smaller than Y (i.e. there's much compression in the Cb Cr data?) – Basj Jun 24 '18 at 17:37
  • Last question @user3344003: is there a tool to display how much size in a JPG file is taken by Y data, Cb data, Cr data? – Basj Jun 24 '18 at 17:40
  • 1
    The JPEG standard has no definition of color. It specifies the generic term "component." By convention, YCbCr became the components used in JPEG. In theory, eliminating Cb and Cr would reduce by 2/3rds. However, it is common to reduce the size of a color image by subsampling the Cb and Cr components. Your image might have, say, 4 Y values for every 1 Cb and Cr value. I do not know of a tool that measure the size but it would be easy to write one. Scan the JPEG stream for the SOS markers and measure the size. There are 4 component JPEGs (CMYK) specified by Adobe but few others use them. – user3344003 Jun 25 '18 at 19:44
  • 2
    @Basj, the compression in the color channels is much higher than the monochrome channel due to the way the brain perceives the color information vs the contrast of the edges. the jpeg format benefits greatly from this fact to produce small files. – Sam Sirry Apr 21 '19 at 06:27
1

Is there a specific "grayscale" format in the JPG specifications?

Yes, and it is well supported. It isn't used commonly these days, but most everything can read it.

Or is a "grayscale JPG" just usually a color RGB JPG where R value==G value==B value, and thus the file size reduction results from a compression of 3-times-duplicated numbers?

Not all APIs are going to expose all of the features available. The greyscale handling is specific to the format and isn't available in all other formats. The Canvas API, in particular, tries to standardize over all possible export formats. Therefore, only a subset of features are supported.

When you save an image via the Canvas API, it's likely that you're saving a JPEG with chroma components, and they are effectively null and are compressing well. (That being said, the specific behavior is undefined, and a browser could choose to optimize and save a greyscale JPEG by detecting greyscale is all that's required.)

Brad
  • 159,648
  • 54
  • 349
  • 530