具有相同分辨率、相同像素数量但一个比另一个大 3 倍的图像

Question

我正在处理来自 HTML5 canvas 的两张图像，使用 toDataUrl() 将其导出到 base64 并生成这些图像文件，它们具有相同的像素数量和相同的分辨率，但是一个图像文件的大小是另一个的 3 倍。

这是小尺寸图片(1MB)：

这是大尺寸的 (3MB)：

如您所见，唯一的区别是网格中的黑点。

这里是图像 magick 的 indentify 详细输出。非虚线图：

Image: pontoSem.jpg
Format: JPEG (Joint Photographic Experts Group JFIF format)
Mime type: image/jpeg
Class: DirectClass
Geometry: 1805x1520+0+0
Resolution: 72x72
Units: PixelsPerInch
Type: TrueColor
Endianess: Undefined
Colorspace: sRGB
Depth: 8-bit
Channel depth:
  red: 8-bit
  green: 8-bit
  blue: 8-bit
Channel statistics:
  Pixels: 2743600
  Red:
    min: 0 (0)
    max: 255 (1)
    mean: 239.227 (0.938144)
    standard deviation: 50.1041 (0.196486)
    kurtosis: 9.08055
    skewness: -3.19968
  Green:
    min: 0 (0)
    max: 255 (1)
    mean: 241.654 (0.947662)
    standard deviation: 44.0232 (0.17264)
    kurtosis: 9.84544
    skewness: -3.28708
  Blue:
    min: 0 (0)
    max: 255 (1)
    mean: 239.038 (0.937403)
    standard deviation: 50.3878 (0.197599)
    kurtosis: 8.93501
    skewness: -3.18354
Image statistics:
  Overall:
    min: 0 (0)
    max: 255 (1)
    mean: 239.973 (0.94107)
    standard deviation: 48.2611 (0.189259)
    kurtosis: 9.42491
    skewness: -3.24166
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)
Background color: white
Border color: srgb(223,223,223)
Matte color: grey74
Transparent color: black
Interlace: None
Intensity: Undefined
Compose: Over
Page geometry: 1805x1520+0+0
Dispose: Undefined
Iterations: 0
Compression: JPEG
Quality: 100
Orientation: Undefined
Properties:
  date:create: 2017-03-02T16:56:35-03:00
  date:modify: 2017-03-02T16:52:35-03:00
  jpeg:colorspace: 2
  jpeg:sampling-factor: 2x2,1x1,1x1
  signature: 23b092dd21773df0a63a3fffe8241f9916354e3d29638979d672e9cb91026c25
Artifacts:
  filename: pontoSem.jpg
  verbose: true
Tainted: False
Filesize: 1.063MB
Number pixels: 2.744M
Pixels per second: 45.73MB
User time: 0.040u
Elapsed time: 0:01.060
Version: ImageMagick 6.8.9-9 Q16 x86_64 2017-02-22

这里是最大的图片（虚线部分）的名称

Image: pontoCom.jpg
Format: JPEG (Joint Photographic Experts Group JFIF format)
Mime type: image/jpeg
Class: DirectClass
Geometry: 1805x1520+0+0
Resolution: 72x72
Print size: 25.0694x21.1111
Units: PixelsPerInch
Type: TrueColor
Endianess: Undefined
Colorspace: sRGB
Depth: 8-bit
Channel depth:
  red: 8-bit
  green: 8-bit
  blue: 8-bit
Channel statistics:
  Pixels: 2743600
  Red:
    min: 0 (0)
    max: 255 (1)
    mean: 239.227 (0.938144)
    standard deviation: 50.1041 (0.196486)
    kurtosis: 9.08055
    skewness: -3.19968
  Green:
    min: 0 (0)
    max: 255 (1)
    mean: 241.654 (0.947662)
    standard deviation: 44.0232 (0.17264)
    kurtosis: 9.84544
    skewness: -3.28708
  Blue:
    min: 0 (0)
    max: 255 (1)
    mean: 239.038 (0.937403)
    standard deviation: 50.3878 (0.197599)
    kurtosis: 8.93501
    skewness: -3.18354
Image statistics:
  Overall:
    min: 0 (0)
    max: 255 (1)
    mean: 239.973 (0.94107)
    standard deviation: 48.2611 (0.189259)
    kurtosis: 9.42491
    skewness: -3.24166
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)
Background color: white
Border color: srgb(223,223,223)
Matte color: grey74
Transparent color: black
Interlace: None
Intensity: Undefined
Compose: Over
Page geometry: 1805x1520+0+0
Dispose: Undefined
Iterations: 0
Compression: JPEG
Quality: 100
Orientation: Undefined
Properties:
  date:create: 2017-03-02T16:56:35-03:00
  date:modify: 2017-03-02T16:52:35-03:00
  jpeg:colorspace: 2
  jpeg:sampling-factor: 2x2,1x1,1x1
  signature: 23b092dd21773df0a63a3fffe8241f9916354e3d29638979d672e9cb91026c25
Artifacts:
  filename: pontoSem.jpg
  verbose: true
Tainted: False
Filesize: 1.063MB
Number pixels: 2.744M
Pixels per second: 45.73MB
User time: 0.040u
Elapsed time: 0:01.060
Version: ImageMagick 6.8.9-9 Q16 x86_64 2017-02-22

我只是想知道为什么添加一些黑点会使文件大小增加三倍，因为它们具有相同的像素数和相同的 dpi 分辨率。谢谢指教:)

Answer 1

这是由于压缩，第一张图片上的白色方块比第二张图片更容易压缩，随机性更高，因为图片描述符说它使用的是 JPEG 压缩。由于大部分表面区域都使用此背景，因此很容易影响整体大小，因为它会降低压缩算法的效率。

Answer 2

Jpeg 格式使用一些巧妙的技巧来减小相对于原始位图图像的图像大小。这些技术的成功取决于所表示的特定图像，并且通常在靠近的像素之间没有明显差异时效果更好。白底黑点，就是那种让人难以接受的东西。

在第一张图片中，很多 space 可以描述为 "this area is all white"，而第二张图片需要更长的描述来提及那些黑色像素附近的每个像素的颜色，即几乎无处不在

具有相同分辨率、相同像素数量但一个比另一个大 3 倍的图像

Images with the same resolution, same pixel quantity but one is 3X larger than the other

jpeg

canvas

image