img标签的必需属性只有src和alt，缺失则html不合法；src必须为有效url，alt须准确描述图像内容或为空字符串；width/height用于预留原始尺寸防布局偏移；loading="lazy"仅对非首屏图生效；srcset与sizes配合实现响应式图像。
img 标签的必需属性只有 src 和 alt
没有这两个属性，<img> 就不是合法 HTML。浏览器可能渲染失败，或被可访问性工具、搜索引擎降权。
src 指向图像资源位置，必须是有效 URL（相对路径如 "images/logo.png"，或绝对路径如 "https://cdn.example.com/photo.jpg"）；alt 不是“可选说明”，而是图像内容的文字等价物——它在图片加载失败、禁用图片、或使用屏幕阅读器时直接决定用户能否理解该图像。
- 如果图像是纯装饰（比如背景分隔线），
alt应为空字符串：alt=""，而非省略或填“无”“空白” - 不要用
alt="图片"或alt="logo"这类无信息量的值；要描述内容，例如alt="Apple 公司 2024 年秋季发布会主视觉：iPhone 16 Pro 侧边特写" -
src值为空、仅空格或 404 路径时，浏览器会触发error事件，但不会自动 fallback —— 需 JS 手动监听处理
width 和 height 是尺寸预留属性，不是缩放控制
它们的作用是在 HTML 解析阶段就告诉浏览器“这张图原始宽高是多少像素”，让布局引擎提前分配空间，避免图片加载后突然撑开页面（即 layout shift）。这不是 CSS 的 width/height，也不该用来压缩大图显示为小图。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- HTML5 中
width和height的值必须是纯数字（单位隐含为 px），例如width="320"，不能写width="320px"或width="50%" - 若只设一个，另一个会按原图宽高比自动推算；若两个都设但比例与原图不符，浏览器仍按设定值渲染，图像会拉伸变形
- 现代实践更推荐用 CSS 控制显示尺寸（如
max-width: 100%; height: auto;），而把width/height留给真实原始尺寸，兼顾 SSR 友好性和 CLS（累积布局偏移）优化
loading 属性控制加载时机，但仅对非首屏图像有效
loading="lazy" 是目前最轻量的懒加载方案，无需 JS 即可让浏览器延迟加载可视区域外的图像。但它有明确限制：只对 <img> 在文档流中自然位置处于当前视口下方（或右侧，取决于 writing-mode）时生效。
- 首屏图像（尤其是
<img>出现在开头附近）即使写了loading="lazy"，多数浏览器也会忽略并立即加载 - 不支持该属性的旧浏览器（如 IE、老版 Safari）会直接忽略它，无副作用；但也不要依赖它做核心功能兜底
- 慎用于关键内容图（如商品主图、登录页头像），懒加载延迟可能导致用户滚动到时短暂空白
srcset 和 sizes 是响应式图像的核心，但需配合原图尺寸
单靠 src 无法适配不同 DPR（设备像素比）和视口宽度。srcset 提供多张候选图源，sizes 告诉浏览器“在不同断点下，这张图预计占多宽”，两者结合才能让浏览器选出最优资源。
-
srcset值是逗号分隔的“URL + 描述符”，例如：srcset="photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w" -
sizes值是媒体条件 + 宽度，例如：sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" - 漏掉
sizes时，浏览器默认按100vw计算，可能选错图；而src仍是必填的降级兜底地址 - WebP/AVIF 等现代格式不能直接塞进
srcset，需用<picture></picture>包裹并配合<source type="image/webp"></source>
img.src 不会重新触发 loading="lazy" 行为，换 srcset 也不会自动重选资源——得靠 JS 显式调用 img.load() 或替换整个节点。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
