HTML 里 img 元素的 src 和 srcset 属性的区别详解


Posted in HTML / CSS onMay 21, 2023

img 元素有两个相关的属性

在 HTML 中,img 元素通常用于在网页中插入图片。img 元素有两个相关的属性:src 和 srcset。

src 属性指定图像的 URL,它是必需的。浏览器将使用该 URL 加载图像并将其显示在页面上。

srcset 属性允许您指定一系列不同大小或分辨率的图像文件,以便浏览器可以根据设备的像素密度和屏幕大小选择最合适的图像。srcset 属性的值是一个逗号分隔的列表,其中每个项目都有一个图像文件的 URL,后跟一个空格和一个分辨率描述符。描述符指定图像的分辨率,并告诉浏览器如何选择最合适的图像。通常使用像素密度(如“1x”或“2x”)或图像宽度(如“320w”或“640w”)作为描述符。

在使用 srcset 属性时,可以选择一个默认的图像文件,将其 URL 放在 img 元素的 src 属性中。如果浏览器不支持 srcset 属性或无法选择最合适的图像,则将加载默认的图像文件。

总的来说,src 属性用于指定图像的 URL,而 srcset 属性用于指定一系列不同大小或分辨率的图像文件,以便浏览器可以选择最合适的图像来适应不同的设备和屏幕大小。

下面是一个具体的例子

HTML 里 img 元素的 src 和 srcset 属性的区别详解

HTML 里 img 元素的 src 和 srcset 属性的区别详解

src 里的 NmOQ 是默认值,类型为 zoom:

HTML 里 img 元素的 src 和 srcset 属性的区别详解

渲染图片

在现代浏览器中,当浏览器遇到一个带有 srcset 属性的 img 标签时,它将根据以下步骤来渲染图片:

  • 首先,浏览器会根据 devicePixelRatio (设备像素比)确定屏幕的实际像素密度。例如,Retina 显示屏幕的 devicePixelRatio 为 2。
  • 接下来,浏览器会将 srcset 属性的值解析为一组可用的图片资源和它们的尺寸。每个图片资源都包含了一个图片 URL 和一个描述该图片的宽度,例如:https://example.com/image-1000w.jpg 1000w
  • 浏览器根据屏幕的宽度和每张图片的宽度来计算出最佳的图片大小,这个大小就是要显示的图片的实际像素尺寸。例如,如果设备的宽度为 500px,浏览器会选择一个最接近 500px 的图片资源,例如图片宽度为 600px 的那张图片。
  • 最后,浏览器将选中的图片资源的 URL 赋给 img 元素的 src 属性,然后加载并显示该图片。

小结

浏览器会根据设备像素比、可用图片资源和设备宽度来自动选择和加载最佳的图片,从而实现高清晰度和响应式图片的效果。

以上就是HTML 里 img 元素的 src 和 srcset 属性的区别详解的详细内容,更多关于HTML img元素属性区别的资料请关注三水点靠木其它相关文章!

 
HTML / CSS 相关文章推荐
CSS3 3D立方体效果示例-transform也不过如此
Dec 05 HTML / CSS
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 HTML / CSS
CSS list-style-type属性使用方法
May 21 #HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 #HTML / CSS
box-shadow单边阴影的实现
VW、VH适配移动端的解决方案与常见问题
May 21 #HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 #HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 #HTML / CSS
You might like
隐藏你的.php文件的实现方法
2007/03/19 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
python正则表达式抓取成语网站
2013/11/20 Python
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
python路径的写法及目录的获取方式
2019/12/26 Python
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
学历公证委托书
2014/04/09 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技