响应式图片解决方案

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

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

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

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

方法一：js或服务端

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

<script>
  $(document).ready(function(){
    function makeImageResponsive() {
      var width = $(window).width()
      var img = $('.content img')
      if (width <= 480) {
      	img.attr('src', 'img/480.png')
      } else if (width <= 800) {
      	img.attr('src', 'img/800.png')
      } else {
      	img.attr('src', 'img/1600.png')
      }
    }
    $(window).on('resize load', makeImageResponsive)
  })
</script>

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

方法二：srcset

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

<div style="width:100%;">
	<img style="width:100%;" src="img/480.png" srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w">
</div>

其中srcset指定图片的地址和对应的视口宽度。
对于srcset里面出现了一个w单位，视口宽度。如果可视区域小于视口宽度的值，就会使用对应的图片。

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

方法三：srcset配合sizes

<div style="width:50%;">
	<img style="width:100%;" src="img/480.png" srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w">
</div>

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

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

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

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

<div style="width:50%;">
  <img style="width:100%;" src="img/480.png" srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w" sizes="50vw">
</div>

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

<div style="width:100%;">
  <img style="width:100%;" src="img/480.png" srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w" sizes="(min-width: 800px) 800px, 100vw">
</div>

https://www.zhangxinxu.com/wordpress/2014/10/responsive-images-srcset-size-w-descriptor/
方法四：picture

<picture>
  <source srcset="large.jpg" media="(min-width: 800px)">
  <source srcset="medium.jpg" media="(min-width: 600px)">
  <img srcset="small.jpg">
</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/

响应式背景图片插件

postcss-image-set-function