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

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

有些在大屏里看着比较舒服的图片,在手机上看会觉得太小,里边的东西看不清;即使手机分辨率是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

发表评论

邮箱地址不会被公开。