这篇文章是系列的第二篇文章。系列文章：

现代照片性能优化和经验优化指南-图片类型和Picture标签的使用图片资源在我们的工作中占据了很大的一部分，尤其是对带宽的消耗非常大。

对绘画进行性能优化和经验优化在今天尤为重要。本文从各个方面介绍了在充满各种新功能的今天，如何尽可能多地使用照片资源进行性能优化和经验优化。

适配不同的屏幕尺寸及 DPR

在以下模块中，照片资源将更好地适合不同的屏幕大小。

首先介绍初步知识，屏幕上的DPR值。那么什么是DPR呢？要理解DPR，需要知道设备无关像素和物理像素是什么。

:以

设备独立像素

iphone 6/7/8为例，打开chrome开发人员工具。

其中375 * 667表示设备无关像素(DIP)或CSS像素(也称为逻辑像素)。

设备无关像素=CSS像素=逻辑像素

我怎么记得？在此，使用CSS像素进行记忆。也就是说，如果设置宽度为375px的div，则可以填充高度为667px的设备的一行。然后，div的大小可以填满整个屏幕。

物理像素

OK，那么什么是物理像素呢？如果你去电子商务网站购买手机，你会以JD上的iphone 7为例，查看手机的参数。

你看，iphone 7的分辨率是1334 x 750。这里描述了屏幕上的实际物理像素。

物理像素，也称为设备像素。显示屏由物理像素点组成，1334 x 750分别表示手机垂直和水平拥有的像素数量。您可以控制每个像素点的颜色，使屏幕上显示不同的图像。从工厂出来那天开始，屏幕上的物理像素点以pt为单位固定。

设备像素=实际像素

DPR（Device Pixel Ratio） 设备像素比

OK，通过以上两个概念，可以从逻辑上推导出以下概念。设备像素比率与我们常说的视网膜屏幕(多屏、Retina屏幕)有关。

设备像素比例描述了物理像素和设备无关像素在未缩放的情况下的初始缩放关系。

简单的计算公式：

DPR=物理像素/设备无关像素

让我们应用上面iphone 7的数据(计算设备的物理像素宽度和设备独立像素宽度)。

iphone 7 & amp；# 039；s DPR=iphone 7 & AMP；# 039；s物理像素宽度/iphone 7 & AMP；# 039；s设备独立像素宽度=2

750/375=2

或者1334/667=2可以得到iphone 7的DPR为2。这是我们常说的视网膜屏幕。

视网膜(Retina)屏幕是苹果公司的& amp# 039；发明& amp# 039；是营销用语。苹果称DPR 1屏幕为视网膜屏幕。

以视网膜屏幕上的DPR=2为例，如果使用4(2x2)像素作为1像素，屏幕看起来更精细，但元素大小不变。

好吧，再看看iphone xs max。

Img width=& amp# 039；300 & amp# 039；alt=& amp# 039；截图2019-07-08下午8 02 00 & amp# 039；src=& amp# 039；https://user-images . github user content . content

它的物理像素为2688 x 1242，如上图所示。

CSS像素是896 x 414，很容易看出iphone xs max的DPR是3。

为不同 DPR 屏幕，提供恰当的图片

那么DPR和照片适应有什么关系？

例如，在相同的CSS像素大小下，如果屏幕上有不同的DPR，则相同大小的图片将呈现不同的效果。

以Dpr=3的手机为例，在300 x 389 CSS像素大小范围内渲染1/2/3倍图片的效果如下：

实际图片占用的物理像素为900 x 1167。在高DPR设备上提供只有CSS像素大小的图片是非常模糊的。

因此，必须为其他DPR中的图片提供不同大小的图片，以避免图片在其他DPR屏幕上扭曲。

那么，有什么可行的解决办法呢？

:假设在

方案一：无脑多倍图

移动端需要300 x 200个CSS像素的图像。考虑到目前有DPR=3设备，在DPR=3设备上，为了使图片正常高清显示，最多可能需要900 x 600的原始图片。

这样，无论设备的DPR是否为3，都可以一致地使用3倍的图形。这样，即使在DPR=1、DPR=2设备上也能很好地展示照片。

当然，这样做是不可取的，会造成大量带宽浪费。

现代浏览器提供了根据设备DPR提供不同大小照片的更好方法。

方案二：媒体查询

方案二、可以考虑使用媒体查询。到今天为止，相应的媒体查询可以知道当前设备的DPR值，因此可以在相应的媒体查询中使用该图片。

就像这样。

# id { background:URL(XXX @ 2 x . png)} @ media(device-pixel-ratio:2){ # id { backer

要写的代码可能太多，可能有1 ~ 2，2 ~ 3之间的DPR值，也可能无法很好地提供所有场景中语法需要注意的兼容性，例如-Webkit-Min-Device-Pixel-Rate。当然，这可以由autoprefixer解决。

方案三：CSS 配合 image-set 语法

image-set是CSS background的语法之一，image-set()函数提供设备的最佳图像分辨率，并提供与每个选项相关的一组图像选项。

什么意思？请看代码。

.不支持img {/* image-set的浏览器*/background-image:URL(& amp；# 039；/photo @ 2 x . png & amp；# 039；)；/*支持image-set的浏览器*/background-image:image-set(URL(& amp；# 039；/photo @ 2 x . png & amp；# 039；)2x，url }这样看，作用应该很明显。对于支持Image-set语法的浏览器：

如果与该设备相对应的DPR为2，则此URL(& amp；# 039；/photo @ 2 x . png & amp；# 039；)将选择2x记录。也就是说，最终有效的URL是& amp# 039；/photo @ 2 x . png & amp；# 039；是。如果与该设备相对应的DPR为3，则此URL(& amp；# 039；/photo @ 3 x . png & amp；# 039；)将选择3x记录。也就是说，最终有效的URL是& amp# 039；/photo @ 3 x . png & amp；# 039；是。其中2x、3x用于匹配DRP。

使用Image-set的一些问题与媒体查询方案类似。代码量和兼容性语法以及所有情况都很难匹配。

方案四：srcset 配合 1x 2x 像素密度描述符

简而言之，srcset可以根据不同的DPR拉动相应大小的图片。

Div class=& amp# 039；illustration & amp# 039；imgsrc=& amp# 039；illustration-small . png & amp；# 039；srcset=& amp# 039；images/illustration-SMM

当屏幕的DPR=1时使用images/illustration-small.png当屏幕的DPR=2时，此图使用images/illustration-big.png

但是，以上三种方案都只考虑DPR，但忽略了响应布局的复杂性和屏幕多样性。

因此，规范还引入了与sizes属性w宽度描述符相匹配的srcset属性。

Srcset属性还具有w宽度描述符，可与sizes属性一起使用以复盖更多面。

如何理解Sizes属性？定义图像元素位于不同视口宽度时可能的大小值。

以下面的代码为例。

Imgsizes=& ampquot(最小宽度：600px) 600px、300px & amp# 039；src=& amp# 039；photo.png & amp# 039；srcset=& ampquotphoto @ 1x.

Sizes=& ampquot(最小宽度：600px) 600px、300px & amp# 039；表示：

如果屏幕的当前CSS像素宽度大于或等于600px，则图的CSS宽度为600 px；图的CSS宽度为300px。也就是说，“大小”(size)属性声明具有不同宽度的图的CSS宽度表示。可以理解为大屏幕下的图片宽度为600px，小屏幕下的图片宽度为300px。

其中大屏、小屏下图的具体宽度表示，或者通过媒体查询代码通过CSS进行SRCSET=& ampquotphoto @ 1x.png300w、photo @ 2x.png600w、photo & ampquot请注意，需要

那么，你如何决定在当前场景中选择哪幅画？

方案五：srcset 属性配合 sizes 属性 w 宽度描述符

当前屏幕CSS宽度为375px，照片CSS宽度为300px。将上述三个宽度描述符中的数值除以300。

300/300=1600/300=21200/300=4上面计算的1、2和4是转换为与x描述符对应的值的有效像素密度。其中，从600w计算的2表示满足DPR=2。请选择这幅画。

当前屏幕 dpr = 2 ，CSS 宽度为 375px。

如果当前屏幕CSS宽度为414px，则图片CSS宽度仍为300px。再次计算：

300/300=1600/300=21200/300=4 DPR=3，2已经不满意了，所以选择了1200w这个图。

当前屏幕 dpr = 3 ，CSS 宽度为 414px。

如果当前屏幕CSS宽度为1920px，则图片CSS宽度将更改为600px。再次计算：

由于300/600=. 5600/600=11200/600=2 DPR=1，因此将选取对应于600w的图形。

具体来说，您可以将此demo: code pen demo-srcset属性与w宽度描述符相匹配，使其与sizes属性相匹配。

这个方案的意义在于，考虑到应对性布局的复杂性和屏幕的多样性，PC端大屏幕和移动端高清屏幕、一举一动都可以一次性匹配。

嗯，总而言之，在实现响应图像时，请同时使用srcset和sizes属性。其作用如下：

Srcset:定义多个宽度不同的图像源，使浏览器可以在HTML解析期间选择最合适的图像源sizes。图像元素位于不同视口宽度时，如果可能的大小值具有这些属性，浏览器将根据srcset/size创建分辨率开关的响应图，从而根据分辨率提供相同的图像。

当前屏幕 dpr = 1 ，CSS 宽度为 1920px。

本章列出了适合不同屏幕大小、DPR的5种响应实现照片。

无脑倍频方式DRP媒体查询CSS Background中，IMAGE-

各有利弊，根据实际业务方案选择相对成本最低的方案，并适当组合Autoprefixer和一些PostCSS等工具，可以简化代码量。

当然，本文只是现代照片性能优化和经验优化指南的第二篇，接下来的内容如下：

图片的长宽比、裁剪和缩放显示了懒加载/异步图像解码方案的可访问性、图片资源的容错性和错误处理等知识，因此可能会引起关注。

本章总结

OK，这篇文章到此为止。希望这篇文章对你有帮助。）

更多CSS技术文章摘要内Github - iCSS、持续更新、STARS订阅收藏开始。

如果有更多的疑问或建议，可以多交流，原创文章、文笔有限，才能和学识浅，文章有不正之风，请告诉我。