纯干货 —— 响应式图片解决方案

响应式图片不仅仅指图片的排版和布局，还包括根据设备大小加载不同的图片。在移动端设备上访问时，加载与用户设备相匹配的小图片，即快速，又不影响用户体验，也不会因为加载跟移动端不适配的高清大图导致用户流量出走。

有些在大屏里看着比较舒服的图片，在手机上看会觉得太小，里边的东西看不清；即使手机分辨率是1920×1080，PC和手机上的图片宽度都是1000，显示的效果也应该不一样，手机上的图片应当更加注重放大细节。而且在PC上显示的长条图片，在手机里最好把宽高比在调整的小一点。

             【A】适合在电脑上显示的图片

【B】适合在手机上显示的图片

总之，在设计响应式页面的时候，针对不同设备加载不同图片不仅能节约带宽，而且能有更好的显示效果。虽然图片差别不大，但是追求体验的用户能感觉出来，网页上大部分功能都很好实现，好网页和差网页最重要的差别还是体验和速度。不过这样做也增加了设计师做图的工作量。

本文将会介绍五种实现响应式图片的方法。

方法一：js或服务端

使用js实现响应式图片，在页面加载或改变浏览器大小时，根据屏幕尺寸判断显示哪张图片。示例参考：

或者将屏幕信息写入cookie，在获取图片的时候由服务前端返回相应的图片，这样就不需要写脚本。

方法一中需要通过编码实现响应式逻辑，兼容性不错，但在修改时极不方便，属于命令式的实现。那有没有声明式的实现呢？即把图片地址声明在HTML页面中，由浏览器自行决定如何加载。这样会更加灵活，将响应式脚本从我们的硬编码中分离出来，因其将展现和业务逻辑分来，一定程度上降低了耦合。经过前人的不断探索，出现了以下四种标记来解决声明式的响应式图片。这些新元素和新属性让我们可以编写多个可替换的原图片，浏览器会根据每个客户端提供最适合的图片进行显示。这些标签已经进入官方规范。

方法二：srcset

image标签的srcset属性用于设置不同屏幕密度下，浏览器自动加载不同的图片。

其中srcset指定图片的地址和对应的图片质量。
对于srcset里面出现了一个w单位，可以理解成图片质量。如果可视区域小于这个质量的值，就会使用对应的图片。

当然，浏览器会自动选择一个最大的可用图片。 从小屏幕切换到大屏幕，图片从480→800→1600依次改变，若再切回小屏幕，由于浏览器已经获取了高质量的1600图片（有缓存），图片不会变成480。

方法三：srcset配合sizes

这里存在一个问题，若给img添加一个外层容器，并且设置该容器的宽度为50%。图片容器缩小，但图片还是根据百分之百视口宽度进行缩放，而不是根据图片实际大小而改变（即浏览器缩放到800宽度时，此时图片宽度只有800*50*=400，但图片还是改变成了800的那张）。这就需要配合sizes属性进行优化。

sizes用来设置图片的尺寸临界点，明确定义了图片在不同的media conditions下应该显示的尺寸。若不设置sizes，其默认值为sizes="100vw"，vw（viewport width）是代表视口宽度的相对单位。

这里的100代表的是百分比。sizes="100vw"表示改变图片阈值是以百分之百的视口宽度为参考，不管图片外层容器大小和图片实际宽度，都是根据百分之百的视口宽度大小来选择显示哪张图片。

在设置外层容器为50%的案例中，若想图片切换是根据图片尺寸为标准，需要修改如下：

sizes还要其他的用法，示例，在最小宽度是800像素时，即大于等于800像素时，显示800像素的图片，其他情况下就是以百分之百的视口宽度为参考显示图片。

方法四：picture

浏览器会遍历 中的，直到找到一个满足当前环境，然后将该中的srcset设置到中。

跟方法三相比，方法四可以给图片设置多组的srcset。并且是通过媒体查询触发的改变，不会因为已经缓存了高质量大图而在屏幕变小的时候仍使用大图。

在实际应用中，我们可以根据横屏和竖屏设置不同组的。

方法五：svg

svg是可缩放的矢量图形，基于可扩展标记语言生成，svg图像可以用任何的文本编辑器创建。

矢量图形在缩放时不会失真和变形，不基于像素，而是基于绘制规则（颜色，形状，位置等），和位图相比，最大的缺点是很难表现丰富的色彩层次和逼真的效果。常用于logo、图标的绘制。

svg绘制工具推荐：Adobe Illustrator、https://editor.method.ac/、https://icomoon.io/

picturefill

我们使用picture来实现响应式轮播图时，存在一定的兼容性问题，需要用到polyfill（填平浏览器兼容性问题）。对于响应式图片的实现，我们需要用到的是picturefill，picturefill库对于不支持picture的浏览器会使用js来获取srcset和媒体查询规则再决定输出对应的图片。使用时，下载 picturefill.js在页面上引用就行。

图片压缩

压缩svg：https://iconizr.com/

压缩png：https://tinypng.com/

参考文档

响应式设计和HTML的标签

与君共勉：再牛逼的梦想，也抵不住傻逼般的坚持！