如何批次下載網頁上的圖片

做設計調研或者扒競品素材的時候，最煩的就是一張張去存圖片。供應商網站的 80 張產品圖、畫廊頁面裡的高清大圖，甚至是某大廠作品集……天天右鍵另存新檔，這不叫工作，這叫純純的體力活。

右鍵儲存的問題

大多數人發現自己需要批次下載圖片，往往是已經陷在重複操作裡——右鍵、另存新檔、改名，右鍵、另存新檔、改名……瀏覽器沒有內建的「選中所有圖片一起下」功能。

第三方工具有，但通常屬於兩類：只掃 <img> 標籤的輕量擴充功能（會漏掉懶載入的圖、背景圖），或者需要安裝的桌面程式（繞不開瀏覽器的登入工作階段，存取需要登入才能看的圖片會 403）。

FlowPick 的圖片下載器跑在瀏覽器裡，帶著你當前的登入態，透過監控網路請求來捕獲圖片，不侷限於 <img> 標籤。

FlowPick 能檢測到哪些圖片

不是所有圖片都藏在 <img> 標籤裡。FlowPick 透過監控瀏覽器實際發出的網路請求來捕獲圖片，覆蓋以下幾類來源：

• 標準 <img> 元素 — 最常見的那種
• <picture> 和 <source> 元素 — 帶多解析度的響應式圖片，FlowPick 選解析度最大的那個
• 懶載入圖片 — 捲動時才觸發載入的圖片，進入 DOM 後捕獲
• <video> 封面幀 — 影片的 poster 縮圖

掃描器在 DOM 的當前狀態下執行。還沒捲到的區域、還沒載入的圖片，不會出現在清單裡——這一點在操作時要注意。

檢測不到的情況：

• Canvas 渲染的圖片——不走網路請求，擴充功能感知不到
• Base64 內聯的圖片——直接嵌在 HTML 裡，不是獨立資源
• CSS background-image——可能檢測到也可能不到，取決於網站實作方式

支援的圖片格式

關於 WebP：主流瀏覽器都支援，但一些較舊的桌面軟體（2021 年以前的 Photoshop 版本、部分 Windows 程式）無法直接打開。如果你需要 JPEG 相容格式，FlowPick 支援只篩選下載 .jpg/.jpeg。

一步步操作

第一步：打開頁面，先捲完再說

打開有目標圖片的頁面。如果是懶載入的畫廊網站（大多數現代圖片站都是），先慢慢把頁面從頭捲到底，讓圖片真正載入進 DOM，再去開 FlowPick。

這一步很多人跳過，然後奇怪為什麼擴充功能裡只顯示了幾張。頁面上半部分載入了，下半部分沒捲到的圖片根本不在 DOM 裡，FlowPick 也沒辦法捕獲。

第二步：打開 FlowPick 彈窗

點擊瀏覽器工具列裡的 FlowPick 圖示。角標數字是當前頁面檢測到的媒體資源總數。

第三步：切到圖片標籤

彈窗裡點 圖片 標籤（📷），看到檢測到的圖片縮圖網格。

數量可能比你預期的多——大多數頁面除了內容圖片，還會混進 UI 元素、圖示、廣告位圖片。這就是篩選的意義所在。

第四步：篩選出你要的

按格式篩選：只勾選你需要的格式。只要 JPEG 就只勾 .jpg/.jpeg，不需要動圖就取消 .gif。

按檔案大小篩選：設定最小 KB 值是最有效的篩選方式。5 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 流的底層原理和操作步驟
• 嗅探並下載網頁音訊：Podcast、BGM、有聲書一網打盡 — 和圖片下載同一套操作邏輯，切到音訊標籤就行
• 如何下載 Bilibili 影片到本地 — B 站影片和圖片經常要一起存，這篇講影片那部分
• FlowPick 與 Video DownloadHelper 對比 — 批次圖片下載是 FlowPick 有而 Video DownloadHelper 沒有的功能，這篇詳細對比了兩者的差異