图片命名须全小写、下划线分隔、语义化两段式（如banner_home.jpg），类型前缀固定（banner/logo/menu/pic），禁用空格中文特殊符号；路径统一用./相对路径；格式按用途选jpg/png/svg/webp/avif；alt必须语义明确、非自动生成。
图片文件名必须全小写+下划线+语义化分段
浏览器对大小写敏感，banner_home.jpg 和 Banner_Home.jpg 在 Linux 服务器或 Git 仓库里是两个不同文件。混用大小写会导致本地能跑、上线就 404。
命名结构应严格遵循「类型_含义」两段式，比如：logo_company.png、pic_product_detail.jpg、menu_navigation_vertical.svg。类型部分按规范用固定前缀（banner、logo、menu、pic 等），避免随意造词如 topimg 或 photo1。
-
banner：顶部横幅类长图，宽度通常 ≥1200px -
logo：品牌标识，优先用.svg格式 -
menu：导航栏中重复出现的图标或按钮组 -
pic：内容页内装饰性照片，不带链接 - 所有文件名禁止空格、中文、括号、emoji 和特殊符号（如
@、#、%）
图片路径统一用相对路径，且以 HTML 文件为基准
写成 ./images/logo_company.png 比 images/logo_company.png 更安全——前者明确声明“从当前文件所在目录出发”，后者在嵌套路由（如 /blog/post/）下容易错配到 /blog/images/。
绝对路径（/assets/images/...）只在全站资源托管于固定子目录时可用，但会增加迁移成本；远程 URL（https://cdn.example.com/...）需确保 CDN 域名已备案且 HTTPS 有效，否则混合内容警告会阻断加载。
- HTML 文件和图片不在同一目录时，一律用
./开头，不用../向上跳太多层（超过两级就该重构目录） - 禁止在
src中拼接变量或 JS 字符串（如src="images/" + name + ".jpg"），这类写法无法被静态分析工具校验路径有效性 - 构建工具（如 Vite、Webpack）若开启 asset 静态分析，会自动报出未引用的图片，此时命名规范直接影响清理效率
格式选择要匹配用途，不是越新越好
不是所有图片都适合 .avif 或 .webp。浏览器兼容性、编辑链路、交付成本都得算进去。
-
.jpg：摄影类大图，压缩率高，兼容性 100%，但不支持透明 -
.png：需要透明背景或文字锐利的图（如 logo、图表），体积比 JPG 大，别用于首屏大图 -
.svg：图标、简单图形、响应式缩放场景，文本可选、体积极小，但不能直接当相册图用 -
.webp：现代项目默认选项，支持有损/无损/透明，Chrome/Firefox/Safari 14+ 全支持，可用<picture></picture>降级 -
.avif：压缩率更高，但 Safari 16.4+ 才稳定支持，CI/CD 流水线需额外加转码步骤，中小项目慎用
alt 属性不是可选项，也不能自动生成
alt 不是 SEO 工具，是屏幕阅读器唯一依赖的语义通道。写成 alt="图1" 或留空 alt=""（仅适用于纯装饰图）都比用 JS 动态塞 alt="Image ${i}" 强。
真实业务中，alt 应来自配置数据而非硬编码：比如 CMS 返回的图片项带 caption 字段，前端直接映射过去；批量生成时从 JSON 配置数组读取，而不是靠索引计数。
- 含链接的图片，
alt要描述目标动作，例如alt="进入产品介绍页"，不是alt="产品截图" - 信息图、流程图类图片，
alt应概括核心结论，长度控制在 125 字符内 - 避免关键词堆砌，如
alt="北京上海广州深圳杭州电商网站 banner 促销活动优惠"—— 这既伤体验，也被搜索引擎识别为垃圾
pic_user_avatar.png 被误写成 pic_user_avater.png，或者 ./imgs/ 和 ./images/ 目录并存，排查成本远高于重命名本身。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
