# 通过本文你能学到什么？通过本文，你将系统掌握 HTML `` 标签的核心知识与实战技巧，具体包括： 1. **标签基础用法**：掌握 `` 标签的基本结构、`src` 和 `alt` 等必要属性的规范写法。 2. **关键属性深度解析**： * `src`/`alt`：理解图片路径类型（相对 / 绝对 / URL）与替代文本的无障碍及 SEO 价值； * `width`/`height`：通过预定义尺寸避免页面布局抖动（CLS）； * `loading`：运用懒加载（`lazy`）优化首屏性能，区分首屏与非首屏图片加载策略； * `decoding`：通过异步解码（`async`）减少主线程阻塞； * `srcset`/`sizes`：实现响应式图片，根据设备分辨率和屏幕宽度动态加载最优资源； * `crossorigin`/`referrerpolicy`：控制跨域请求策略与请求来源隐私保护； * `usemap`/`ismap`：实现图片热点链接与坐标传递等进阶交互。 3. **性能优化实践**：结合懒加载、CDN、WebP 格式压缩等技术提升图片加载效率。 4. **SEO 与可访问性**：通过规范 `alt` 文本、语义化标签使用，提升搜索引擎理解与无障碍体验。 5. **最佳实践**：从属性配置（如必写 `alt/width/height`）到工程化优化（如避免 base64 大图）的全流程经验总结。 **大家好，我是芝士，欢迎[点此扫码加我微信 Hunyi32](https://juejin.cn/pin/7348414849397375014 "https://juejin.cn/pin/7348414849397375014") 交流，最近创建了一个低代码/前端工程化交流群，欢迎加我微信 Hunyi32 进群一起交流学习，也可关注我的公众号\[ 前端界 ] 持续更新优质技术文章** **正文从这里开始** ## img 基本用法 `HTML` 的 `` 标签用于在网页中嵌入图片，是 Web 最常用的媒体标签之一。 ```html 示例图片

``` * `` 是自闭合标签，无需结束标签。 * 必须指定 `src` 属性，推荐始终添加 `alt` 属性。 *** ## 常用原生属性详解 ### src * **作用**：指定图片的路径（本地或远程 URL），即浏览器实际请求图片资源的地址。 * **浏览器请求原理**： * 当页面渲染到 `

` 时，浏览器会自动向 `src` 指定的地址发起 HTTP 请求，下载图片并显示。 * **路径类型区别**： * **相对路径**：如 `src="images/logo.png"`，相对于当前 HTML 文件所在目录。 * **绝对路径**：如 `src="/images/logo.png"`，以网站根目录为起点，推荐用于站内图片。 * **完整 URL**：如 `src="https://cdn.example.com/img.png"`，可加载任意站点或 CDN 上的图片。 * **实际效果**： * 路径不同，浏览器请求的目标服务器和图片资源不同，影响加载速度、跨域策略和缓存。 * **示例**： ```html

``` ### alt * **作用**：为图片提供替代文本。 * **意义**： * 图片无法加载时显示 * 屏幕阅读器辅助访问 * SEO 友好，帮助搜索引擎理解图片内容 * **示例**： ```html

``` * **最佳实践**：alt 文本应简洁、准确描述图片内容。 ### width 和 height * **作用**：指定图片的显示宽高（单位为像素）。 * **意义**： * 保留图片空间，防止页面布局抖动（CLS） * 浏览器可提前分配空间，提升渲染性能 * **CLS（Cumulative Layout Shift）布局抖动**： * **定义**：CLS 是衡量页面内容在加载过程中发生意外移动的指标。常见于图片、广告等资源未提前分配空间，加载后导致页面元素跳动。 * **真实现象**：用户正在阅读或点击内容时，图片加载进来把内容"挤下去"或"挤偏"，影响体验。 * **width/height 的作用**：提前为图片预留空间，浏览器可在图片加载前就分配好区域，避免内容跳动。 * **示例**： ```html

``` * **优化建议**：始终为图片指定 width 和 height，或用 CSS 明确尺寸。 ### loading * **作用**：控制图片的加载时机。 * **可选值**： * `auto`（默认）：浏览器自动决定 * `lazy`：懒加载，图片进入视口时才加载 * `eager`：优先加载 * **lazy 的详细解释**： * **原理**：当图片距离用户当前可见区域（视口，viewport）足够近时，浏览器才会发起请求加载图片。 * **视口（viewport）概念**：视口是用户当前屏幕上可见的网页区域。只有进入视口或接近视口的图片才会被加载。 * **流程**：页面初始渲染时，非首屏图片不会立即加载，只有用户滚动到图片附近时才加载。 * **首屏与非首屏**： * **首屏图片**：用户打开页面时，无需滚动即可看到的图片。 * **非首屏图片**：需要滚动页面才能看到的图片。 * **预加载与懒加载场景**： * **预加载**：首屏图片、重要视觉内容，建议用 `loading="eager"` 或不加 loading 属性。 * **懒加载**：非首屏图片、长列表、瀑布流等，建议用 `loading="lazy"`。 * **最佳实践**：首屏图片优先加载，非首屏图片懒加载，提升首屏速度和整体性能。 * **示例**： ```html

``` * **性能优化**：为非首屏图片加 `loading="lazy"` 可显著提升页面加载速度。 ### decoding * **作用**：控制图片解码方式。 * **可选值**： * `auto`（默认）：浏览器自动决定 * `sync`：同步解码 * `async`：异步解码（推荐） * **示例**： ```html

``` #### 图片请求响应格式当浏览器请求图片时，服务器返回的是图片的二进制数据（binary data）并且这些二进制数据可能是各种格式，比如JPEG、PNG、WebP 等。这些二进制格式是经过压缩的，不能直接在浏览器页面显示。 #### Decoding（解码）具体是什么解码是将压缩的图片二进制数据转换为浏览器可以显示和使用的像素数据过程，具体流程如下 1. 解压缩图片数据 2. 将数据转换为位图(bitmap)格式 3. 处理颜色空间转换 4. 应用透明等效果 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4f56229d87fe4dc6bc3c6faf7cdd1961~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6Iqd5aOr5Yqg:q75.awebp?rk3s=f64ab15b&x-expires=1759357078&x-signature=omGQI30vBu68VbV2ZXRm1aS1Hf8%3D) > 解码是浏览器原生支持的，不同浏览器使用不同的图片解码引擎，现代浏览器都是支持多种图片格式的解码 #### async 解码 vs sync 解码同步解码(decoding="async"): * 图片加载完成后立即进行解码 * 解码过程会阻塞主线程使用场景：需要立即使用图片的场景；图片较小，解码时间短；需要确保图片完全准备好才能显示异步解码(decoding="async") * 图片加载完成后，解码过程在后台进行 * 不会阻塞主线程使用场景：大图片加载;非关键图片;需要保持页面响应性的场景 > 大多数场景推荐用 `decoding="async"`，因为不会阻塞主线程，提升页面响应，提升渲染流畅度。只有在特殊场景比如立即在Canvas上绘制图片或者图片是页面关键内容，需要立即显示。 ### srcset 和 sizes * **作用**：实现响应式图片，根据设备分辨率和屏幕宽度加载最合适的图片。 * **srcset**：定义多个图片资源及其尺寸/分辨率。 * **sizes**：定义不同视口宽度下图片的显示尺寸。 * **示例**： ```html

``` * **原理**：浏览器根据设备和 CSS 选择最优图片，节省流量、提升清晰度。 ### crossorigin * **作用**：控制图片的跨域请求策略；决定是否在请求图片时发送凭证信息（如cookie，http认证等），影响着图片资源的安全性和访问权限。 * **可选值**： * `anonymous`：不带凭证，请求图片是不会发送任何凭证信息（cookie等），适用于公开的图片资源、`CDN` 上的静态图片 * `use-credentials`：带凭证（如 `cookies`），请求图片时会发送凭证信息，浏览器会自动携带当前域名的 `cookie`，适用于需要认证的图片资源、私有图片内容。通俗点讲 #### 凭证发送机制 * 浏览器会自动发送当前域名的cookies * 不需要在标签中显示指定cookies * 浏览器默认行为具体发送流程如下 ```text 用户浏览器目标服务器 | | | 1. 发起图片请求 | | 2. 自动携带当前域名cookies | | 3. 发送 HTTP 请求头 | | Cookie: sessionId=xxx | |------------------------->| | | | 4. 服务器验证 cookies | | 5. 返回图片数据 | |<-------------------------| ``` ##### 访问控制机制 ```text 合法访问（在网站中）： 1. 用户登录网站 2. 获得 cookies 3. 网站使用请求图片 4. 浏览器自动携带 cookies 5. 服务器验证 cookies 6. 返回图片非法访问（直接访问 URL）： 1. 直接在浏览器输入图片 URL(请求中不会包含crossorigin属性) 2. 请求中不包含 cookies 3. 服务器验证失败 4. 返回错误或占位图 ``` > 访问控制主要是通过服务器端的 cookies 验证来实现的，crossorigin 属性是告诉浏览器如何发送请求，只是确保在网站中正确发送 cookies 的一个机制。直接访问 URL 时，由于没有 cookies，所以会被服务器拒绝，这与 crossorigin 属性无关。 #### 使用场景需要带凭证的场景： 1. 用户认证图片（如用户头像） 2. 私有内容图片（如付费内容） 3. 需要用户登录状态的图片 4. 企业内部图片资源不需要带凭证的场景： 1. 公开 `CDN` 图片 2. 第三方公开图片 3. 静态资源图片 #### crossorigin使用时的安全考虑不能使用通配符 \* 作为 Access-Control-Allow-Origin 的值；必须指定具体的允许域名；服务器响应头需要包含 ```js Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: https://example.com ``` #### 示例 ```html CDN图片

``` 图片的跨域请求策略是什么？什么场景需要带凭证，带了凭证图片会怎样？ ### 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](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/04f6d9c12ab84fb3a32c7f259c577a97~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6Iqd5aOr5Yqg:q75.awebp?rk3s=f64ab15b&x-expires=1759357078&x-signature=XA0JSz0mPzkmvPgKUM0SCA28nBY%3D) referer的设置规则 1. 只能通过 `referrerpolicy` 属性控制 2. 浏览器会根据当前页面的 `URL` 自动设置 3. `JavaScript` 代码或者手动 `HTTP` 请求不能直接修改 `referer` 头这规则是浏览器的安全机制，防止伪造请求来源。图片加载时候不设置任何 referrerpolicy 属性，浏览器会给referrerpolicy默认值为 `no-referrer-when-downgrade` ,它对应的 `referer` 值为 * 从 `HTTPS` 到` HTTPS`：发送完整 `URL` 作为 `Referer` * 从 `HTTPS` 到 `HTTP`：不发送 `Referer` * 从 `HTTP` 到 `HTTP`：发送完整 `URL` 作为 `Referer` 举个具体例子： ```text 场景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` 带宽被消耗。 ##### 出现流程 1. 其他网站用 `

` 引用你的图片 2. 用户访问该网站时，浏览器向你的服务器请求图片，并带上 `Referer` 头 3. 你的服务器检查 `Referer`，如果不是你自己的网站，则拒绝请求或返回占位图 ##### 如何避免需要配合服务器/CDN配置 **Nginx 配置示例** ```js location /images/ { # 只允许来自 example.com 的请求 valid_referers none blocked example.com; # 如果 Referer 不合法，返回 403 if ($invalid_referer) { return 403; } } ``` **CDN 配置示例** * 设置允许的 `Referer`域名白名单 * 设置防盗链规则 * 配置控制好访问策略 ##### referrerpolicy 相对于防盗链条的常见用途 * 隐私保护：使用 no-referer 隐藏请求来源 * 配合防盗链：使用strict-origin 只显示域名 ##### 示例 ```js 隐私图片

``` ### usemap 和 ismap * **usemap**：将图片与 HTML 的 `` 区域映射结合，实现图片热点链接。 * **ismap**：配合 `` 标签和服务器端脚本，实现图片点击坐标传递。 * **示例**： ```html

``` *** ## 响应式图片实践（还有一个响应式图片需要处理）通过 `srcset` 和 `sizes`，可为不同设备和网络环境提供最优图片资源。 ```html

``` * 浏览器自动选择最合适的图片，兼顾清晰度和加载速度。 * 移动端优先加载小图，桌面端加载大图。 ## SEO 与可访问性注意事项 * **alt 属性必填**，描述图片内容，提升无障碍和`SEO`。 * 避免 `alt` 为空或堆砌关键词。 * 图片与页面内容相关，提升语义。 * 对装饰性图片可用 `alt=""`，让屏幕阅读器跳过。 * 图片周围配合标题、描述，提升搜索引擎理解。 ## 最佳实践和注意点 * 始终写 `alt、width、height`,指定 `width` 和 `height`，防止 CLS（布局抖动） * 合理用这几个高级属性 `loading、decoding、srcset、sizes` * 为非首屏图片加 `loading="lazy"`，减少首屏资源压力。 * 合理使用 `srcset` 和 `sizes`，提升响应式体验。 * 图片压缩、格式优化、使用`CDN` 加速图片分发 * 图片尽量压缩，优化格式，`WebP` 使用起来，防止浪费带宽 * 结合现代框架（如 `Next.js` ``）自动优化 * 避免滥用大图，影响加载速度 * 避免忽略 `alt` 属性，影响 `SEO` 和可访问性，避免 `alt` 为空或堆砌关键词。 * 避免直接使用`base64` 大图，影响性能。 **大家好，我是芝士，最近创建了一个低代码/前端工程化交流群，欢迎[点此扫码加我微信 Hunyi32](https://juejin.cn/pin/7348414849397375014%22https://juejin.cn/pin/7348414849397375014%22 "https://juejin.cn/pin/7348414849397375014%22https://juejin.cn/pin/7348414849397375014%22") 交流，也可关注我的公众号\[ 前端界 ] 持续更新优质技术文章** ## 总结 HTML `` 标签是网页图片展示的基础，合理使用原生属性、关注性能和可访问性，是现代前端开发和 `SEO` 优化的必备技能。建议结合响应式、懒加载、CDN、WebP 等技术，打造高性能、友好的图片体验。