img标签必须写src和alt属性：不写src图片不加载，不写alt则影响可访问性、SEO及合规性；src需为有效路径，alt须准确描述图意（装饰图用alt=""），且应声明width/height防布局偏移。
img 标签必须写 src 和 alt 属性
不写 src，图片根本不会加载；不写 alt，不仅影响可访问性，部分浏览器（比如 Safari 在禁用图片时）会直接显示空框或报错提示。很多新手只关注“能显示”，但漏掉 alt 会导致 SEO 掉权、屏幕阅读器无法描述内容，甚至在某些企业级合规检查中被直接标为缺陷。
正确写法示例：
<img src="logo.png" alt="公司官方 logo">
-
src值必须是有效路径：相对路径（images/photo.jpg）、绝对路径（/assets/icon.svg）或完整 URL（https://example.com/pic.webp） -
alt不能留空（alt=""仅适用于纯装饰图），要准确描述图的内容或功能，比如alt="提交按钮图标"而非alt="icon" - 不要用
title替代alt——title只是悬停提示，对无障碍和 SEO 几乎无效
路径错误是图片不显示的最常见原因
开发者常把图片放在 ./images/，却在 HTML 里写 src="images/logo.png"，结果页面 404。根本问题不是代码语法错，而是当前 HTML 文件所在位置与图片路径的相对关系没理清。
- 如果 HTML 在网站根目录（
index.html），而图片在images/logo.png，那src="images/logo.png"是对的 - 如果 HTML 在子目录（如
pages/about.html），同样写src="images/logo.png"就会去找pages/images/logo.png，应改为src="../images/logo.png" - 用浏览器开发者工具的 Network 面板看图片请求的 Status 是否为 404，再点开该请求的 Headers 查看 Request URL，一眼就能确认路径拼错了哪一级
现代项目推荐用 webp 格式 + srcset 做响应式适配
直接写 <img src="photo.jpg"> 虽然能用，但在高 DPI 屏幕上模糊、在弱网下加载慢。不升级格式和加载逻辑，图片体验就卡在十年前。
立即学习“前端免费学习笔记（深入）”；
- 优先转成
.webp（体积通常比 JPG 小 25%–35%，质量不变），用src指向它：src="photo.webp" - 需要兼容老浏览器（如 IE、旧版 Safari），加
<picture>回退：
<picture> <source srcset="photo.webp" type="image/webp"> <img src="photo.jpg" alt="风景照"> </picture>
- 要做多尺寸适配（比如移动端用小图、桌面端用大图），用
srcset+sizes，而不是靠 CSS 缩放原图——后者浪费带宽且模糊
width/height 属性现在仍有实际作用
很多人以为 CSS 控制宽高就够了，删掉 width 和 height 属性。但去掉后，浏览器渲染时无法预留图片占位空间，导致文字/布局在图片加载瞬间跳动（layout shift），影响 CLS（累积布局偏移）评分——这是 Core Web Vitals 的硬指标，直接影响搜索排名。
- 写内联
width和height（单位是像素，不用加px）：<img src="icon.png" width="24" height="24" alt="设置图标"> - 值必须是图片原始尺寸或等比例缩放后的整数，否则可能拉伸变形
- 配合 CSS 的
max-width: 100%和height: auto才能响应式缩放又不跳动
alt 和 width/height，容易被当成“可选”，其实是线上运行时最容易出问题的两个地方。 
