字不如表，表不如图。在前端开发中我们的网站上60%都是图片，所以图片的数量是很大的。
图像问题优化主要分为：图像的选取和使用，图像的加载和显示
一，图像的选取
如果能用css样式可以表示出来图片所展示的重要信息和内容，就尽量不要使用图片。实在不能用css样式表示出来再使用图片。
矢量图和位图
- 1.1矢量图
矢量图中的图形元素呗定义为一个对象，主要用作品牌logo，控件图标，二维码，及一些简单图形
优点：能够在任何缩放比例下都可以呈现出细节同样清晰的展示效果
缺点：细节展示不够丰富,对复杂的图像若通过SVG进行矢量图绘制想要达到照片的效果文件会大的离谱
ps:SVG(scalable vector graphics)可缩放的矢量图形,是一种基于XML的图像格式.
- 1.2位图,是通过对一个矩阵中的栅格进行编码来表示图像的,组成图像的栅格像素点越多且每个像素点所表示的颜色越广.对于云朵及波浪的细节表现位图效果更好
一个像素点四个通道(rgba)就是4字节,当图像尺寸为100×100像素时,文件大小为39KB,10000个像素点×4字节 = 39.0625KB
分辨率
在前端开发中书写css时，经常会为图像设置显示所需长宽像素值，但在不同设备上，有时候相同图像及相同设置，其渲染的图像清晰度会有差距，那么主要就是涉及到两种分辨率：图像分辨率和屏幕分辨率
- 图像分辨率：就是该图像文件所包含的真实像素值信息，如200×200像素分辨率的图像文件，它就定义了长宽各200个像素点的信息
- 屏幕分辨率：就是显示器屏幕所能显示的最大像素值。如一个10×10像素的图像，可以使用10×10,20×20,40×40像素的设备分辨率来显示，但屏幕分辨率越高图像越清晰。
这里优化图片有一个img标签中的属性，是srcset属性可以用来针对不同设备,提供不同的分辨率图像.
语法格式:
<img src='1.jpg' srcset="photo@2x.jpg 2x,phott@3x.jpg 3x">
使用picture标签可以进行多图像文件选择，屏幕方向、设备大小、屏幕分辨率等
语法格式：
<picture>
<source media="{min-width:800px}" srcset="photo.jpg,photo-2x.jpg 2x">
<source media="{min-width:450px}" srcset="photo-small.jpg,photo-small 2x.jpg 2x">
</picture>
一个真实的场景：用户上传了一张高清图片，这张图片的展示媒介包括27英寸的iMac、15寸的Macbook Pro、各种尺寸的平板、各种分辨率的Windows本、各种尺寸和DPR的手机，如何保证图片在不同的媒介上都足够高清、图片体积尽可能小呢？
如iphone12pro的设备像素（分辨率）1170 x 2532
屏幕像素密度PPI（pixel per inch）:用于代表屏幕上每英寸可以显示的像素点的数量：当设备尺寸相同，但像素变得更密集时，屏幕能显示的画面过渡更细致，图像看起来就更清晰明快。
设备像素：设备像素指的是显示器上的真实像素,每个像素的大小是屏幕固有的属性,屏幕出厂以后就不会改变了。
逻辑像素：就是css像素 长宽，如
.box {
width:200px;
height:200px;
}
像素比：dpr = 同一方向上的 设备像素 / CSS像素 (缩放比是1的情况)
所以iPhone12pro的像素比就是1170 x 2532/390 x 844 = 3
假设一张图片水平铺满屏幕，在CSS里可以设置img { width: 390px }，而图片的原始宽度至少是1170px才能保证高清显示
图片的原始宽度 >= CSS里设置的宽度 x DPR这样才能高清显示
代码就应该写成
`<img src='1.jpg' srcset="photo@2x.jpg 3x">才可以高清显示
但在实际开发中我们的图片要适应网页端和移动端,所以根据实际尺寸来选择图片,写法如下
以IPhone11 (828 x 1792, DPR是2)和 Macbook Pro (2880 x 1800, DPR是2) 为例，二者的DPR相同。但如果一张图片想全屏高清展示在Macbook Pro上，实际宽度至少要是2880px，而IPhone11上只需要828px的图片即可实现高清全屏展示。
所以根据尺寸来选择显示什么图片
<img src="image.jpg"
srcset="image_S.jpg 600w,
image_M.jpg 900w,
image_L.jpg 1500w,
image_XL.jpg 3000w"/>
`如果需要实际宽度是600px的图片就加载imageS.jpg，如果需要实际宽度是2800px的图片就加载imageXL.jpg。需要实际宽度是多少该如何计算呢？
浏览器会用屏幕逻辑像素的宽度(screen.width) 乘以 DPR(window.devicePixelRatio) 计算出结果，再从列表里选一个最靠近计算结果的值对应的图片。
那么实现以下布局:
视口宽度大于900px，则每个图像的固定宽度为300px。
视口宽度在700px～900px，每个图像占用33vw，即总视口宽度的33％宽度。
视口宽度在450px～700px，每个图像占用50vw，即视口总宽度的50％。
视口宽度小于450像素，每个图像占用100vw，即整个视口宽度。
<!DOCTYPEhtml>
<html lang="en">
<head>
<meta name="viewport"content="width=device-width">
<style>
img{width: 300px;}
@media(max-width: 1000px){
img{width: 33vw;}//屏幕大于1000px 设置占总屏幕的33%
}
@media(max-width: 700px){
img{width: 50vw;}
}
@media(max-width: 450px){
img{width: 100vw;}
}
</style>
</head>
<body>
<img src="https://static.xiedaimala.com/images/study-map.png?imageView2/2/w/1200"
srcset="https://static.xiedaimala.com/images/study-map.png?imageView2/2/w/300 300w,
https://static.xiedaimala.com/images/study-map.png?imageView2/2/w/500 500w,
https://static.xiedaimala.com/images/study-map.png?imageView2/2/w/1000 800w,
https://static.xiedaimala.com/images/study-map.png?imageView2/2/w/1200 1200w"//后面的1200w 是所需实际宽度
sizes="(max-width: 450px) 100vw, (max-width: 700px) 50vw, (max-width: 1000px) 33vw, 300px">
</body>
</html>
明明在CSS里已经做了类似的设置，为什么还要在img标签里再写一遍？那是因为浏览器没办法在解析img标签时提前知道该图片在CSS里设置的布局是怎样的（假设能知道，就得要求在CSS全部解析之后才能加载图片，太迟了）。
sizes属性做了响应式设置后，浏览器就计算图片的大小，再根据DPR计算出需要加载图片的原始尺寸。从srcset里配置图片列表里选出最接近的一个执行加载。
像素的增加对于同样大小的网页图像，在旧手机里全屏展示，在新手机里却只需要一半的屏幕就显示出来了，剩下的另一半屏幕将成为空白，这降低了web用户的体验。
在JavaScript里可以通过window.devicePixelRatio获取到用户设备的DPR值。
对应到web开发中，就是需要根据不同的DPR缩放网页内容,计算公式为:
图片缩放尺寸=图片逻辑像素x DPR
具体以iPhone6为例，其屏幕宽度的物理像素共750个，逻辑像素是375px,所以DPR = 750/375= 2,为了适配iPhone6,应该使用2倍大小的图片进行展示。
搞明白 dips，我们举个简单例子，MacBook Pro 13.3 英寸的显示器分辨率是 2560 x 1600，这个 2560px 就是我们前面说的设备上的物理像素值，而浏览器全屏显示的宽度只有 1280px，这个就是 dips 值，最终可以知道这台 MacBook Pro 电脑屏幕的 DPR 为 2，DPR 在这里所表达的意思就是：1280 dips 在实际显示的时候，被硬件扩展到了 2560 的硬件像素宽度，2 个物理像素对应 1 个 CSS 像素（这个指的水平方向或垂直方向，如果在一个平面内的话 4 个物理像素点对应 1 个 CSS 像素点）。
如果现在上面这台电脑里有一张实际宽度为 200px 的高清图片，在浏览器里被 css 设置宽度为 200px，那么这张图片看起来就会有点模糊，因为它实际被硬件扩展到了 400px 的硬件像素宽度，是它实际宽度的两倍。但是，如果它被 css 设置宽度为 100px，这时候它实际被硬件扩展到了 200px 的硬件像素宽度，和它实际像素一致，就不会模糊了。
网友评论