markdown 像素和分辨率，图片大小和格式

Posted 2021-05-05

>显示在计算机屏幕上的图像由称为像素的小方块构成。屏幕的分辨率就是每英寸的屏幕上所容纳的像素的个数，这个数值在用户提高或降低分辨率时会发生相应的变化。
>如果将分辨率从640*480提高到1024*768，那么屏幕上显示的图像和文本将变小，这是因为屏幕在同样大小的空间内显示了更多的像素。

图像往往比构成页面中的其余HTML代码耗费更多的加载时间. 所以, 一种好的解决办法是事先指定图像的大小, 这样浏览器就可以为正在加载的图像留出合适的空间余量, 同时继续显示页面上的其余文本.

为图像指定大小有助于更加流畅地加载页面, 因为HTML和CSS代码通常会在图像之前加载, 并告诉浏览器需要为图像预留多大的空间, 这样页面的其余部分就不必等待图像加载完毕即可显示出来.

## PPI VS DPI

- PPI和DPI是分辨率，resolution
- PPI用于显示器，一个像素一个格子，“每英寸像素”，表示一行一英寸长有几个格子
- DPI用于打印机，“每英寸墨点”

>显示器的一格，打印机是6*6格，即从一行看，打印机dpi值= 6 ＊电脑ppi值
>假如一幅图在电脑中是72ppi，那么为了印刷完成后图片的保真度是百分之百（每个墨点有独立数据, 图片所有的视觉信息都被印刷出来），打印机得72*6=432dpi。

[PPI vs. DPI: what’s the difference?](https://99designs.com/blog/tips/ppi-vs-dpi-whats-the-difference/)

## 矢量图与位图

矢量图与位图均为图像的表述方式，矢量图可以理解为在我们口中描述图形的方法，
比如：图A：一个半径10cm的绿色实心圆，重点包括：圆、实心、绿色、半径为10cm、圆心位置，这些信息只需要很少的字节即可记录图A，因而，矢量图所占空间较小；
还有一个特点就是放大以后不会变形，因为不管放多大，其特征都是固定的。矢量图缺点也很明显，难以表述复杂场景。
基于矢量图放大不变形的特点，目前有一个重要的应用场景是电子地图。

位图的基本单元为像素，位图即是像素的集合，具体到某一张平面图片，将其量化为width*heigh的像素矩阵，每个像素使用一定的规则（RGB或YUV）进行表述，得到整个图片的二进制文件格式即为位图。
不经过处理的位图持有原图的全部数字化信息，图片文件比矢量图要大很多。

## RGB YUV

## JPEG PNG GIF SVG