响应式图片的实现(含picture标签、srcset属性、sizes属性的使用方法,设备像素比详解)

简介: 响应式图片的实现(含picture标签、srcset属性、sizes属性的使用方法,设备像素比详解)

什么是响应式图片?

响应式图片即针对不同的设备分辨率和尺寸,显示对应的最佳分辨率的图片。

具体表现为:

  • 高分辨率的屏幕,显示高分辨率图像(确保高清屏上,图片依然足够清晰)
  • 低分辨率的屏幕,显示低分辨率图像(提升移动端网速较慢时的访问速度)。

高清屏是怎样让图片变模糊的?

此时需要学习一个新概念 —— 设备像素比

设备像素比 = 物理像素(设备像素) / 独立像素(CSS像素)
  • 普通屏上1个css像素对应1个物理像素
  • 高清屏上1个css像素对应4个或更多物理像素

以css像素为200px*300pximg标签为例,普通屏幕下对应的物理像素为200*300,而高清屏(如苹果的retina屏幕)对应物理像素为400*600

即4个物理像素显示一个css像素

若图片资源的分辨率为200*300

  • 在普通屏幕上,1个css像素刚好对应1个物理像素,则图片能清晰显示

  • 在高清屏幕上,1个css像素对应4个物理像素,而位图像素不可分割,屏幕便只能就近取色,导致图片模糊

为了解决高清屏导致图片模糊的问题,便需要使用更高分辨率的图片,如400*600的图片,但更高分辨率的图片尺寸也会更大,需要消耗更长的页面加载时间。


对于普通屏,更高分辨率的图片虽然不会模糊,但会少一些锐利度或者色差,同样会造成资源浪费。


所以最佳方案为:随屏幕分辨率的不同,加载对应分辨率的图片。

响应式图片的实现

通常每个位图图像需要创建至少四个版本:

  • source_1x.png “正常”尺寸,如 200*300
  • source_2x.png 两倍大小, 400*600
  • source_3x.png 三倍大小, 600*900
  • source_4x.png 四倍大小, 800*1200

而纯矢量图形,导出一个SVG文件即可。因为SVG文件可无限扩展,无论分辨率如何,在所有屏幕上的显示效果都很好,且当前所有浏览器版本均支持。

srcset属性实现设备像素比自适配

srcset 属性内对源图片的数量没有限制

<img src="source_1x.jpg" srcset="source_2x.jpg 2x, source_3x.jpg 3x, source_4x.jpg 4x">

在设备像素比为1时会显示图片source_1x.jpg

在设备像素比为2时会显示图片source_2x.jpg

在设备像素比为3时会显示图片source_3x.jpg

在设备像素比为4时会显示图片source_4x.jpg


浏览器的缩放,也会改变设备像素比,如把页面放大到200%时,设备像素比会变为2,此时便会显示图片source_2x.jpg

srcset 属性实现屏幕宽度自适配

<img src="source.jpg" width="100%" srcset="source_400.jpg 400w, source_600.jpg 600w, source_1280.jpg 1280w">

w 为宽度描述符,以电脑的浏览器为例,设备像素比为1时,当浏览器窗口大小为 400px,则此时图片的实际宽度为 400px*1 = 400w,则会显示图片 source_400.jpg


调整浏览器窗口大小为 600px,则图片的实际宽度为 600px*1 = 600w,显示图片 source_600.jpg

srcset + sizes 属性实现屏幕宽度和分辨率的自适配

sizes 用来表示尺寸临界点,语法为

sizes="[media query] [value], [media query] [value] ... "

所有的值都是指宽度值,且单位可以为PX, VW, EM甚至是CSS3中的计算值CALC

<i<img src="source.jpg" 
 sizes="(max-width: 376px) 375px, (max-width: 769px) 768px, 1024px"
 srcset="source_375.jpg 375w, source_768.jpg 768w, source_1024.jpg 1024w">

当屏幕宽度为 0 ~ 376px 时,图片宽度按照375px计算

当屏幕宽度为 376 ~ 769px 时,图片宽度按照768px计算

当屏幕宽度大于 769px 时,图片宽度按照1024px计算

在普通的PC电脑上,浏览器缩放比例为100%时,屏幕的设备像素比是1,当浏览器窗口大小为 0 ~ 376px 时,sizes属性计算值为375px,则图片的实际宽度为375*1=375w,此时浏览器会加载图片 source_375.jpg。

在iphone6/7/8中,屏幕的设备像素比是2,sizes属性计算值为375px,则图片的实际宽度为375*2=750w,此时,375w < 750w < 768w, 则会加载图片 source_768.jpg 。

iphone plus 和 iphone X中,屏幕的设备像素比是3,sizes属性计算值为375px,则图片的实际宽度为375*3=1125w,加载图片 source_1024.jpg。

picture 标签详解

picture 标签是专门针对响应式的需求设计的标签,用于实现在不同的设备上显示不同的图片。

<picture>
  <!-- 页面宽度为 0-640px -->
  <source
    media="(max-width: 640px)"
    srcset="small@2x.jpg 2x, small.jpg 1x"
  />
  <!-- 页面宽度为 640-960px -->
  <source
    media="(max-width: 960px)"
    srcset="medium@2x.jpg 2x, medium.jpg 1x"
  />
  <!-- 页面宽度 >960px,图片大小变为视口的三分之一 -->
  <source
    srcset="large@2x.jpg 2x, large.jpg 1x"
    sizes="calc(100vw / 3)"
  />
  <!-- 浏览器不支持 picture时 -->
  <img src="small.jpg" />
</picture>

media="(max-width:640px) 表示在页面宽度不足640px的情况下,使用该<source>标签所提供的图片来源作为它所在<picture>元素显示图片的图片来源。

srcset="small@2x.jpg2x,small.jpg1x 告诉浏览器,该来源同时又为同一素材图片提供了两种清晰度的版本small@2x.jpg和small.jpg,分别供高清设备与标清设备选择。浏览器可以根据实际情况自主选择。

sizes="calc(100vw / 3)" 会动态改变图片的大小,最终图片宽度始终为视口的三分之一calc(100vw/3)

最后的img 标签不能省略,<source>标签只决定图片源,最终图片的渲染还是需要 img 标签,同时,在浏览器不支持 picture 标签的情况下,会使用 img 标签。

目录
打赏
0
0
0
0
64
分享
相关文章
响应式图片(Retina Images):提升网站视觉质量的关键
在高分辨率设备如Retina显示屏普及的今天,网站和应用程序的图片质量变得至关重要。为了确保图像在各种设备上都具备出色的视觉效果,响应式图片技术已经成为前端开发中的不可或缺的一部分。本博客将深入探讨响应式图片的概念、实施方法以及为什么它们对于提升用户体验至关重要。
191 0
前端【响应式图片处理】之 【picture标签】
前端【响应式图片处理】之 【picture标签】
222 0
云巧组件标准
可组装式应用的理论,结合了云原生的理念和交付质量要求,云巧对云巧组件设计了六大维度的标准。根据这六大维度名称的英文首字母组成单词ACCORD
2494 0
AI技术在文本情感分析中的应用
【10月更文挑战第22天】本文将探讨人工智能(AI)如何改变我们对文本情感分析的理解和应用。我们将通过实际的代码示例,深入了解AI如何帮助我们识别和理解文本中的情感。无论你是AI新手还是有经验的开发者,这篇文章都将为你提供有价值的信息。让我们一起探索AI的奇妙世界吧!
310 3
太爽了!这10个 Vite 插件,帮我在开发中节省了大量时间!!
太爽了!这10个 Vite 插件,帮我在开发中节省了大量时间!!
【工具使用】几款优秀的SSH连接客户端软件工具推荐FinalShell、Xshell、MobaXterm、OpenSSH、PUTTY、Terminus、mRemoteNG、Terminals等
【工具使用】几款优秀的SSH连接客户端软件工具推荐FinalShell、Xshell、MobaXterm、OpenSSH、PUTTY、Terminus、mRemoteNG、Terminals等
101740 0
一文教会你如何重装Windows10系统【过程+图解+说明】
该博客文章是一份详细的Windows 10系统重装教程,包括制作过程、图解说明和注意事项,作者分享了自己制作启动盘并成功安装系统的经验,适合初学者参考。
一文教会你如何重装Windows10系统【过程+图解+说明】
Vue3如何使用Pinia详细介绍、pinia持久化存储(pinia-plugin-persistedstate详细配置)
Vue3如何使用Pinia详细介绍、pinia持久化存储(pinia-plugin-persistedstate详细配置)
AI助理
登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问

你好,我是AI助理

可以解答问题、推荐解决方案等