网页整页截图：把任意网页保存成图片的方法

最后更新：2026 年 9 月 13 日。下文的测量数据来自用无头 Chromium 151 加载的公开维基百科文章。

截图快捷键只能截下显示器里装得下的部分。可网页通常比屏幕长得多，在手机上会换一种排版，而且有些图片要等你滚动到附近才会加载。网页截图不理想，几乎都能用这三点解释：截到第一屏就断了，“手机版”其实还是桌面版，或者下半部分全是灰色占位框。

快速回答：怎样截取整个网页？

已登录的页面用浏览器自带的整页截图，想按特定设备宽度截取公开页面时用在线的网页转图片工具。在 Firefox 中，右键点击页面，选择“截图”，再点“保存整个页面”。在 Chrome 中，打开开发者工具，调出命令菜单，选择“Capture full size screenshot”。

公开页面的话，把地址粘贴到网页转图片，选择桌面、平板或手机宽度，再打开整页选项。分享之前，把生成的图片从头到尾看一遍：检查靠下的图片、排版宽度，以及页面在哪里结束。

哪种截图方式适合你的需求？

• 登录后内容会变的页面，选浏览器自带功能。
• 需要首次访问者看到的样子，或想在电脑上截手机宽度，选在线工具。
• 只有数量多到值得维护脚本时，才选脚本。

Chrome 官方的开发者工具截图技巧还介绍了区域截图和单个元素截图，只需要页面某一部分时很方便。Mozilla 也在 Firefox 截图说明中讲解了保存整个页面的方法。

“第一屏”和“整页”到底截下了什么？

第一屏截图正好是一个视口：常见的桌面设置下是 1280×800 像素。整页截图会把整个可滚动的文档渲染成一张很长的图片。两者的差距比大多数人想象的大得多。

我们在 1280 像素宽度下测量了维基百科的“Cat”词条：它的滚动高度是 42,077 像素，相当于 52 个以上的第一屏叠在一起。我们的工具把整页截图限制在 12,000 像素以内，因为这么长的图片已经很难查看和分享，而无限滚动的页面否则永远截不完。需要更长的页面时，请分段截取。

高度也会影响格式。WebP 无法保存宽或高超过 16,383 像素的图片，所以特别长的截图可能用 PNG、JPG 能保存，用 WebP 却会失败。

网页截图应该用哪种格式？

以文字和界面为主的页面选 PNG，要在网上分享选 WebP，只有目标平台两者都不收时才用 JPG。我们把图片很多的“Cat”词条截成 1280×12,000 像素，再把同一张图保存成三种格式：

以大块纯色文字和界面为主的页面，用 PNG 保存通常比这个图片很多的页面小得多，所以界面截图至今仍以 PNG 为默认。JPEG 为什么会把小字弄糊，请看截图格式指南；各格式的取舍，WebP、JPEG 与 PNG 对比讲得更深入。想在不改格式的前提下压小截图，可以用图片压缩工具。

为什么整页截图里的图片会缺失？

如今很多网页都对图片做了懒加载：浏览器只在你滚动到附近时才去加载每张图片。整页截图并不会滚动，所以截图那一刻，靠下的图片可能还是空框。MDN 的懒加载介绍解释了背后的浏览器机制。

我们的测试把这个影响量化了。“Cat”词条的 58 张图片中有 55 张设置了懒加载。直接截图时，前两屏以下的 45 张图片里有 44 张还是空的。把页面滚动到底再回到顶部后，一张空的都没有。

• 用开发者工具或 Firefox 截图前，先滚动到底部再回来。
• 滚动后等一两秒，让最后几张图片下载完。
• 检查成品时先看最下面三分之一，缺图通常出现在那里。

我们的网页转图片工具在测出上面这些数据后做了改进，现在整页截图时会自动完成这一遍滚动。

为什么手机截图显示的是桌面版网站？

窄窗口不等于手机。很多网站决定发送哪种排版时，看的是浏览器的用户代理字符串，而不是窗口宽度。MDN 介绍了这种基于用户代理的判断，以及它为什么至今仍很常见。

我们用 390 像素宽的视口把维基百科的“Screenshot”词条加载了两次。使用桌面用户代理时，网站把桌面版排版硬塞进窄窗口，页面高 7,544 像素。使用手机用户代理时，网站发送了真正的移动版页面，高 2,299 像素。

所以，把桌面浏览器拉窄，几乎看不出手机用户实际看到的样子。Chrome 的设备模式会同时切换宽度和用户代理，我们工具的手机和平板选项也是如此。

为什么在线工具截不了 localhost、内网或登录后的页面？

在线截图工具是在自己的服务器上、用一个没有任何 Cookie 的全新浏览器加载页面。它看不到你保存的登录状态，所以需要登录的页面只会截到登录界面。

它还会拒绝 localhost、192.168.x.x 或公司内网这类私有网络地址。让匿名访问者驱使服务器去请求任意地址，是一种广为人知的漏洞，叫服务器端请求伪造（SSRF），OWASP 的 SSRF 说明对此有详细描述。靠谱的工具不只检查你输入的地址，还会检查页面发起的每一个连接，包括跳转。

这类页面请用你自己浏览器的整页截图。它在你的电脑上、你的会话里运行，看到的就是你看到的。

网页截图常见问题排查

挡住内容的提示条或固定导航栏，事后去掉比重新截图更省事：用图片裁剪工具裁掉即可。

分享截图前的检查清单

1. 确认宽度与目标设备一致。
2. 检查最下面三分之一有没有空图。
3. 确认页面在预期的位置结束。
4. 看看有没有提示条挡住关键内容。
5. 删掉首次访问者看不到的隐私信息。
6. 文字多的页面保留 PNG 格式。
7. 记下截图日期，方便日后查证。

网页一直在变。截图用作证据、设计参考或问题反馈时，截图日期也是它记录的一部分。

常见问题

需要登录的页面能截图吗？

在线工具无法访问你的账号，所以不行；请在登录状态下用浏览器自带的整页截图。

为什么我的整页截图被截断了？

很多工具都限制了高度，我们的上限是 12,000 像素；而滚动时不断加载新内容的页面本来就没有尽头。

网页转图片和网站截图是一回事吗？

日常使用中基本一样：两者都是在浏览器里渲染页面，再把结果保存为图片文件。

手机版截图应该选多宽？

选 390 像素，这是许多新款 iPhone 的 CSS 宽度，并配合手机用户代理，网站才会发送真正的移动版排版。

为什么有些图片显示为空白方框？

这些图片是懒加载的，截图时还没被请求；截图前先滚动页面，或使用会自动滚动的工具。

能只截网页的某一部分吗？

可以；Chrome 开发者工具可以截取单个元素，也可以先截整页再裁出需要的部分。

在线工具会保留页面的副本吗？

它会在临时浏览器里加载页面来生成图片；结果保存多久，请查看各工具的隐私说明。