3344体育在线登录

网站建设的图片常见应用策略与技巧发布者：本站     时间：2020-02-24 09:02:12

1. 响应式图像的应用与回退
特点：应用简单，上手容易，性能表现良好
难点：lazyload实现

根据不同设备，不同分辨率，不同像素比使用的响应式图像，常用的有两种场景：

1.1 固定尺寸图像

基于设备像素比选择，很多网站logo就是固定宽度图像的一个例子，不管viewport的宽度如何，始终保持相同的宽度。

在dom里图像与在css里的图像写法如下面的例子

<img srcset="test.jpg 1.5x, test2.jpg 2x" src="test.jpg" />

background-image: image-set(url(test.jpg) 1x,url(test2.jpg) 2x);
1.2 不固定尺寸图像

与内容相关的图片，在需要响应式的时候，它们的大小往往并不是不变的，会随viewport改变，对于这类图像，也有两种常用的处理方式

1.2.1 我们使用srcset搭配w描述符以及sizes属性 。

w描述符告诉浏览器列表中的每个图象的质量。sizes属性是一个包含两个值的，由逗号分隔的列表。根据最新规范，如果srcset中任何图像使用了w描述符，那么必须要设置sizes属性。

sizes属性有两个值：第一个是媒体条件；第二个是源图尺寸值，在特定媒体条件下，此值决定了图片的宽度。

比如：

<img srcset="360.jpg 360w,
 768.jpg 768w,
 1200.jpg 1200w,
 1920.jpg 1920w"
 sizes="
 (max-width: 360px) 100vw,
 (max-width: 768px) 90vw,
 (max-width: 1980px) 80vw,
 768px"
 src="360.jpg" >
我们来逐条读这一个img标签的信息

srcset，我们给浏览器准备了四个质量的图像，分别为360 768 1200 1920

sizes，我们来告诉浏览器，在不同的环境下图像的宽度

当视口不大于360的时候，图像显示宽度为100vw，当视口不大于768的时候，图像显示宽度为90vw，以此类推。

最后一个src作为默认图像url引入，并且是天然的回退方案，当浏览器不认识以上属性的时候，直接读取src渲染。

这样说不够直观，我们看个demo

腾讯专业干货！Web图像的常见应用策略与技巧

在iphone4（320）下，图像宽度和我们设置的100vw一致，但是为什么浏览器选择了768的图像而没有选择360的?因为4的dpr是2呀^_^，浏览器很智能的选择了质量最合适的768.

再看一下6p（414），很听话的按照我们的设置，显示了90vw。因为他的dpr更高，浏览器聪明的选择了1200质量的图像。

腾讯专业干货！Web图像的常见应用策略与技巧

这里我们可以欺骗一下浏览器：

360.jpg 1200w,
1200.jpg 9999w
我们把360的图像，骗浏览器说这是1200的，然后把原本1200的扔天上去

腾讯专业干货！Web图像的常见应用策略与技巧

浏览器果然上当了，他把360的图当成1200的来用了。这里可能有些疑问，图像的宽度为什么不是90vw了哪？因为浏览器被骗了但是自己却不知道，他依然按照1200的图像，去适配dpr。414*90%*（360/1200）约等于111.7。这种方式很智能，浏览器去根据你的sizes，从w列表里选择最适合的图像来调用显示。正因为他太智能了，在实际操作中可控性较差，有些我们想精确控制的图像显示，有时候并不能如意。而且在做lazyload的时候要处理的东西也比较复杂。

这个时候可以考虑另外一种方式。

1.2.2.picture元素，可精确把控

picture元素就像是图像和其源的容器。浏览器仍然需要img元素，用来表明需要加载图片，如果没有img，那么什么都不会渲染。source为浏览器提供了要显示图像的供选版本。

适用场景为：在一个精确特定的转效点（breakpoint）需要显示一个特定的图像时。使用picture元素选择图像，不会有歧义，理解起来也更直观。

<picture>
 <source media="(min-width: 960px)" srcset=960.jpg">
 <source media="(min-width: 768px)" srcset="768.jpg">
 <img src="360.jpg" >
</picture>
在本例中，当viewport大于960像素时，会加载图像960的图像。当viewport宽度大于768像素时，浏览器会加载768的。而当宽度小于768像素时，加载默认图像360。

而且这个写法的懒加载非常好处理，只需要在传统的lazyload策略上稍加改进

data-src
data-srcset

在加载到的时候更换为

src
srcset