深入解析 HTML img 标签的高级用法。涵盖 src 与 alt 属性的语义规范，通过声明宽高防止布局偏移（CLS），利用原生 loading 属性实现懒加载。介绍 srcset 和 sizes 配合实现响应式图片，使用 picture 元素进行格式降级。强调 object-fit 在容器裁剪中的应用，以及无障碍访问中 alt 文本的重要性。此外还讨论了 Referer 防盗链、签名 URL 等安全策略，并指出 background-image 替代 img 的误区及图片压缩的最佳实践。
在现代 Web 开发中，一个看似简单的 <img> 标签，其实藏着远超'显示图片'的深意。它不仅是视觉呈现的核心载体，更直接关联着页面性能、可访问性体验、搜索引擎优化，甚至安全防护策略。许多开发者习惯性地写下 src 和 alt 就以为万事大吉，却在真实项目中频频遭遇布局跳动、加载卡顿、无障碍支持缺失等问题。
一张图没处理好，可能让你的 Lighthouse 分数骤降，也可能让视障用户完全错过关键信息。我们从实战出发，拆解 <img> 的每一个细节，看看如何把'基础操作'做到极致。
<img src="example.jpg" alt="示例图片">
这是每个前端初学者都会写的代码。但你知道吗？哪怕这一行里都藏着陷阱。
src 是强制属性，浏览器没有它不会加载图像；而 alt 决定的是语义与包容性。当网络异常、路径错误或屏幕阅读器工作时，alt 就成了唯一的'内容代理'。
所以第一条铁律是：永远不要省略 alt。如果这张图只是装饰，比如背景花边、分隔线之类的，那就明确告诉浏览器和辅助工具：'忽略我'，写成 alt=""。空字符串不等于'没写'，它是有语义的——表示'此图无信息价值'。
反过来，如果是商品主图、数据图表或者文章配图，alt 必须准确传达内容。像 <img src="chart.png" alt="图片"> 这种写法，对无障碍用户来说就是一场灾难。
我们经常看到这样的写法：
<img src="avatar.png" alt="用户头像">
也许你会问：CSS 不也能控制大小吗？干嘛非得在标签上加宽高？
答案是：防布局偏移（Layout Shift）。
想象一下，页面先渲染出文字和其他元素，等图片加载回来才发现要腾出一块空间，整个页面突然'往下弹'——这就是典型的 CLS（Cumulative Layout Shift），Google 把它列为 Core Web Vitals 的关键指标之一，直接影响 SEO 排名。
而在 HTML 中声明 width 和 height，浏览器就能提前知道这个图片的宽高比，在资源未加载前预留正确比例的空间。即使你用 CSS 调整最终展示尺寸，只要保持纵横比一致，就能避免重排。
💡 提示：HTML 属性中的
width="100"是像素值，无需单位；CSS 则更灵活，支持 rem、%、vw 等响应式单位。
过去实现图片懒加载，得靠 Intersection Observer 或第三方库如 LazyLoad.js。如今主流浏览器已原生支持：
<img src="large-hero.jpg" alt="首页横幅" loading="lazy">
loading="lazy"：进入视口附近才开始加载loading="eager"：立即加载（默认）loading="auto"：由浏览器决定（目前多数视为 eager）Chrome 76+、Firefox 75+、Edge 79+ 都已全面支持。这意味着你可以放心在长列表、评论区缩略图等场景使用，显著降低首屏请求压力。
不过注意：首屏关键图片不要加 lazy，否则会影响 Largest Contentful Paint（LCP）评分。
移动端适配早已不是'一套图走天下'。Retina 屏需要高清资源，小屏设备则希望尽快加载低分辨率版本。这时候就得靠 srcset 和 sizes 联合决策。
<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px" alt="响应式图片示例">
这里的逻辑是：
srcset 告诉浏览器有哪些可用资源及其自然宽度（以 w 为单位）sizes 定义当前环境下该图片将占据的布局宽度举个例子：iPhone 13 的 DPR 是 3，视口宽度约 390px，那么 (max-width: 600px) 条件成立，预期占位 480px，乘以 DPR 后实际需要 ~1440 物理像素，于是浏览器可能会选 medium.jpg。
✅ 实践建议：构建流程中自动生成多分辨率图片，并配合 CDN 动态裁剪服务提升灵活性。
当你不仅要适配分辨率，还要根据格式支持、横竖屏方向甚至光线环境来换图时，<picture> 就派上用场了。
<picture>
<source media="(min-width: 800px)" srcset="wide-banner.webp" type="image/webp">
<source media="(min-width: 800px)" srcset="wide-banner.jpg">
<source srcset="mobile-banner.webp" type="image/webp">
<img src="mobile-banner.jpg" alt="横幅广告">
</picture>
它的匹配规则很简单：按顺序遍历 <source>，第一个满足 media 条件且 type 支持的就生效。找不到则回退到 <img>。
这个结构特别适合做 现代图片格式降级：
配合 Squoosh.app 这类工具预压不同格式，轻松实现'最优加载'。
固定尺寸容器中塞进各种比例的图片？直接拉伸会变形，留白又难看。这时你需要 object-fit：
.card-image {
width: 200px;
height: 150px;
object-fit: cover;
object-position: center top;
}
常用取值如下：
| 值 | 行为 |
|---|---|
fill | 拉满容器，不管比例（易失真） |
contain | 完整显示，短边留白 |
cover | 填满容器，长边裁剪（推荐用于封面） |
scale-down | 取 none 和 contain 中较小效果 |
比如轮播图、卡片组件、头像框，用 cover + center center 几乎是标配。再配合 object-position 微调焦点区域，能有效避免人物被切掉脑袋。
很多人以为加上 alt 就完成了无障碍任务，其实远远不够。
alt 应描述其传达的信息，例如：'穿着红色连衣裙的女性站在樱花树下'alt 应说明动作，如 "搜索"、"删除此项"柱状图、流程图这类无法一句话说清的，建议搭配 <figure> 和 <figcaption>：
<figure>
<img src="sales-chart.png" alt="2025 年 Q1 各地区销售额对比，华东最高达 280 万">
<figcaption>图 1：第一季度销售业绩分布</figcaption>
</figure>
必要时还可提供外部链接详细说明，或通过 ARIA 属性关联长描述。
虽然可以写 title="点击查看大图"，但移动端通常不触发 tooltip，屏幕阅读器也可能重复播报。更好的做法是用视觉标签或 aria-describedby 明确提示。
图片公开暴露在网络上，就意味着可能被盗用。虽然前端手段无法彻底阻止，但可以增加成本。
服务端可通过检查 HTTP Referer 头限制引用来源：
location ~* \.(jpg|jpeg|png|gif|webp)$ {
valid_referers none blocked server_names *.yourdomain.com;
if ($invalid_referer) {
return 403;
}
}
这样只有你的域名或允许的平台才能正常访问资源。
CDN 如阿里云 OSS、腾讯云 COS 支持生成带时效的签名链接，例如：
https://cdn.example.com/photo.jpg?Expires=xxxx&OSSAccessKeyId=xxx&Signature=xxx
链接过期后自动失效，有效防止长期盗链。
⚠️ 但必须清醒认识到：所有前端保护都是心理防线。真正的核心资产保护，还得依赖后端权限校验和动态生成机制。
CSS 背景图确实适合装饰性元素，但以下情况必须用 <img>：
原则很清晰：有信息 → <img>；纯装饰 → background-image
不同格式适用场景差异巨大：
| 格式 | 推荐场景 | 是否首选 |
|---|---|---|
| JPEG | 照片类、色彩丰富 | ✅ |
| PNG | 透明图、图标、线条图 | ✅ |
| GIF | 动图（帧数少） | ⚠️（体积大） |
| WebP | 所有静态图 | ✅✅✅ |
| AVIF | 极高压缩率 | ✅（需检测支持） |
特别是 WebP，在同等质量下体积比 JPEG 平均小 30%，已是现代项目的标配。AVIF 更进一步，压缩率更高，但兼容性仍在演进中。
🔧 推荐工具：Squoosh 可在线对比格式转换效果。
常见问题包括：
解决方案也很明确：
imagemin 插件自动压缩一个小技巧：上传前先缩放到最大显示尺寸，比如网页最多显示 800px 宽，就没必要保留 4000px 的原图。
在实际开发过程中，面对大量预览图、状态图标和结果缩略图，总结出一套高效稳定的图片处理方案。
<div>
<img src="placeholder.svg" alt="视频生成结果第 1 帧" loading="lazy">
<div></div>
</div>
我们采用'低质量占位图（LQIP）+ 懒加载'组合拳：
data-src）所有小图标合并为单个 SVG 文件：
<svg><use href="#icon-play"></use></svg>
<svg><use href="#icon-delete"></use></svg>
优势非常明显：
配合 symbol 引用方式，还能实现按需加载。
根据不同设备加载合适分辨率封面：
<picture>
<source media="(min-width: 1024px)" srcset="cover-1080p.jpg">
<source media="(min-width: 768px)" srcset="cover-720p.jpg">
<img src="cover-480p.jpg" alt="生成视频封面">
</picture>
确保移动用户快速获取内容，桌面用户享受高清画质。
<img> 标签虽小，却是连接用户体验、性能表现与技术深度的交汇点。一个成熟的前端工程师，不会只关心'能不能显示'，而是思考：
每一张图片，都是你对用户的承诺。从 alt 文本的措辞，到格式的选择，再到加载时机的设计，都在无声传递专业度。
下次当你敲下 <img> 的那一刻，不妨多问一句：这张图，真的做到了最好吗？
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online