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 相关文章推荐
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
Jun 11 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
详解如何使用rem或viewport进行移动端适配
Aug 14 HTML / CSS
Ratchet 模态框的实现
Aug 19 HTML / CSS
前端水印的简单实现代码示例
Dec 02 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 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巧获服务器端信息
2006/12/06 PHP
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
php导出excel格式数据问题
2014/03/11 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
python实现自动重启本程序的方法
2015/07/09 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
Flask之请求钩子的实现
2018/12/23 Python
python装饰器练习题及答案
2019/11/01 Python
Python插件机制实现详解
2020/05/04 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
浅析Python面向对象编程
2020/07/10 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
美国Max仓库:Max Warehouse
2020/05/31 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
毕业生文员求职信
2013/11/03 职场文书
职工运动会邀请函
2014/02/02 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
消防安全承诺书
2014/05/22 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
运动会稿件100字
2014/09/24 职场文书
法定授权委托证明书
2014/09/27 职场文书
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技