摘要：响应式图片加载与用户设备相匹配的图片，既快速又不会影响用户体验或者服务器使用图片使用图片直接看代码，就是读取浏览器选择相对应的图片，此外还可以设置配置不同图片。矢量图解决响应式问题，不做描述，也是解决方式之一。
如何挑选第三方组件，轮播carousel插件，owl-carousel2
响应式图片
图片压缩，与webp
如何挑选第三方组件不重复造轮子，就要选择一个好轮子：
1.使用人数
2.是否开源
3.文档是否齐全
4.活跃性
5.轻量级
随便选一个，轮播的插件还是很多的owl-carousel2，符合上述条件，使用看官方文档还是比较简单上手的。
加载与用户设备相匹配的图片，既快速又不会影响用户体验！
1.js或者服务器
$(document).ready(function () {
function makeImageResponsive() {
var width = $(window).width();
if(width < 400){使用A图片}else {使用B图片}
}
$(window).on("resize load",makeImageResponsive);
})
直接看代码，就是读取浏览器width选择相对应的图片，此外还可以设置cookie配置不同图片。
2.srcset和sizes
看大神的解释
响应式图片srcset全新释义sizes属性w描述符，列子如下
3.
通过媒体查询的方式，根据页面宽度（当然也可以添加其他参考项如是否横屏）加载不同图片。这样不仅节省带宽还能使得图片更加适配内容。但是好事都没有这么顺利，现在很多浏览器不支持picture标签。
这里就需要引入另一个概念--Polyfill
举个例子，html5的storage(session,local), 不同浏览器，不同版本，有些支持，有些不支持。
我们又想使用这个特性，怎么办？
有些人就写对应的Polyfill（Polyfill有很多），帮你把这些差异化抹平，不支持的变得支持了（简单来讲，写些代码判断当前浏览器有没有这个功能，没有的话，就写一些支持的补丁代码）。
你只需要把需要的Polyfill引入到你的程序里，就可以了。所以picture标签也有它自己的polyfill--picturefill.js，引入JS则低版本浏览器可以兼容picture标签。
4.svg
svg矢量图解决响应式问题，不做描述，svg也是解决方式之一。
图片压缩可以给用户带来极大体验度提升，UI给出的png图通过压缩后一般可以缩小1/3，且像素效果差不多。
推荐网站
webp是谷歌开发的图片格式，同质量下比jpg小1/3。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116563.html
摘要：那如何做到图片随容器宽度变化而变化呢就像下面图片的效果这里面的张图片在不同宽度的容器里，图片的宽高比始终保持不变实现原理让图片脱离标准文档流，这样就可以设置图片的高度为然后再设置包裹图片的父容器的或，这样图片才能有高度并且一直保持这个比例。 图片响应式 在响应式开发中最烦恼的应该就是图片了，虽然图片设置max-width: 100%;可以让图片宽度占满容器，但是高度就不能自适应了。如果...
摘要：那如何做到图片随容器宽度变化而变化呢就像下面图片的效果这里面的张图片在不同宽度的容器里，图片的宽高比始终保持不变实现原理让图片脱离标准文档流，这样就可以设置图片的高度为然后再设置包裹图片的父容器的或，这样图片才能有高度并且一直保持这个比例。 图片响应式 在响应式开发中最烦恼的应该就是图片了，虽然图片设置max-width: 100%;可以让图片宽度占满容器，但是高度就不能自适应了。如果...
阅读 1556·2021-11-25 09:43
阅读 2454·2019-08-30 15:54
阅读 2912·2019-08-30 15:53
阅读 1069·2019-08-30 15:53
阅读 729·2019-08-30 15:52
阅读 2517·2019-08-26 13:36
阅读 789·2019-08-26 12:16
阅读 1186·2019-08-26 12:13
