前端开发中的各种图片原理
前言 随着web的发展,网站资源的流量也变得越来越大。据统计,60% 的网站流量均来自网站图片,可见对图片合理优化可以大幅影响网站流量,减小带宽消耗和服务器压力。 有时候你花大力气去配置 webpack 使打包体积减少,不如好好优化几张图片,这篇文章就是让你明白如何选择正确的图片,并且让你明白这么多图片格式,在什么场景下使用什么格式,如果想看答案,那么直接滑到文末看图即可。 基本概念 在进入正题之前,先聊聊一些图片相关的基本概念。 一张照片(位图)不断放大之后,会看到一个个小格子,这些小格子,叫像素。 一个格子(像素),在计算机中,用二进制来表示,使用的二进制位数越多,像素的色彩就越丰富。 举个🌰,如果一个像素用一位二进制数表示,能有多少种颜色呢? 两种,一个二进制位,要不放 0(表示黑色),要不放 1(表示白色) 下图展示了一个像素二进制的位数最多可以展示多少种颜色。 在对图片有了基本的了解之后,接下来对图片进行分下类,有利于理解各种格式图片的特点。 根据图的类型分类 点阵图(位图) 矢量图 位图(点阵图) 位图,也叫做点阵图,像素图。构成点阵图的最小单位是像素,位图就是由像素阵列的排列来实现其显示效果的, 每个像素有自己的颜色信息 ,在对位图图像进行编辑操作的时候,可操作的对象是每个像素,我们可以改变图像的色相、饱和度、透明度,从而改变图像的显示效果。