响应式图片不仅仅指图片的排版和布局，还包括根据设备大小加载不同的图片。在移动端设备上访问时，加载与用户设备相匹配的小图片，即快速，又不影响用户体验，也不会因为加载跟移动端不适配的高清大图导致用户流量出走。
有些在大屏里看着比较舒服的图片，在手机上看会觉得太小，里边的东西看不清；即使手机分辨率是1920×1080，PC和手机上的图片宽度都是1000，显示的效果也应该不一样，手机上的图片应当更加注重放大细节。而且在PC上显示的长条图片，在手机里最好把宽高比在调整的小一点。
【A】适合在电脑上显示的图片
【B】适合在手机上显示的图片
总之，在设计响应式页面的时候，针对不同设备加载不同图片不仅能节约带宽，而且能有更好的显示效果。虽然图片差别不大，但是追求体验的用户能感觉出来，网页上大部分功能都很好实现，好网页和差网页最重要的差别还是体验和速度。不过这样做也增加了设计师做图的工作量。
本文将会介绍五种实现响应式图片的方法。
方法一：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，在获取图片的时候由服务前端返回相应的图片，这样就不需要写脚本。
方法一中需要通过编码实现响应式逻辑，兼容性不错，但在修改时极不方便，属于命令式的实现。那有没有声明式的实现呢？即把图片地址声明在HTML页面中，由浏览器自行决定如何加载。这样会更加灵活，将响应式脚本从我们的硬编码中分离出来，因其将展现和业务逻辑分来，一定程度上降低了耦合。经过前人的不断探索，出现了以下四种标记来解决声明式的响应式图片。这些新元素和新属性让我们可以编写多个可替换的原图片，浏览器会根据每个客户端提供最适合的图片进行显示。这些标签已经进入官方规范。
方法二：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>
方法四：picture
<picture>
<source srcset=”large.jpg” media=”(min-width: 800px)”>
<source srcset=”medium.jpg” media=”(min-width: 600px)”>
<img srcset=”small.jpg”>
</picture>
浏览器会遍历<picture> 中的<source>，直到找到一个<source>满足当前环境，然后将该<source>中的srcset设置到<img>中。
跟方法三相比，方法四可以给图片设置多组的srcset。并且是通过媒体查询触发的改变，不会因为已经缓存了高质量大图而在屏幕变小的时候仍使用大图。
在实际应用中，我们可以根据横屏和竖屏设置不同组的<source>。
方法五：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/
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_32614411/article/details/82223812