me icon indicating copy to clipboard operation
me copied to clipboard

Published 20 hours ago • verified publisher icon nonocast

关于图片的Point和Pixel关系的说明

Open nonocast opened this issue 2 years ago • 0 comments

单位体系

  • 国际单位制: SI Unit (来自法语Système international d'unités, 国际单位制), 又称公制或米制。源于法国大革命，1960年正式公布。SI已受大部分国家所采纳，但在英语国家中，SI并没有收到全面使用。它的基础是米-千克-秒制(KMS)
  • 英美单位制: Imperial Unit (英制单位) 和 U.S. Customary Units (美制单位，或称美国惯用单位)，它的基础是英寸-磅-秒
    • 1 feet (ft 英尺) = 12 inch (in 英寸)
    • 1 inch = 2.54 cm, inch在荷兰语中表示大拇指，即一节大拇指的长度，feet就是脚掌的长度，思路也是对的，用身体"部件"表示长度
  • 中国传统单位制 (司马制)
    • 1 丈 = 10 尺
    • 1 尺 = 10 寸
    • 1 米 = 3 尺

Typography (排版)

  • Point (typography) - Wikipedia中定义In typography, the point is the smallest unit of measure. It is used for measuring font size, leading, and other items on a printed page.
  • 印刷是指将文字或影像原稿迅速大量复制的一种技术，一般使用印刷机将油墨印在纸张上的过程，在旧世界中，所有都是机械结构，那么出版方和印刷方就需要约定度量单位，最后形成事实上的标准是1点等于1/72d inch，即单位inch包含72个points，一个point的物理长度为:
  • 排版单位: 1 point = 1/12 picas, 1 picas (派卡) = 12 points = 1/6 inch
  • imperial/US units: 1 point = 1/72 in
  • metric (SI) units: 1 point = 1/72 x 2.54cm = 0.03528cm = 0.3528mm = 3.528 µm (微米)

Digital Imaging (数字图像)

  • pixel是数字图像(digital imaging)领域词汇，pics (picture缩写)和el (element缩写)的组合，即图片(这里指raster image，点阵图，栅格图，区分矢量图片)中最小的元素。

Display Resolution (显示分辨率)

显示分辨率也称为解析度，泛指显示系统对细节的分辨能力。

关于评价分辨率有像素密度和像素总数两个指标:

  • 像素密度 (pixel density), 通常用PPI (pixels per inch) 表示，即一个inch上有多少个像素。
  • 像素总数，就是长边像素个数乘以短边像素个数。

以Dell UltraSharp 27英寸 4K显示器: U2720QM举例，我们通常会说这个显示器的分辨率是4K，其实这句话是不严谨的，翻译过来应该是：

  • 我们知道27英寸是显示器的对角线，即长为59.6cm, 宽为33.5cm的矩形平面，面积为0.2m2
  • 根据参数可得知每英寸像素163个，即PPI=163
  • 水平像素个数 = 59.6 / 2.54 x 163 = 3834
  • 垂直像素个数 = 33.5 / 2.54 x 163 = 2150
  • 屏幕像素总数为 3834 x 2150 差不多和广告宣传的"4K 3840 x 2160"一致
  • 通常我们讲的4K显示器是指水平像素有4096个，3840虽然差100+多个，但在一个量级上，也就差不多理解

理清概念以后就可以解释几个现象:

  • 同样4K的24英寸和27英寸的显示器，像素总数相同，但是24英寸的PPI大于27英寸的显示器，解析度也就越高，所以同等像素总数的情况下，尺寸越小密度就越高，工艺就越好，价格就越贵
  • 同样PPI的情况下，为什么16:9是1920x1080，而16:10是1920x1200，是因为他们的面积不同导致的
  • 同样尺寸的情况下，有的24英寸是4K有的就只有2K像素，差异就是PPI
  • 买显示器首先关注的指标应该是像素密度，即PPI，再者是刷新率(refresh rates)

苹果的Pro Display XDR已经到了218ppi，远超过刚才DELL的163

注: DPI中D表示dot指印刷用的墨点，但实际情况下DPI和PPI已经完全混用，有时候大家更喜欢用DPI的概率。

1x 2x 3x

The-Ultimate-Guide-To-iPhone-Resolutions

从上图你可以看到 ppi 已经从最早iPhone3GS的163一直飙到了458, 屏幕尺寸大了1.65倍，但是ppi已经是原来的2.8倍。换句话说，原先一张320x480像素的图片就能铺满3.5"的屏幕，但是现在只能占同尺寸屏幕1/9的区域，所以苹果必须让开发者提供比原来大9倍的像素总数才能重新填满屏幕，当然拉伸就不谈了。

所以你可以观察到苹果的Points是跟随物理尺寸，比如3.5"就是320x480, 5.5"就是等比的414x736，这个点和屏幕的ppi无关，和物理长度有关。

再以iPhone3GS为例，屏幕宽高比(Aspect ratio)为3:2，可以得知屏幕宽度为H (2.91 in), W (1.94 in), 已知当时ppi为163，所以2.91 x 163就约为480，水平约为320，当时的points就是ppi 163的像素数量，在iPhone3GS上实现了point数量等于pixel数量，但到了iPhone4一直到iPhone8，ppi都是326，所以就需要4倍像素填充，而到了iPhoneX则需要9倍像素，这就是如果一张图片在任何iPhone已知手机上显示全屏就必须提供1x,2x,3x多种格式。

回到NSImage

NSImage中的size是指需要在屏幕上占用的物理尺寸，而只有到了Representation才需要关心具体的PPI，系统会根据不同的屏幕ppi选择最合适的rep，即best choice。

Cocoa/NSImage上，系统会根基ppi 72进行计算，如果有一张图片是100x100像素且ppi 144，则NSImage load进来以后size是50x50，bitmap rep则是100x100。

最后来看看图片为什么需要DPI

简单来说，

  • 像素越多能在图片中表达的内容越大

  • DPI只是负责指导打印机在一个inch上打印多少个pixel

    • 如果一张图片是72x72，假设打印机dpi设置为72，则打印出来的尺寸就应该是1inx1in
    • 反之，如果我们做包装，现在打印尺寸是1inx1in，同时打印机的dpi是300，那么图片的像素就应该是300x300

  • mdls (metadata list)

~ mdls tesla.png 
_kMDItemDisplayNameWithExtensions      = "tesla.png"
kMDItemBitsPerSample                   = 32
kMDItemColorSpace                      = "RGB"
kMDItemComment                         = "Screenshot"
kMDItemDisplayName                     = "tesla.png"
...
kMDItemFSSize                          = 3911049
kMDItemHasAlphaChannel                 = 1
kMDItemImageIsScreenshot               = 1
kMDItemInterestingDate_Ranking         = 2022-01-31 00:00:00 +0000
kMDItemIsScreenCapture                 = 1
kMDItemKind                            = "PNG image"
kMDItemLastUsedDate                    = 2022-01-31 04:54:33 +0000
kMDItemLastUsedDate_Ranking            = 2022-01-31 00:00:00 +0000
kMDItemLogicalSize                     = 3911049
kMDItemOrientation                     = 0
kMDItemPhysicalSize                    = 3911680
kMDItemPixelCount                      = 4163856
kMDItemPixelHeight                     = 1556
kMDItemPixelWidth                      = 2676
kMDItemProfileName                     = "DELL P2415Q"
kMDItemResolutionHeightDPI             = 144
kMDItemResolutionWidthDPI              = 144
kMDItemScreenCaptureType               = "selection"
kMDItemUseCount                        = 1
kMDItemUsedDates                       = (
    "2022-01-30 16:00:00 +0000"
)
  • exiftool
exiftool tesla.png   
ExifTool Version Number         : 12.30
File Name                       : tesla.png
Directory                       : .
File Size                       : 3.7 MiB

File Permissions                : -rw-r--r--
File Type                       : PNG
File Type Extension             : png
MIME Type                       : image/png
Image Width                     : 2676
Image Height                    : 1556
Bit Depth                       : 8
Color Type                      : RGB with Alpha
Compression                     : Deflate/Inflate

Color Space Data                : RGB
Profile Connection Space        : XYZ
Profile Date Time               : 2022:01:31 12:26:28
Profile File Signature          : acsp
Primary Platform                : Apple Computer Inc.
CMM Flags                       : Not Embedded, Independent
Device Manufacturer             : Apple Computer Inc.
Exif Byte Order                 : Big-endian (Motorola, MM)
...
X Resolution                    : 144
Y Resolution                    : 144
Resolution Unit                 : inches
User Comment                    : Screenshot
Exif Image Width                : 2676
Exif Image Height               : 1556
Pixels Per Unit X               : 5669
Pixels Per Unit Y               : 5669
Pixel Units                     : meters
XMP Toolkit                     : XMP Core 6.0.0
Apple Data Offsets              : (Binary data 28 bytes, use -b option to extract)
Image Size                      : 2676x1556
Megapixels                      : 4.2

参考阅读

nonocast avatar May 06 '22 03:05 nonocast