image-actions versus TinyPng

[tunetheweb]

TinyPNG.com seems to produce much smaller images (40-60% smaller) with no noticeable loss in quality as far as my untrained eye can see. Any ideas how they do this? As I do really like this integration in GitHub Actions but at the moment I end up using this for the immediate effect and then going back and TinyPNG-ing the images later when I have time.

Any way to look at images and see what compression ratio they are using?
Or are they stripping meta-data that Calibre is not?
Or something else?

Would love it, it there was a simple config change to get same savings and save me this effort!

[benschwarz]

Thanks for the report @bazzadp, if you've got some file compression stats to share it may be helpful to figure out a target for us to reach.

To answer your questions:

Can we see what compression ratio they are using?

Nope. Though you can inspect the resulting files to explore their properties using the ImageMagick identify command:

identify -verbose public/slack-app-icon.png

Verbose command output

Image:
  Filename: public/slack-app-icon.png
  Format: PNG (Portable Network Graphics)
  Mime type: image/png
  Class: DirectClass
  Geometry: 800x800+0+0
  Resolution: 28.35x28.35
  Print size: 28.2187x28.2187
  Units: PixelsPerCentimeter
  Colorspace: sRGB
  Type: PaletteAlpha
  Base type: Undefined
  Endianness: Undefined
  Depth: 8-bit
  Channel depth:
    Red: 8-bit
    Green: 8-bit
    Blue: 8-bit
    Alpha: 8-bit
  Channel statistics:
    Pixels: 640000
    Red:
      min: 48  (0.188235)
      max: 255 (1)
      mean: 101.051 (0.396277)
      standard deviation: 90.2672 (0.353989)
      kurtosis: -0.751185
      skewness: 1.11646
      entropy: 0.167521
    Green:
      min: 87  (0.341176)
      max: 255 (1)
      mean: 130.056 (0.510023)
      standard deviation: 73.2604 (0.287296)
      kurtosis: -0.751204
      skewness: 1.11645
      entropy: 0.18027
    Blue:
      min: 244  (0.956863)
      max: 255 (1)
      mean: 246.819 (0.967917)
      standard deviation: 4.79682 (0.0188111)
      kurtosis: -0.751132
      skewness: 1.11663
      entropy: 0.237999
    Alpha:
      min: 253  (0.992157)
      max: 255 (1)
      mean: 254.998 (0.99999)
      standard deviation: 0.0499688 (0.000195956)
      kurtosis: 362.061
      skewness: -19.9588
      entropy: 0.0159103
  Image statistics:
    Overall:
      min: 48  (0.188235)
      max: 255 (1)
      mean: 183.231 (0.718552)
      standard deviation: 42.0936 (0.165073)
      kurtosis: -1.58611
      skewness: -0.5781
      entropy: 0.150425
  Colors: 52
  Histogram:
    473514: (48,87,244,255) #3057F4FF srgba(48,87,244,1)
    1598: (48,87,244,254) #3057F4FE srgba(48,87,244,0.996078)
    1: (48,87,244,253) #3057F4FD srgba(48,87,244,0.992157)
    143: (61,98,245,255) #3D62F5FF srgba(61,98,245,1)
    6: (73,108,245,255) #496CF5FF srgba(73,108,245,1)
    208: (74,108,245,255) #4A6CF5FF srgba(74,108,245,1)
    6: (75,108,245,255) #4B6CF5FF srgba(75,108,245,1)
    5: (87,118,245,255) #5776F5FF srgba(87,118,245,1)
    55: (87,118,246,255) #5776F6FF srgba(87,118,246,1)
    1: (88,118,246,255) #5876F6FF srgba(88,118,246,1)
    46: (99,129,246,255) #6381F6FF srgba(99,129,246,1)
    74: (100,129,247,255) #6481F7FF srgba(100,129,247,1)
    11: (112,139,247,255) #708BF7FF srgba(112,139,247,1)
    9: (112,139,248,255) #708BF8FF srgba(112,139,248,1)
    25: (113,139,248,255) #718BF8FF srgba(113,139,248,1)
    61: (125,150,248,255) #7D96F8FF srgba(125,150,248,1)
    56: (126,150,248,255) #7E96F8FF srgba(126,150,248,1)
    41: (138,160,248,255) #8AA0F8FF srgba(138,160,248,1)
    21: (138,161,248,255) #8AA1F8FF srgba(138,161,248,1)
    5: (139,160,249,255) #8BA0F9FF srgba(139,160,249,1)
    4: (139,161,249,255) #8BA1F9FF srgba(139,161,249,1)
    128: (151,171,249,255) #97ABF9FF srgba(151,171,249,1)
    33: (152,171,250,255) #98ABFAFF srgba(152,171,250,1)
    11: (163,181,250,255) #A3B5FAFF srgba(163,181,250,1)
    8: (163,182,250,255) #A3B6FAFF srgba(163,182,250,1)
    37: (164,181,250,255) #A4B5FAFF srgba(164,181,250,1)
    5: (164,181,251,255) #A4B5FBFF srgba(164,181,251,1)
    13: (164,182,250,255) #A4B6FAFF srgba(164,182,250,1)
    2: (164,182,251,255) #A4B6FBFF srgba(164,182,251,1)
    1: (165,182,251,255) #A5B6FBFF srgba(165,182,251,1)
    27: (176,191,251,255) #B0BFFBFF srgba(176,191,251,1)
    83: (177,192,251,255) #B1C0FBFF srgba(177,192,251,1)
    2: (178,192,251,255) #B2C0FBFF srgba(178,192,251,1)
    10: (189,201,251,255) #BDC9FBFF srgba(189,201,251,1)
    3: (189,202,251,255) #BDCAFBFF srgba(189,202,251,1)
    24: (190,202,251,255) #BECAFBFF srgba(190,202,251,1)
    7: (190,203,251,255) #BECBFBFF srgba(190,203,251,1)
    48: (202,212,252,255) #CAD4FCFF srgba(202,212,252,1)
    5: (202,213,252,255) #CAD5FCFF srgba(202,213,252,1)
    97: (203,213,252,255) #CBD5FCFF srgba(203,213,252,1)
    5: (215,222,253,255) #D7DEFDFF srgba(215,222,253,1)
    8: (215,223,253,255) #D7DFFDFF srgba(215,223,253,1)
    29: (216,223,253,255) #D8DFFDFF srgba(216,223,253,1)
    72: (228,233,254,255) #E4E9FEFF srgba(228,233,254,1)
    20: (228,234,254,255) #E4EAFEFF srgba(228,234,254,1)
    127: (229,234,254,255) #E5EAFEFF srgba(229,234,254,1)
    64: (241,243,254,255) #F1F3FEFF srgba(241,243,254,1)
    2: (241,244,254,255) #F1F4FEFF srgba(241,244,254,1)
    91: (242,244,254,255) #F2F4FEFF srgba(242,244,254,1)
    43: (254,254,255,255) #FEFEFFFF srgba(254,254,255,1)
    78: (254,255,255,255) #FEFFFFFF srgba(254,255,255,1)
    163027: (255,255,255,255) #FFFFFFFF white
  Rendering intent: Perceptual
  Gamma: 0.454545
  Chromaticity:
    red primary: (0.64,0.33)
    green primary: (0.3,0.6)
    blue primary: (0.15,0.06)
    white point: (0.3127,0.329)
  Matte color: grey74
  Background color: white
  Border color: srgb(223,223,223)
  Transparent color: none
  Interlace: None
  Intensity: Undefined
  Compose: Over
  Page geometry: 800x800+0+0
  Dispose: Undefined
  Iterations: 0
  Compression: Zip
  Orientation: Undefined
  Convex hull: 0,0 799,0 799,798 798,799 0,799 0,0
  Minimum bounding box: 799,0 799,799 0,799 0,0
  Properties:
    date:create: 2020-08-03T03:25:32+00:00
    date:modify: 2020-06-18T02:59:15+00:00
    minimum-bounding-box:_p: 0,0
    minimum-bounding-box:_q: 799,0
    minimum-bounding-box:_v: 798,799
    minimum-bounding-box:angle: 0
    minimum-bounding-box:area: 638401
    minimum-bounding-box:height: 799
    minimum-bounding-box:unrotate: -0
    minimum-bounding-box:width: 799
    png:IHDR.bit-depth-orig: 8
    png:IHDR.bit_depth: 8
    png:IHDR.color-type-orig: 6
    png:IHDR.color_type: 6 (RGBA)
    png:IHDR.interlace_method: 0 (Not interlaced)
    png:IHDR.width,height: 800, 800
    png:pHYs: x_res=2835, y_res=2835, units=1
    png:sRGB: intent=0 (Perceptual Intent)
    signature: e2875f86b03276de50966f8e48fb15ab8c84b97be74570d96d58b429fcc1522c
  Artifacts:
    verbose: true
  Tainted: False
  Filesize: 9229B
  Number pixels: 640000
  Pixels per second: 65.7632MP
  User time: 0.020u
  Elapsed time: 0:01.009
  Version: ImageMagick 7.0.10-27 Q16 x86_64 2020-08-11 https://imagemagick.org

Maybe there's some clues there?

Or are they stripping meta-data that Calibre is not?

Internally image-actions uses sharp. The default configuration is to not include metadata. You'll find reference of this in the sharp docs:

The default behaviour, when withMetadata is not used, is to convert to the device-independent sRGB colour space and strip all metadata, including the removal of any ICC profile.

AFAIK, the differences you've observed are not metadata related.

---

@bazzadp Once we've some details on the images themselves, we can start to explore the differences in output and take it from there.

[tunetheweb]

Thanks @benschwarz !

Please find attached all the details

CalibreVsTinyPNG-Details.xlsx

It looks to me like the histogram is about half the size - which is directly reflected in the file size.

I dunno if they just have a much more aggressive compression level, or if they use any magic to figure out what they can get away with in terms of compression level?