img标签通过src和alt属性嵌入图片，配合width、height、loading、decoding、srcset及sizes等属性优化性能与响应式显示，提升可访问性与用户体验。
在HTML5中，图像的显示主要依靠 img 标签。它是一个自闭合标签，用于在网页中嵌入图片。虽然用法简单，但正确使用相关属性可以提升页面性能、可访问性和用户体验。
基本语法结构
img 标签必须包含 src 属性，用来指定图片的路径。基本写法如下：
其中：
- src：指定图片文件的URL，可以是相对路径或绝对路径。
- alt：提供图片的替代文本，当图片无法加载或被屏幕阅读器读取时使用，对无障碍访问非常重要。
常用属性详解
除了最基本的 src 和 alt，HTML5还支持多个实用属性：
立即学习“前端免费学习笔记（深入）”；
- width 和 height：设置图片的显示宽度和高度（单位为像素或百分比）。建议设置这两个属性，有助于浏览器提前分配空间，避免页面布局跳动。
-
loading：控制图片的加载方式。可选值有：
- lazy：延迟加载，图片滚动到视口附近时才加载，提升首屏速度。
- eager：立即加载，默认行为。
- decoding：提示浏览器如何解码图片。例如 async 表示异步解码，减少主线程阻塞。
-
sizes 和 srcset：用于响应式图片显示。
- srcset 允许提供多个分辨率的图片，浏览器根据设备像素密度自动选择。
- sizes 配合 srcset 使用，定义不同屏幕宽度下应使用的图片尺寸。
实际使用示例
一个完整的响应式图片写法：
srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px"
alt="风景照片"
loading="lazy"
width="800"
height="600"
>
这段代码会根据设备屏幕大小自动选择最合适的图片资源，并延迟加载以优化性能。
注意事项与最佳实践
- 始终填写 alt 属性。如果是装饰性图片，可设为 alt=""。
- 避免滥用大图缩放显示，应使用合适尺寸的图片资源。
- 优先使用现代格式如 WebP 或 AVIF，在支持的浏览器中节省带宽。
- 结合 CSS 控制样式，不要过度依赖 width/height 属性进行拉伸。
基本上就这些。掌握 img 标签的核心属性，能让网页中的图片更高效、更友好。不复杂但容易忽略细节。
