想把整个网页存成长图？懒加载、重复导航和无限滚动这三关先过了

网页长截图和普通截图的差别，在于它截的是「页面」，普通截图对准的则是「屏幕」。屏幕截图受视口限制，窗口有多高，图就有多高；长截图顺着页面往下走，把滚动条下面的内容一并收进同一张图。可真上手就会发现，很多长图截出来并不完整——图是空的、导航栏出现了三四次、页面长得没有尽头。这些都不是玄学，是页面构造和截图机制撞在了一起，先弄清原因，再动手。

网页长截图截的是整页，普通截图管的是一屏

决定长图完整度的是「视口」：浏览器展示页面的那扇窗口，而整页截图要越过这扇窗口，去拿全部纵向内容。按 Print Screen 或系统截图，拿到的就是视口里那一屏；一条商品页往下滚七八屏很常见，一屏一屏截再手动拼，既费劲又容易错位。想一次拿全，得让工具替你完成「滚到底再拼起来」这件事。Chrome 开发者工具里有官方命令「截取完整尺寸的屏幕截图」，官方文档写明它能截到「包括视口中不可见的内容」；VidBrowser 的网页长截图工具走同一条思路，把命令行操作换成了填一个网址。

长图最容易翻车的三处：空白块、重复导航、没有终点的页面

截出来的长图不完整，问题几乎都能归到这三处。每一处都是页面自身的构造在起作用，弄清了就不会误判成工具故障：

- 空白块：不少页面用懒加载，图片滚到附近才向服务器请求。截图工具从上往下扫一遍，没被触发的部分就留白。

- 重复导航：吸顶导航栏和悬浮客服按钮是「钉」在视口上的，整页拼接时每一段都可能带着它，一张长图里出现三四次。

- 没有终点的页面：社交信息流这类无限滚动页面没有底，工具不知道该在哪停；超长页面还会受图片高度、内存和输出格式的限制。

设备视口决定长图长什么样：桌面、平板、手机三档

同一个网址，换一个设备视口，截出来就是另一张图。页面会按视口宽度切换响应式排版：桌面视口是宽幅多栏，手机视口是单栏窄长。想留「电脑上看到的页面」就选桌面，想看手机用户看到的样子就选手机档。这不是画质选项，是布局选项，动手前先想清楚要哪一种。

四步把整个网页存成长图

入口就在 VidBrowser 的工具箱里，全程四步：

第 1 步：下载并安装 VidBrowser

安装入口在 VidBrowser 视频下载器页面，这是一款桌面视频浏览器，适合在 Windows 和 Mac 上观看视频、截取片段并保存到本地，内置下载与录制两大功能。

第 2 步：打开网页长截图工具

左侧导航进「工具」页，找到网页长截图入口，或直接访问网页长截图工具页。

第 3 步：输入网址并选择截图设置

填入有权截取的公开网页地址，选设备视口（桌面、平板、手机）、范围（整页或可视区域）与输出格式（PNG、JPG、WebP）。

第 4 步：生成并下载

检查生成结果，下载保存到设备。工具面向公开网页：不获取本地浏览器的登录 Cookie，也不会绕过登录、付费墙或访问限制。

三类内容最值得截成长图：对话记录、商品页和主页快照

长截图的真正价值，是把一个会变、会消失的页面，钉成一个不会变的版本。三类场景最常见：

- 客服对话与订单确认：对话页面通常没有下载按钮，长图按时间顺序留住完整往来，作为凭证比零散的单屏截图清楚得多。

- 商品页比价与存档：价格、规格、库存随时会变，长图连页面排版一起留下，回头比对有据可查。

- 主页与个人资料快照：社交主页的内容会更新、会被删除，定期截一张，变化一目了然；做网页设计参考时，整页布局截图也是现成的素材。

长图的保存与整理：格式、体积和另一条路

长图普遍又长又大，存完顺手做两件事，后面用起来省事。格式上，PNG 无损、适合文字与界面细节，JPG 体积小、适合照片多的页面，WebP 更小但老软件可能打不开，打不开就按WebP 转 JPG 那篇转一次格式；体积上，超长页面截出来几 MB 起步，传附件被拒就先压一压，画质和尺寸怎么取舍在图片压缩那篇里有完整方案。另外，如果页面里真正想要的是一批图片而不是整页版面，与其截一张巨大的长图，不如用图片批量下载把原图直接拿走——长图留全貌，批量下载拿原件，两条路各管各的。

总结

长截图的完整度，动手前就决定了：先想清楚要哪种设备视口，再看页面有没有懒加载、吸顶导航和无限滚动这三处隐患。公开网页按四步走，截完按用途选格式，体积大了先压缩。对话记录、商品页和主页快照这三类内容，一张长图就是最省事的一份底稿。

常见问题

长图里的空白块还能补上吗？

能，但要换个顺序。懒加载留白说明图片压根没被请求，先手动把页面从头到尾滚一遍，让图片都加载出来，再重新截一次。截图工具不会替页面触发加载，留白补不回来。

需要登录才能看的页面能截吗？

不能。工具面向公开网页，不获取本地浏览器的登录 Cookie，也不会越过登录、付费墙或访问限制。登录后才能看到的内容不在覆盖范围内，这属于工具边界，不是设置问题。

为什么长图上的导航栏出现了好几次？

吸顶导航和悬浮按钮钉在视口上，拼接时每一段都会带上它们。截之前看一眼页面有没有这类元素，有的话长图里出现重复属正常现象；个别页面关掉吸顶样式后重截，结果会更干净。