如何批量下载网页上的图片
做设计调研或者扒竞品素材的时候，最烦的就是一张张去存图片。供应商网站的 80 张产品图、画廊页面里的高清大图，甚至是某大厂作品集……天天右键另存为，这不叫工作，这叫纯纯的体力活。
右键保存的问题
大多数人发现自己需要批量下载图片，往往是已经陷在重复操作里——右键、另存为、改名，右键、另存为、改名……浏览器没有内置的"选中所有图片一起下"功能。
第三方工具有，但通常属于两类：只扫 <img> 标签的轻量扩展（会漏掉懒加载的图、背景图），或者需要安装的桌面程序（绕不开浏览器的登录会话，访问需要登录才能看的图片会 403）。
FlowPick 的图片下载器跑在浏览器里，带着你当前的登录态，通过监控网络请求来捕获图片，不局限于 <img> 标签。
FlowPick 能检测到哪些图片
不是所有图片都藏在 <img> 标签里。FlowPick 通过监控浏览器实际发出的网络请求来捕获图片，覆盖以下几类来源：
- 标准
<img>元素 — 最常见的那种 <picture>和<source>元素 — 带多分辨率的响应式图片，FlowPick 选分辨率最大的那个- 懒加载图片 — 滚动时才触发加载的图片，进入 DOM 后捕获
<video>封面帧 — 视频的 poster 缩略图
扫描器在 DOM 的当前状态下运行。还没滚到的区域、还没加载的图片，不会出现在列表里——这一点在操作时要注意。
检测不到的情况：
- Canvas 渲染的图片——不走网络请求，扩展感知不到
- Base64 内联的图片——直接嵌在 HTML 里，不是独立资源
- CSS
background-image——可能检测到也可能不到，取决于网站实现方式
支持的图片格式
| 格式 | 扩展名 | 常见用途 |
|---|---|---|
| JPEG | .jpg、.jpeg | 照片、产品图 |
| PNG | .png | 截图、带透明度的图形 |
| GIF | .gif | 动图、图标 |
| WebP | .webp | 现代 Web 格式，体积通常比 JPEG 小 |
| SVG | .svg | 图标、Logo、矢量插图 |
关于 WebP：主流浏览器都支持，但一些较旧的桌面软件（2021 年以前的 Photoshop 版本、部分 Windows 程序）无法直接打开。如果你需要 JPEG 兼容格式，FlowPick 支持只筛选下载 .jpg/.jpeg。
一步步操作
第一步：打开页面，先滚完再说
打开有目标图片的页面。如果是懒加载的画廊网站（大多数现代图片站都是），先慢慢把页面从头滚到底，让图片真正加载进 DOM，再去开 FlowPick。
这一步很多人跳过，然后奇怪为什么扩展里只显示了几张。页面上半部分加载了，下半部分没滚到的图片根本不在 DOM 里，FlowPick 也没办法捕获。
第二步：打开 FlowPick 弹窗
点击浏览器工具栏里的 FlowPick 图标。角标数字是当前页面检测到的媒体资源总数。
第三步：切到图片标签
弹窗里点 图片 标签（📷），看到检测到的图片缩略图网格。
数量可能比你预期的多——大多数页面除了内容图片，还会混进 UI 元素、图标、广告位图片。这就是过滤的意义所在。
第四步：过滤出你要的
按格式过滤：只勾选你需要的格式。只要 JPEG 就只勾 .jpg/.jpeg，不需要动图就取消 .gif。
按文件大小过滤：设置最小 KB 值是最有效的过滤方式。5 KB 以下几乎都是图标或装饰元素，根本不是你要的内容图。
| 场景 | 建议最小文件大小 |
|---|---|
| 过滤掉图标和装饰 | 10 KB |
| 内容画廊 | 50 KB |
| 只要高清大图 | 100 KB 以上 |
过滤后缩略图网格会更新。过一遍眼，确认没有漏网之鱼——现在取消勾选一张比下完再删快多了。
第五步：选中目标图片
- 全选 抓取过滤后的全部图片
- 点击单张缩略图切换是否选中
- Shift + 点击 选中一个范围
第六步：下载
点 下载已选。FlowPick 并发下载选中的图片，逐张保存到浏览器默认的下载文件夹，保留原始文件名。
弹窗里有进度提示。并发下载的意思是 50 张图不需要 50 倍于 1 张的时间。
下载完的文件在哪
所有图片保存到浏览器默认下载文件夹（通常是系统 Downloads 目录），每张保留原始 URL 里的文件名，不打包成 ZIP。
如果下载到的图片文件名很通用（比如 image.jpg、photo001.jpg），说明那个网站的图片 URL 本来就没有有意义的文件名，不是 FlowPick 的问题。
几个真实场景
产品图对比调研
在比较多家供应商的产品，每个商品页有 5-8 个角度图，在画廊里懒加载。
操作：打开产品页，点击每个缩略图让全尺寸图片加载进来，然后用 FlowPick 设置最小文件大小（比如 150 KB），把产品大图筛出来。
摄影作品集存档
作品集网站常见大图全屏滚动布局，懒加载依赖很重——只有当那一块滚进视口，图片才真正加载。
操作：以正常速度浏览完整个页面，再打开 FlowPick，设最小 100 KB。基本能拿到干净的高清照片，不带缩略图混进来。
课程讲义与技术文档
技术文档、在线课程里经常有大量图表和流程截图，没有独立下载按钮。
操作：把文档页滚完，用 FlowPick 按文件大小过滤掉 UI 元素，批量拿到所有图表。
B 站动态和评论区
UP 主动态里的配图、评论区的图片都能被 FlowPick 检测到。先把页面滚完让图片加载，再开 FlowPick 扫一遍。这个场景和 B 站视频下载 可以配合用——视频用视频标签、图片用图片标签，同一个弹窗切标签就行。
哪些网站效果好，哪些不行
效果好的：
- Pixiv / ArtStation：画廊类网站，图片走标准网络请求，滚完页面再扫效果不错
- Notion 公开页面：嵌入图片的 Notion 分享页，FlowPick 可以一次全抓
- B 站动态：UP 主动态和评论区配图，滚完加载后可以批量捕获
不太行的：
- Google 图片搜索结果：搜索结果里的图片托管在第三方域名，CORS 限制可能导致下载失败。建议跳到原始页面下载
- Canvas 渲染的画廊：少数网站用 WebGL/Canvas 把图片画出来，这种情况图片不走网络请求，FlowPick 检测不到
- 带防盗链签名的图片：部分网站图片 URL 包含 IP 绑定的签名令牌或
Referer校验，FlowPick 能检测到 URL，但直接请求会 403。这时候只能右键 → 在新标签页打开，手动保存
隐私说明
FlowPick 的图片扫描完全在你的浏览器标签页内运行。检测到的图片 URL 和下载的文件不会离开你的设备。下载是你的浏览器直接请求图片的托管服务器，中间没有 FlowPick 的服务器参与。
同一个 FlowPick 扩展，切不同的标签就能处理不同类型的媒体。图片是图片标签，视频是视频标签，音频是音频标签——如果你对另外两类感兴趣，下面有对应的教程。
推荐阅读
- 如何下载 M3U8/HLS 流媒体：完整入门指南 — 图片、视频、音频，FlowPick 用同一套嗅探逻辑处理，这篇讲 HLS 流的底层原理和操作步骤
- 嗅探并下载网页音频：播客、BGM、有声书一网打尽 — 和图片下载同一套操作逻辑，切到音频标签就行
- 如何下载 Bilibili 视频到本地 — B 站视频和图片经常要一起存，这篇讲视频那部分
- FlowPick 与 Video DownloadHelper 对比 — 批量图片下载是 FlowPick 有而 Video DownloadHelper 没有的功能，这篇详细对比了两者的差异