如何下载背景图片和懒加载图片

为什么这些图片很难保存

背景图片

很多首屏横幅、卡片和图库不使用图片元素，而是把图片作为背景写在页面的样式表中。右键点击时只会出现普通的页面菜单，没有“图片另存为”。图片确实存在，但只有样式才知道它的地址。

懒加载图片

为了加快加载速度，页面通常要等你滚动到图片附近时才会获取它。在此之前，真实地址保存在 data-src 这样的属性中，页面上显示的是空白或模糊的占位图。无限滚动的页面更进一步，只有滚动到底部时才会添加新图片。

用 IDM - Bulk Download Manager Extension 下载

1. 滚动浏览页面

   慢慢滚动到底部，或按几次 End 并稍等片刻，让懒加载图片和新内容加载出来。

2. 打开弹出窗口

   点击 IDM 图标。如果窗口已经打开，请点击顶部的“重新扫描”重新读取页面。

3. 必要时调低尺寸筛选

   小的装饰性背景可能会被最小尺寸隐藏。选择“任意尺寸”可查看全部内容。尚不知道尺寸的图片始终会显示。

4. 选择并下载

   将鼠标悬停在缩略图上查看名称和大小，选择想要的图片，然后点击“下载所选”；想要单个文件就点击 ZIP。

它会在哪里查找

• 样式：背景图片、边框图片和列表项目符号，来自样式表和内联样式。
• 懒加载属性：data-src、data-lazy-src、data-original、data-bg、data-srcset 以及其他常见变体。
• 响应式图片：srcset 和 <picture> 来源中列出的每种尺寸，方便你选择最大的。
• 脚本加载的图片：页面用脚本获取的图片，取自浏览器的已加载文件列表。
• 页面上的所有位置：嵌入框架、开放模式的 Web 组件和视频预览图。

它找不到什么

• 在 <canvas> 上绘制的图片，例如某些查看器和游戏中的图片。它们是屏幕上的像素，不是文件。
• 页面保存在自身内存中的图片（blob: 地址）。它们只存在于该标签页内，无法从外部下载。
• 通过 ::before 和 ::after 装饰添加的背景。
• 页面已经移除的图片。有些很长的信息流会在滚动时丢弃较早的图片。可以先滚动一部分，下载后再继续。

不用扩展程序：开发者工具

Chrome 的开发者工具可以找到任何图片，但一次只能处理一张：

1. 在图片附近右键点击，选择检查。
2. 在“样式”面板中，查看所选元素或其父元素上的 background-image: url(…)。对于懒加载图片，查看图片元素上的 data-src。
3. 右键点击地址，在新标签页中打开，然后使用“图片另存为”。

或者，打开网络面板，选择 Img（图片）筛选器并滚动页面：加载的每张图片都会列出来，你可以逐个打开。这两种方法都可行，但每张图片要花几分钟。

常见问题