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实现滚动的齿轮动画效果
Jun 05 HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 HTML / CSS
CSS实现漂亮的时钟动画效果的实例代码
Mar 30 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
两种php调用Java对象的方法
2006/10/09 PHP
php 分页原理详解
2009/08/21 PHP
PHP print类函数使用总结
2010/06/25 PHP
php浏览历史记录的方法
2015/03/10 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
JavaScript运算符小结
2015/06/03 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
Python编写打字训练小程序
2019/09/26 Python
python的命名规则知识点总结
2019/10/04 Python
Python如何读取、写入JSON数据
2020/07/28 Python
Python内置函数property()如何使用
2020/09/01 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
最好的商品表达自己:Cafepress
2019/09/04 全球购物
中职生自荐信范文
2014/06/15 职场文书
四年级学生期末评语
2014/12/26 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
工作态度不好检讨书
2015/05/06 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
python实现股票历史数据可视化分析案例
2021/06/10 Python