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 <img> 标签用于在网页中嵌入图像，src 属性指定图像的 URL，告诉浏览器从哪里加载图像。这是在网页上展示图片最基本也是最常用的方法。
在 HTML 中，<img> 标签是网页中显示图像的关键元素。它本身并不包含图像数据，而是通过 src 属性指定图像的来源（URL），让浏览器去获取并显示图像。理解 <img> 标签和 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:协议。例如：<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w+r8UAAAPgADsN+eJwAAAABJRU5ErkJggg==" alt="Red dot" />这种方式避免了额外的 HTTP 请求，可以提高页面加载速度，但会增加 HTML 文件的大小。通常只适用于小型图像，因为大型图像会显著增加文件大小。使用 JavaScript 生成的 URL:
src属性可以通过 JavaScript 动态设置，例如从用户上传的文件或通过 Canvas 生成的图像数据。 这种方式允许更灵活的图像处理和显示，例如实现图像预览或动态图像生成。
如何优化 img 标签的性能？
图像优化是提高网页性能的关键一环。以下是一些常用的优化技巧：
选择合适的图像格式: 不同的图像格式适用于不同的场景。JPEG 适合照片类图像，体积小，但有损压缩；PNG 适合需要透明背景或包含大量文本和线条的图像，无损压缩，但体积相对较大；WebP 是 Google 开发的现代图像格式，兼具 JPEG 和 PNG 的优点，压缩率高，支持透明度，但兼容性不如 JPEG 和 PNG。
压缩图像: 使用图像压缩工具（如 TinyPNG、ImageOptim）可以减小图像文件的大小，从而加快页面加载速度。 压缩图像可以在不显著降低图像质量的前提下，减少文件大小。
-
使用响应式图像: 通过
srcset和sizes属性，可以根据不同的屏幕尺寸和设备分辨率加载不同大小的图像。 这样可以避免在小屏幕设备上加载大图，节省带宽并提高加载速度。 例如：<img src="image-320w.jpg" srcset="image-480w.jpg 480w, image-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" alt="A responsive image">这段代码告诉浏览器，根据屏幕宽度选择合适的图像。
使用 CDN: CDN (Content Delivery Network) 可以将图像存储在全球各地的服务器上，用户可以从离自己最近的服务器加载图像，从而加快加载速度。 CDN 通常具有缓存机制，可以进一步提高性能。
-
懒加载: 对于页面上不立即显示的图像（例如，位于页面底部的图像），可以使用懒加载技术，在图像进入视口时再加载。 这样可以减少页面初始加载时间，提高用户体验。 可以使用
loading="lazy"属性来实现懒加载：<img src="image.jpg" loading="lazy" alt="An image">
设置图像尺寸: 在
<img>标签中明确指定图像的宽度和高度，可以避免浏览器在加载图像后重新计算布局，从而提高页面渲染速度。 即使使用 CSS 来调整图像大小，也应该在 HTML 中设置width和height属性。优化图像的 alt 属性:
alt属性不仅用于在图像无法加载时显示替代文本，还可以提高网站的可访问性，并有助于搜索引擎优化。 确保alt属性包含图像的描述信息。
img 标签还有哪些常用的属性？
除了 src 属性，<img> 标签还有许多其他有用的属性：
alt: 指定图像的替代文本，当图像无法加载时显示，并提高网站的可访问性。
alt属性对于 SEO 也很重要。width 和 height: 指定图像的宽度和高度，单位是像素。 建议始终设置这两个属性，以避免浏览器重新计算布局。
title: 指定图像的标题，当鼠标悬停在图像上时显示。
srcset 和 sizes: 用于实现响应式图像，根据不同的屏幕尺寸和设备分辨率加载不同大小的图像。
loading: 指定图像的加载方式，可以设置为
lazy实现懒加载。crossorigin: 用于处理跨域图像的权限问题。 当从不同的域名加载图像时，可能需要设置
crossorigin属性，以允许 JavaScript 访问图像数据。usemap: 将图像与图像地图关联起来，允许用户点击图像的不同区域来触发不同的操作。
ismap: 将图像定义为服务器端图像地图。 当用户点击图像时，点击坐标会发送到服务器。 这种方式已经很少使用，通常使用客户端图像地图代替。
正确使用这些属性可以更好地控制图像的显示效果和性能，提升用户体验。
