HTML5通过语义化标签优化图片插入：用<img>配合src/alt确保可访问性；用width/height或CSS控制响应式尺寸；用<picture>+<source>支持WebP等现代格式；用loading="lazy"实现懒加载；用<figure><figcaption>增强语义与可访问性。
如果您希望在网页中正确插入并优化图片，HTML5 提供了更语义化、更灵活的图片标签支持。以下是实现图片插入与优化的具体方法：
一、使用 <img> 标签基础插入
<img> 是 HTML5 中最直接的图片嵌入方式，需配合必需的 src 和 alt 属性以确保可访问性与基础渲染。
1、在 HTML 文件中定位到需要插入图片的位置。
2、输入 <img src="images/photo.jpg" alt="风景照片">，其中 src 值为图片相对或绝对路径。
立即学习“前端免费学习笔记（深入）”；
3、确保 alt 属性内容准确描述图片内容，alt 属性不可为空，除非图片为纯装饰性且无信息价值。
二、添加响应式尺寸控制
通过 width 和 height 属性或 CSS 控制图片尺寸，可防止布局偏移（CLS），提升页面稳定性。
1、在 <img> 标签中直接写入固定像素值：<img src="logo.png" width="120" height="40" alt="公司标志">。
2、或使用内联 style 设置：<img src="banner.jpg" style="max-width: 100%; height: auto;" alt="横幅图">。
3、务必保持宽高比一致，避免图片拉伸变形。
三、启用现代图片格式支持
利用 <picture> 元素可为不同设备和浏览器提供适配格式（如 WebP、AVIF），提升加载效率。
1、包裹 <source> 标签于 <picture> 内，按格式优先级从上至下排列。
2、插入 WebP 格式作为首选：<source srcset="photo.webp" type="image/webp">。
3、在 <picture> 最后添加 <img> 作为兜底：<img src="photo.jpg" alt="示例图片">。
4、浏览器将自动选择首个支持的 source，不支持时回退至 img。
四、实现懒加载与加载提示
使用 loading="lazy" 属性可延迟非视口内图片加载，减少初始资源请求压力。
1、在 <img> 标签中添加 loading 属性：<img src="article-1.jpg" loading="lazy" alt="文章配图">。
2、为关键首屏图片显式设置 loading="eager"，确保优先加载。
3、loading="lazy" 仅对非 inline 图片生效，且需配合 height/width 或 aspect-ratio 防止布局抖动。
五、添加图片语义化与可访问增强
通过 figcaption 与 figure 组合，为图片提供上下文说明，提升结构语义与屏幕阅读器体验。
1、用 <figure> 包裹 <img> 及其说明文字。
2、在 <figure> 内插入 <figcaption> 标签：<figcaption>图1：2023年用户增长趋势</figcaption>。
3、figcaption 必须位于 figure 内部，且只能出现一次，位置可在 img 前或后。
