Hot For Coding

网页中的图片

我们字符集是定义字符跟数字关系方便用于传输,但计算机中如何显示图片呢?一样,计算机并不知道图片是什么,是我们抽象出来的某种可以使用计算机表达的数据集。

图片原理

以简单的来说,所有颜色都可以使用红绿蓝调出所有颜色,简称RGB(Red, Green, Blue),CSS上还有一个可以使用的叫RGBA,其中A是Alpha可以表达透明度。也就是是三组值即可以表达一种颜色,当然这三个值肯不能无限大,毕竟只要肉眼分辨不出来的色值即可,以网页为例子,RGB只能定义三需要在0到255之内的值组成。这里每一个色值最高只能到255估计跟一个字节大小有关,表达RGB固定占用三个字节。

假定要表达10 X 10像素的图片,此图片预计需要。

10 X 10 X 3Byte + Header = 300Byte+

以上的头部信息可能包含文件修改日期,创建人,文件名等等估计这个头部信息可能也要占用一两百字节,但大头还是实际内容体占的多,所以如果一张1024 X 1024像素的图片,占用预计

1024 X 1024 X 3Byte + Header = 1MB+

于是有人就问了,那岂不是图片越大占用的空间越大吗?下面就回答这个问题

png/jpg

计算机通信一直致力解决一个问题,通过更小的字节表达更复杂的内容,图片就是其中一种内容,尤其是互联网广泛使用之后这个需求尤为明显。

png/jpg就是图片的一种优化算法后的编码,因为在网页端传输内容主要考虑两方面

  • 体积小,计算机是按包传输的,每一个包有一定数量的字节,反正就理解为告诉公路,车辆就是字节,道路就是带宽,字节越少传输速度就越快,越多就越拥堵
  • 算法也不能太复杂,因为太复杂了消耗CPU运算很久才能绘制出图像也不见得通用,SVG就是一种非常消耗CPU的矢量表达语言。所以算法就得很简单,而且要平台通用,不能PC端能解析,手机端也要能解析

质量

通常在固定的算法下,还有一种模式可以减少图片的体积,就是牺牲图片的质量,这也是目前大图传输常用的做法。目前受移动端通信的网速受限,在没有更优的图片编码格式出来之前,只能减少图片的使用量或者降低质量减少网页呈现的总体大小

分享

TITLE: 网页中的图片

LINK: https://www.qttc.net/413-image.html

NOTE: 原创内容,转载请注明出自琼台博客