通过本文，你将系统掌握 HTML <img> 标签的核心知识与实战技巧，具体包括：
标签基础用法：掌握
<img>标签的基本结构、src和alt等必要属性的规范写法。关键属性深度解析：
src/alt：理解图片路径类型（相对 / 绝对 / URL）与替代文本的无障碍及 SEO 价值；width/height：通过预定义尺寸避免页面布局抖动（CLS）；loading：运用懒加载（lazy）优化首屏性能，区分首屏与非首屏图片加载策略；decoding：通过异步解码（async）减少主线程阻塞；srcset/sizes：实现响应式图片，根据设备分辨率和屏幕宽度动态加载最优资源；crossorigin/referrerpolicy：控制跨域请求策略与请求来源隐私保护；usemap/ismap：实现图片热点链接与坐标传递等进阶交互。
性能优化实践：结合懒加载、CDN、WebP 格式压缩等技术提升图片加载效率。
SEO 与可访问性：通过规范
alt文本、语义化标签使用，提升搜索引擎理解与无障碍体验。最佳实践：从属性配置（如必写
alt/width/height）到工程化优化（如避免 base64 大图）的全流程经验总结。正文从这里开始~
img 基本用法
HTML的<img>标签用于在网页中嵌入图片，是 Web 最常用的媒体标签之一。<img src="/images/example.png" alt="示例图片" /><img>是自闭合标签，无需结束标签。必须指定
src属性，推荐始终添加alt属性（替代文本：SEO + 可访问性优化）。
常用原生属性详解
src
作用：指定图片的路径（本地或远程 URL），即浏览器实际请求图片资源的地址。
浏览器请求原理：
当页面渲染到
<img src="...">时，浏览器会自动向src指定的地址发起 HTTP 请求，下载图片并显示。
路径类型区别：
相对路径：如
src="images/logo.png"，相对于当前 HTML 文件所在目录。绝对路径：如
src="/images/logo.png"，以网站根目录为起点，推荐用于站内图片。完整 URL：如
src="https://cdn.example.com/img.png"，可加载任意站点或 CDN 上的图片。
实际效果：
路径不同，浏览器请求的目标服务器和图片资源不同，影响加载速度、跨域策略和缓存。
示例：
<img src="/images/logo.png" alt="Logo" /> <img src="images/banner.jpg" alt="Banner" /> <img src="https://cdn.example.com/photo.jpg" alt="CDN图片" />
alt
作用：为图片提供替代文本。
意义：
图片无法加载时显示
屏幕阅读器辅助访问
SEO 友好，帮助搜索引擎理解图片内容
示例：
<img src="/images/avatar.png" alt="用户头像" />最佳实践：alt 文本应简洁、准确描述图片内容。
width 和 height
作用：指定图片的显示宽高（单位为像素）。
意义：
保留图片空间，防止页面布局抖动（CLS）
浏览器可提前分配空间，提升渲染性能
CLS（Cumulative Layout Shift）布局抖动：
定义：CLS 是衡量页面内容在加载过程中发生意外移动的指标。常见于图片、广告等资源未提前分配空间，加载后导致页面元素跳动。
真实现象：用户正在阅读或点击内容时，图片加载进来把内容"挤下去"或"挤偏"，影响体验。
width/height 的作用：提前为图片预留空间，浏览器可在图片加载前就分配好区域，避免内容跳动。
示例：
<img src="/images/photo.jpg" alt="风景" width="400" height="300" />优化建议：始终为图片指定 width 和 height，或用 CSS 明确尺寸。
loading
作用：控制图片的加载时机。
可选值：
auto（默认）：浏览器自动决定lazy：懒加载，图片进入视口时才加载eager：优先加载
lazy 的详细解释：
原理：当图片距离用户当前可见区域（视口，viewport）足够近时，浏览器才会发起请求加载图片。
视口（viewport）概念：视口是用户当前屏幕上可见的网页区域。只有进入视口或接近视口的图片才会被加载。
流程：页面初始渲染时，非首屏图片不会立即加载，只有用户滚动到图片附近时才加载。
首屏与非首屏：
首屏图片：用户打开页面时，无需滚动即可看到的图片。
非首屏图片：需要滚动页面才能看到的图片。
预加载与懒加载场景：
预加载：首屏图片、重要视觉内容，建议用
loading="eager"或不加 loading 属性。懒加载：非首屏图片、长列表、瀑布流等，建议用
loading="lazy"。
最佳实践：首屏图片优先加载，非首屏图片懒加载，提升首屏速度和整体性能。
示例：
<img src="/images/large.jpg" alt="大图" loading="lazy" />性能优化：为非首屏图片加
loading="lazy"可显著提升页面加载速度。
decoding
作用：控制图片解码方式。
可选值：
auto（默认）：浏览器自动决定sync：同步解码async：异步解码（推荐）
示例：
<img src="/images/photo.jpg" alt="风景" decoding="async" />
图片请求响应格式
当浏览器请求图片时，服务器返回的是图片的二进制数据（binary data） 并且这些二进制数据可能是各种格式，比如JPEG、PNG、WebP 等。这些二进制格式是经过压缩的，不能直接在浏览器页面显示。
Decoding（解码）具体是什么
解码是将压缩的图片二进制数据转换为浏览器可以显示和使用的像素数据过程，具体流程如下
解压缩图片数据
将数据转换为位图(bitmap)格式
处理颜色空间转换
应用透明等效果
解码是浏览器原生支持的，不同浏览器使用不同的图片解码引擎，现代浏览器都是支持多种图片格式的解码
async 解码 vs sync 解码
同步解码(
decoding="async"):图片加载完成后立即进行解码
解码过程会阻塞主线程
使用场景：需要立即使用图片的场景；图片较小，解码时间短；需要确保图片完全准备好才能显示
异步解码(decoding="async")
图片加载完成后，解码过程在后台进行
不会阻塞主线程
使用场景：大图片加载;非关键图片;需要保持页面响应性的场景
大多数场景推荐用
decoding="async"，因为不会阻塞主线程，提升页面响应，提升渲染流畅度。只有在特殊场景比如立即在Canvas上绘制图片或者图片是页面关键内容，需要立即显示。srcset 和 sizes
作用：实现响应式图片，根据设备分辨率和屏幕宽度加载最合适的图片。
srcset：定义多个图片资源及其尺寸/分辨率。
sizes：定义不同视口宽度下图片的显示尺寸。
示例：
<img src="/images/banner-800.jpg" srcset="/images/banner-400.jpg 400w, /images/banner-800.jpg 800w, /images/banner-1600.jpg 1600w" sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px" alt="横幅" />原理：浏览器根据设备和 CSS 选择最优图片，节省流量、提升清晰度。
crossorigin
作用：控制图片的跨域请求策略；决定是否在请求图片时发送凭证信息（如cookie，http认证等），影响着图片资源的安全性和访问权限。
可选值：
anonymous：不带凭证，请求图片是不会发送任何凭证信息（cookie等），适用于公开的图片资源、CDN上的静态图片use-credentials：带凭证（如cookies），请求图片时会发送凭证信息，浏览器会自动携带当前域名的cookie，适用于需要认证的图片资源、私有图片内容。通俗点讲
凭证发送机制
浏览器会自动发送当前域名的cookies
不需要在标签中显示指定cookies
浏览器默认行为 具体发送流程如下
用户浏览器 目标服务器 | | | 1. 发起图片请求 | | 2. 自动携带当前域名cookies | | 3. 发送 HTTP 请求头 | | Cookie: sessionId=xxx | |------------------------->| | | | 4. 服务器验证 cookies | | 5. 返回图片数据 | |<-------------------------|访问控制机制
合法访问（在网站中）： 1. 用户登录网站 2. 获得 cookies 3. 网站使用 <img crossorigin="use-credentials"> 请求图片 4. 浏览器自动携带 cookies 5. 服务器验证 cookies 6. 返回图片 非法访问（直接访问 URL）： 1. 直接在浏览器输入图片 URL(请求中不会包含crossorigin属性) 2. 请求中不包含 cookies 3. 服务器验证失败 4. 返回错误或占位图访问控制主要是通过服务器端的 cookies 验证来实现的，crossorigin 属性是告诉浏览器如何发送请求，只是确保在网站中正确发送 cookies 的一个机制。直接访问 URL 时，由于没有 cookies，所以会被服务器拒绝，这与 crossorigin 属性无关。
使用场景
需要带凭证的场景：
用户认证图片（如用户头像）
私有内容图片（如付费内容）
需要用户登录状态的图片
企业内部图片资源
不需要带凭证的场景：
公开
CDN图片第三方公开图片
静态资源图片
crossorigin使用时的安全考虑
不能使用通配符 * 作为 Access-Control-Allow-Origin 的值； 必须指定具体的允许域名；
服务器响应头需要包含
Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: https://example.com示例:
<img src="https://cdn.com/img.png" alt="CDN图片" crossorigin="anonymous" />图片的跨域请求策略是什么？什么场景需要带凭证，带了凭证图片会怎样？
referrerpolicy
作用：控制图片请求时的
Referer头部, 只是控制请求头中Referer字段的值，可以隐藏或修改Referer信息，一定注意它本身并不具备防盗功能，它只是一个控制referer头的工具。常用值介绍
no-referrer
不发送
Referer头完全隐藏请求来源
适用于：需要完全隐私保护的场景
no-referrer-when-downgrade（默认值）
从
HTTPS到HTTPS：发送完整URL从
HTTPS到HTTP：不发送适用于：大多数普通场景
origin
只发送源站域名
例如：从
https://example.com/page.html发送请求Referer:
https://example.com适用于：需要知道来源但不需要具体页面的场景
origin-when-cross-origin
同源请求：发送完整
URL跨域请求：只发送源站域名
适用于：区分同源和跨域请求的场景
same-origin
同源请求：发送完整
URL跨域请求：不发送
适用于：只在同源时显示来源的场景
strict-origin
从
HTTPS到HTTPS：发送源站域名从
HTTPS到HTTP：不发送适用于：需要保护
HTTPS来源的场景
strict-origin-when-cross-origin
同源请求：发送完整
URL跨域请求：从
HTTPS到HTTPS发送源站域名，其他情况不发送适用于：需要严格保护跨域请求的场景
unsafe-url
总是发送完整
URL即使从
HTTPS到HTTP也发送适用于：需要完整来源信息的场景
referer
开始说防盗链之前，我觉得非常有必要讲一下
referer这个属性。referer是请求头中的内容。
image.png referer的设置规则
只能通过
referrerpolicy属性控制浏览器会根据当前页面的
URL自动设置JavaScript代码或者手动HTTP请求不能直接修改referer头
这规则是浏览器的安全机制，防止伪造请求来源。
图片加载时候不设置任何 referrerpolicy 属性，浏览器会给referrerpolicy默认值为
no-referrer-when-downgrade,它对应的referer值为从
HTTPS到HTTPS：发送完整URL作为Referer从
HTTPS到HTTP：不发送Referer从
HTTP到HTTP：发送完整URL作为Referer
举个具体例子：
场景1：HTTPS 页面请求 HTTPS 图片 页面：https://example.com/page.html 图片：https://example.com/image.jpg Referer: https://example.com/page.html 场景2：HTTPS 页面请求 HTTP 图片 页面：https://example.com/page.html 图片：http://example.com/image.jpg Referer: 不发送 （其实默认行为也是为了保护用户隐私，防止从HTTPS页面泄露信息到HTTP请求，这也体现了浏览器的安全机制） 场景3：HTTP 页面请求 HTTP 图片 页面：http://example.com/page.html 图片：http://example.com/image.jpg Referer: http://example.com/page.html防盗链详解
什么是防盗链
防盗链是指通过检查图片请求的
Referer来源，防止其他网站盗用你的图片资源和带宽。出现场景
你的图片被其他网站直接引用，导致你的服务器或
CDN带宽被消耗。出现流程
其他网站用
<img src="你的图片地址">引用你的图片用户访问该网站时，浏览器向你的服务器请求图片，并带上
Referer头你的服务器检查
Referer，如果不是你自己的网站，则拒绝请求或返回占位图
如何避免
需要配合服务器/CDN配置
Nginx 配置示例
location /images/ { # 只允许来自 example.com 的请求 valid_referers none blocked example.com; # 如果 Referer 不合法，返回 403 if ($invalid_referer) { return 403; } }CDN 配置示例
设置允许的
Referer域名白名单设置防盗链规则
配置控制好访问策略
referrerpolicy 相对于防盗链条的常见用途
隐私保护：使用 no-referer 隐藏请求来源
配合防盗链：使用strict-origin 只显示域名
示例
<!-- 隐私保护场景 --> <img src="/images/private.jpg" referrerpolicy="no-referrer" alt="隐私图片" /> <!-- 配合防盗链场景 --> <img src="/images/protected.jpg" referrerpolicy="strict-origin" alt="受保护图片" />usemap 和 ismap
usemap：将图片与 HTML 的
<map>区域映射结合，实现图片热点链接。ismap：配合
<a>标签和服务器端脚本，实现图片点击坐标传递。示例：
<img src="/images/map.png" alt="地图" usemap="#mymap" /> <map name="mymap"> <area shape="rect" coords="34,44,270,350" href="/link1" alt="区域1" /> <area shape="circle" coords="337,300,44" href="/link2" alt="区域2" /> </map>
响应式图片实践
（还有一个响应式图片需要处理） 通过
srcset和sizes，可为不同设备和网络环境提供最优图片资源。<img src="/images/photo-800.jpg" srcset="/images/photo-400.jpg 400w, /images/photo-800.jpg 800w, /images/photo-1600.jpg 1600w" sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px" alt="风景" />浏览器自动选择最合适的图片，兼顾清晰度和加载速度。
移动端优先加载小图，桌面端加载大图。
SEO 与可访问性注意事项
alt 属性必填，描述图片内容，提升无障碍和
SEO。避免
alt为空或堆砌关键词。图片与页面内容相关，提升语义。
对装饰性图片可用
alt=""，让屏幕阅读器跳过。图片周围配合标题、描述，提升搜索引擎理解。
最佳实践和注意点
始终写
alt、width、height,指定width和height，防止 CLS（布局抖动）合理用这几个高级属性
loading、decoding、srcset、sizes为非首屏图片加
loading="lazy"，减少首屏资源压力。合理使用
srcset和sizes，提升响应式体验。
图片压缩、格式优化、使用
CDN加速图片分发图片尽量压缩，优化格式，
WebP使用起来，防止浪费带宽结合现代框架（如
Next.js<Image />）自动优化避免滥用大图，影响加载速度
避免忽略
alt属性，影响SEO和可访问性，避免alt为空或堆砌关键词。避免直接使用
base64大图，影响性能。
总结
HTML
<img>标签是网页图片展示的基础，合理使用原生属性、关注性能和可访问性，是现代前端开发和SEO优化的必备技能。建议结合响应式、懒加载、CDN、WebP 等技术，打造高性能、友好的图片体验。
-END -
如果您关注前端+AI 相关领域可以扫码进群交流
添加小编微信进群😊
关于奇舞团
奇舞团是 360 集团最大的大前端团队，非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
