img 标签需手动优化路径、格式、尺寸和加载策略，否则易致白屏、跳动、卡顿或 seo 下降；src 路径须用本地服务器预览并采用相对路径，注意大小写与协议差异；alt 属性必须语义化；响应式需 srcset/sizes 或 picture；首屏图禁 lazy；width/height 或 aspect-ratio 保布局稳定；构建后路径可能被重写，需验证产物。
img 标签本身不支持“自动优化”，所有优化都依赖你手动控制路径、格式、尺寸和加载策略。浏览器不会替你压缩图片、选 WebP、或判断该不该懒加载——漏掉任一环节，上线后就可能白屏、跳动、卡顿或 SEO 掉分。
src 路径写错：404 和 file:// 协议是最大陷阱
本地双击打开 index.html 是 file:// 协议，此时 src="/images/logo.png" 的开头斜杠会指向你电脑根目录（比如 C:/images/logo.png），必然 404。只有在 HTTP 服务下（如 http://localhost:5173），/ 才表示网站根目录。
- 开发阶段必须用本地服务器预览：VS Code 的 Live Server 插件、
npx serve或 Vite 启动的npm run dev - 路径一律用相对路径，以
index.html所在位置为起点计算；../表示向上一级，./可省略 - Linux 服务器区分大小写：本地测试叫
Icon.png，部署后写成icon.png就 404；用 Network 面板看请求 URL 和状态码，一眼定位问题
alt 属性不是“可选项”，而是强制语义层
alt 不是占位符，它定义了这张图在 DOM 中的语义角色。空 alt="" 仅适用于纯装饰图（如分隔线、背景花边），且应配合 role="presentation" 明确告知辅助技术忽略它。
- 内容型图像（图表、产品图、头像）必须写有意义的描述：
alt="iPhone 15 Pro 暗紫色正面特写，不锈钢边框与钛金属质感" - 功能型图像（按钮图标）要说明操作：
alt="搜索按钮"，而非"放大镜图标" - 完全省略
alt或写alt="图片"会被 Lighthouse 标记为可访问性失败，也削弱 SEO 权重
响应式图片别只靠 CSS max-width
仅用 style="max-width: 100%; height: auto;" 能防止溢出，但无法解决带宽浪费：手机用户仍会下载桌面尺寸的 2MB .jpg。真正响应式需组合 srcset + sizes 或 <picture></picture>。
- 多分辨率场景（同一构图不同像素密度）：用
srcset列出small.jpg 480w,medium.jpg 800w，再用sizes告诉浏览器“视口 ≤600px 时用 480px 宽” - 多格式/多裁剪场景（WebP + fallback / 横版 banner + 竖版 mobile banner）：必须用
<picture></picture>+ 多个<source></source>，最后兜底一个<img> -
loading="lazy"要慎用：首屏关键图（如 logo、主 banner）设loading="eager"，否则可能触发 CLS（布局偏移）
width/height 写法直接影响页面稳定性
没设 width 和 height，浏览器渲染时不知道图片尺寸，等图片下载完才重排布局，造成“内容跳动”（CLS 分数暴跌）。但硬编码像素值又难适配响应式。
- 推荐方案：HTML 中写内联
width和height（如width="800" height="600"），CSS 里用max-width: 100%; height: auto;保证缩放比例 - 绝对不要同时设置
width和height为非原始比例值，会导致拉伸变形；若只要缩放，只设width，height由浏览器自动推算 - 现代方案：用 CSS
aspect-ratio（如aspect-ratio: 4/3）替代内联尺寸，但需确认目标浏览器支持度
最易被忽略的是：构建工具（Vite/Webpack）会重写资源路径，src="images/logo.png" 在开发时有效，打包后可能变成 src="/assets/logo.abc123.png"。务必检查构建产物中 index.html 的实际 src 值，而不是只信开发时的表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
