html中img标签的作用 html中img标签的src属性介绍

src属性的路径类型有5种：1.绝对url，2.相对url，3.根相对url，4.data url，5.javascript生成的url；优化img标签性能的方法包括选择合适图像格式、压缩图像、使用响应式图像、cdn、懒加载、设置图像尺寸及优化alt属性；img标签常用属性有alt、width/height、title、srcset/sizes、loading、crossorigin、usemap和ismap。

HTML 标签用于在网页中嵌入图像，src 属性指定图像的 URL，告诉浏览器从哪里加载图像。这是在网页上展示图片最基本也是最常用的方法。

在 HTML 中， 标签是网页中显示图像的关键元素。它本身并不包含图像数据，而是通过 src 属性指定图像的来源（URL），让浏览器去获取并显示图像。理解 标签和 src 属性的用法，对于构建视觉丰富的网页至关重要。

src 属性的路径类型有哪些？

立即学习“前端免费学习笔记（深入）”；

src 属性可以接受不同类型的 URL，主要分为以下几种：

• 绝对 URL: 指向一个完整的网络地址，例如 https://www.example.com/images/logo.png。 这种方式直接指向互联网上的资源，确保任何用户都能访问到该图像，但缺点是依赖于外部服务器的稳定性。

• 相对 URL: 相对于当前 HTML 文件的路径。例如，如果 HTML 文件位于 https://www.example.com/pages/about.html，而图像文件位于 https://www.example.com/images/logo.png，那么 src 可以设置为 ../images/logo.png。 相对 URL 的优点是当整个网站移动到不同的服务器或目录时，链接仍然有效，只要文件结构保持不变。

• 根相对 URL: 以斜杠 / 开头，相对于网站的根目录。例如 /images/logo.png。 这种方式在大型网站中非常有用，因为无论 HTML 文件位于哪个子目录，链接都会指向网站根目录下的相同图像。

• Data URL: 将图像数据直接嵌入到 HTML 中，使用 data: 协议。例如： 这种方式避免了额外的 HTTP 请求，可以提高页面加载速度，但会增加 HTML 文件的大小。通常只适用于小型图像，因为大型图像会显著增加文件大小。

• 使用 JavaScript 生成的 URL: src 属性可以通过 JavaScript 动态设置，例如从用户上传的文件或通过 Canvas 生成的图像数据。 这种方式允许更灵活的图像处理和显示，例如实现图像预览或动态图像生成。

如何优化 img 标签的性能？

图像优化是提高网页性能的关键一环。以下是一些常用的优化技巧：

• 选择合适的图像格式: 不同的图像格式适用于不同的场景。JPEG 适合照片类图像，体积小，但有损压缩；PNG 适合需要透明背景或包含大量文本和线条的图像，无损压缩，但体积相对较大；WebP 是 Google 开发的现代图像格式，兼具 JPEG 和 PNG 的优点，压缩率高，支持透明度，但兼容性不如 JPEG 和 PNG。

• 压缩图像: 使用图像压缩工具（如 TinyPNG、ImageOptim）可以减小图像文件的大小，从而加快页面加载速度。 压缩图像可以在不显著降低图像质量的前提下，减少文件大小。

• 使用响应式图像: 通过 srcset 和 sizes 属性，可以根据不同的屏幕尺寸和设备分辨率加载不同大小的图像。 这样可以避免在小屏幕设备上加载大图，节省带宽并提高加载速度。 例如：

  

  微尔企业网站管理系统1.75 build build 090709

  系统功能介绍 1 包含企业网站所必备的功能：企业信息、产品管理、人才招聘、新闻资讯、企业图片、以及视频下载等模块2 由于是从CMS系统的基础上开发而成，因此相对于一些其他的企业网站管理系统，本系统具备更强的可扩展能力，可以胜任从小型工作室到大中型企业网上门户等各种不同规模网站的需求。3 后台管理与模板完全分离，并具备非常灵活的标签技术，可以实现无限制个性化的界面定制4 操作简单，利用已经制作好的模

  下载

  @@##@@

  这段代码告诉浏览器，根据屏幕宽度选择合适的图像。

• 使用 CDN: CDN (Content Delivery Network) 可以将图像存储在全球各地的服务器上，用户可以从离自己最近的服务器加载图像，从而加快加载速度。 CDN 通常具有缓存机制，可以进一步提高性能。

• 懒加载: 对于页面上不立即显示的图像（例如，位于页面底部的图像），可以使用懒加载技术，在图像进入视口时再加载。 这样可以减少页面初始加载时间，提高用户体验。 可以使用 loading="lazy" 属性来实现懒加载：

  @@##@@

• 设置图像尺寸: 在 标签中明确指定图像的宽度和高度，可以避免浏览器在加载图像后重新计算布局，从而提高页面渲染速度。 即使使用 CSS 来调整图像大小，也应该在 HTML 中设置 width 和 height 属性。

• 优化图像的 alt 属性: alt 属性不仅用于在图像无法加载时显示替代文本，还可以提高网站的可访问性，并有助于搜索引擎优化。 确保 alt 属性包含图像的描述信息。

img 标签还有哪些常用的属性？

除了 src 属性， 标签还有许多其他有用的属性：

• alt: 指定图像的替代文本，当图像无法加载时显示，并提高网站的可访问性。 alt 属性对于 SEO 也很重要。

• width 和 height: 指定图像的宽度和高度，单位是像素。 建议始终设置这两个属性，以避免浏览器重新计算布局。

• title: 指定图像的标题，当鼠标悬停在图像上时显示。

• srcset 和 sizes: 用于实现响应式图像，根据不同的屏幕尺寸和设备分辨率加载不同大小的图像。

• loading: 指定图像的加载方式，可以设置为 lazy 实现懒加载。

• crossorigin: 用于处理跨域图像的权限问题。 当从不同的域名加载图像时，可能需要设置 crossorigin 属性，以允许 JavaScript 访问图像数据。

• usemap: 将图像与图像地图关联起来，允许用户点击图像的不同区域来触发不同的操作。

• ismap: 将图像定义为服务器端图像地图。 当用户点击图像时，点击坐标会发送到服务器。 这种方式已经很少使用，通常使用客户端图像地图代替。

正确使用这些属性可以更好地控制图像的显示效果和性能，提升用户体验。