前端开发的你，其实并没有真的掌握img标签！

独立开阀者_FwtCoder2025-07-14 9:20

作者：前段界

原文：mp.weixin.qq.com/s/YhAUnHXFL...

通过本文，你将系统掌握 HTML <img> 标签的核心知识与实战技巧，具体包括：

  1. 标签基础用法 ：掌握 <img> 标签的基本结构、src 和 alt 等必要属性的规范写法。
  2. 关键属性深度解析：
    • src/alt：理解图片路径类型（相对 / 绝对 / URL）与替代文本的无障碍及 SEO 价值；
    • width/height：通过预定义尺寸避免页面布局抖动（CLS）；
    • loading：运用懒加载（lazy）优化首屏性能，区分首屏与非首屏图片加载策略；
    • decoding：通过异步解码（async）减少主线程阻塞；
    • srcset/sizes：实现响应式图片，根据设备分辨率和屏幕宽度动态加载最优资源；
    • crossorigin/referrerpolicy：控制跨域请求策略与请求来源隐私保护；
    • usemap/ismap：实现图片热点链接与坐标传递等进阶交互。
  4. 性能优化实践：结合懒加载、CDN、WebP 格式压缩等技术提升图片加载效率。
  5. SEO 与可访问性 ：通过规范 alt 文本、语义化标签使用，提升搜索引擎理解与无障碍体验。
  6. 最佳实践 ：从属性配置（如必写 alt/width/height）到工程化优化（如避免 base64 大图）的全流程经验总结。

正文从这里开始~

img 基本用法

HTML 的 <img> 标签用于在网页中嵌入图片，是 Web 最常用的媒体标签之一。

ini 复制代码 
<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 上的图片。

  • 实际效果：

    • 路径不同，浏览器请求的目标服务器和图片资源不同，影响加载速度、跨域策略和缓存。

  • 示例：

    ini 复制代码 
    <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 友好，帮助搜索引擎理解图片内容

  • 示例：

    ini 复制代码 
    <img src="/images/avatar.png" alt="用户头像" />

  • 最佳实践：alt 文本应简洁、准确描述图片内容。

width 和 height

  • 作用：指定图片的显示宽高（单位为像素）。

  • 意义：

    • 保留图片空间，防止页面布局抖动（CLS）
    • 浏览器可提前分配空间，提升渲染性能

  • CLS（Cumulative Layout Shift）布局抖动：

    • 定义：CLS 是衡量页面内容在加载过程中发生意外移动的指标。常见于图片、广告等资源未提前分配空间，加载后导致页面元素跳动。
    • 真实现象：用户正在阅读或点击内容时，图片加载进来把内容"挤下去"或"挤偏"，影响体验。
    • width/height 的作用：提前为图片预留空间，浏览器可在图片加载前就分配好区域，避免内容跳动。

  • 示例：

    arduino 复制代码 
    <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"。

  • 最佳实践：首屏图片优先加载，非首屏图片懒加载，提升首屏速度和整体性能。

  • 示例：

    ini 复制代码 
    <img src="/images/large.jpg" alt="大图" loading="lazy" />

  • 性能优化 ：为非首屏图片加 loading="lazy" 可显著提升页面加载速度。

decoding

  • 作用：控制图片解码方式。

  • 可选值：

    • auto（默认）：浏览器自动决定
    • sync：同步解码
    • async：异步解码（推荐）

  • 示例：

    ini 复制代码 
    <img src="/images/photo.jpg" alt="风景" decoding="async" />

图片请求响应格式

当浏览器请求图片时，服务器返回的是图片的二进制数据（binary data） 并且这些二进制数据可能是各种格式，比如JPEG、PNG、WebP 等。这些二进制格式是经过压缩的，不能直接在浏览器页面显示。

Decoding（解码）具体是什么

解码是将压缩的图片二进制数据转换为浏览器可以显示和使用的像素数据过程，具体流程如下

  1. 解压缩图片数据

  2. 将数据转换为位图(bitmap)格式

  3. 处理颜色空间转换

  4. 应用透明等效果

解码是浏览器原生支持的，不同浏览器使用不同的图片解码引擎，现代浏览器都是支持多种图片格式的解码

async 解码 vs sync 解码

同步解码(decoding="async"):

  • 图片加载完成后立即进行解码
  • 解码过程会阻塞主线程

使用场景：需要立即使用图片的场景；图片较小，解码时间短；需要确保图片完全准备好才能显示

异步解码(decoding="async")

  • 图片加载完成后，解码过程在后台进行
  • 不会阻塞主线程

使用场景：大图片加载;非关键图片;需要保持页面响应性的场景

大多数场景推荐用 decoding="async"，因为不会阻塞主线程，提升页面响应，提升渲染流畅度。只有在特殊场景比如立即在Canvas上绘制图片或者图片是页面关键内容，需要立即显示。

srcset 和 sizes

  • 作用：实现响应式图片，根据设备分辨率和屏幕宽度加载最合适的图片。

  • srcset：定义多个图片资源及其尺寸/分辨率。

  • sizes：定义不同视口宽度下图片的显示尺寸。

  • 示例：

    ini 复制代码 
    <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
  • 浏览器默认行为 具体发送流程如下
ini 复制代码 
用户浏览器                   目标服务器
     |                          |
     |  1. 发起图片请求         |
     |  2. 自动携带当前域名cookies |
     |  3. 发送 HTTP 请求头     |
     |     Cookie: sessionId=xxx |
     |------------------------->|
     |                          |
     |  4. 服务器验证 cookies   |
     |  5. 返回图片数据         |
     |<-------------------------|
访问控制机制
markdown 复制代码 
合法访问（在网站中）：
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 属性无关。

使用场景

需要带凭证的场景：

  1. 用户认证图片（如用户头像）
  2. 私有内容图片（如付费内容）
  3. 需要用户登录状态的图片
  4. 企业内部图片资源

不需要带凭证的场景：

  1. 公开 CDN 图片
  2. 第三方公开图片
  3. 静态资源图片

crossorigin使用时的安全考虑

不能使用通配符 * 作为 Access-Control-Allow-Origin 的值； 必须指定具体的允许域名；

服务器响应头需要包含

arduino 复制代码 
  Access-Control-Allow-Credentials: true
  Access-Control-Allow-Origin: https://example.com

示例:

ini 复制代码 
<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的设置规则

  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

举个具体例子：

makefile 复制代码 
场景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. 其他网站用 <img src="你的图片地址"> 引用你的图片
  2. 用户访问该网站时，浏览器向你的服务器请求图片，并带上 Referer 头
  3. 你的服务器检查 Referer，如果不是你自己的网站，则拒绝请求或返回占位图
如何避免

需要配合服务器/CDN配置

Nginx 配置示例

bash 复制代码 
location /images/ {
    # 只允许来自 example.com 的请求
    valid_referers none blocked example.com;
    
    # 如果 Referer 不合法，返回 403
    if ($invalid_referer) {
        return 403;
    }
}

CDN 配置示例

  • 设置允许的 Referer域名白名单
  • 设置防盗链规则
  • 配置控制好访问策略
referrerpolicy 相对于防盗链条的常见用途
  • 隐私保护：使用 no-referer 隐藏请求来源
  • 配合防盗链：使用strict-origin 只显示域名
示例
xml 复制代码 
<!-- 隐私保护场景 -->
<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> 标签和服务器端脚本，实现图片点击坐标传递。

  • 示例：

    ini 复制代码 
    <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，可为不同设备和网络环境提供最优图片资源。

ini 复制代码 
<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 等技术，打造高性能、友好的图片体验。

相关推荐
三原几秒前
7000块帮朋友做了2个小程序加一个后台管理系统，值不值？
前端·vue.js·微信小程序
popoxf9 分钟前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js
白仑色15 分钟前
完整 Spring Boot + Vue 登录系统
vue.js·spring boot·后端
爱编程的喵36 分钟前
React Router Dom 初步：从传统路由到现代前端导航
前端·react.js
阳火锅1 小时前
Vue 开发者的外挂工具：配置一个 JSON，自动造出一整套页面！
javascript·vue.js·面试
每天吃饭的羊1 小时前
react中为啥使用剪头函数
前端·javascript·react.js
Nicholas681 小时前
Flutter帧定义与60-120FPS机制
前端
多啦C梦a1 小时前
【适合小白篇】什么是 SPA？前端路由到底在路由个啥？我来给你聊透！
前端·javascript·架构
薛定谔的算法1 小时前
《长安的荔枝·事件流版》——一颗荔枝引发的“冒泡惨案”
前端·javascript·编程语言
中微子1 小时前
CSS 的 position 你真的理解了吗？
前端·css
热门推荐
01全球最强模型Grok4，国内已可免费使用！（附教程）02KGG转MP3工具|非KGM文件|解密音频03Coze扣子平台完整体验和实践（附国内和国际版对比）04身弱武修法：玄之又玄，奇妙之门05集群聊天服务器---MySQL数据库的建立06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07浅谈几种js设计模式08使用Ruby接入实时行情API教程09DeepSeek各版本说明与优缺点分析10基于odoo17的设计模式详解---单例模式