Website Screenshot ·
HTML 转 PNG 还是 JPG：用真实导出文件比较
重视文字、界面边缘或透明效果时，PNG 通常值得优先尝试；能接受有损图片且实测体积合适时，可以考虑 JPG。没有一种格式总能得到最小且足够清晰的结果。下面提供同一份完整 HTML 在相同视口下实际生成的 PNG、JPG 质量 90 和 JPG 质量 60，并固定了不透明背景。
打开工具跟着操作下载与查看完整源码
下面所有导出都使用这份原创 HTML。包含内嵌 CSS、系统字体和不透明背景容器，没有外部图片或字体请求。
下载 Fieldnotes HTML展开完整 HTML
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Fieldnotes — demo page</title>
<style>
*{box-sizing:border-box}body{margin:0;background:#f6f5ef;color:#17211c;font-family:Arial,Helvetica,sans-serif}main{max-width:1120px;margin:auto;padding:38px 54px 52px}nav{display:flex;align-items:center;justify-content:space-between;font-size:14px;border-bottom:1px solid #d9ddd3;padding-bottom:28px}.brand{font-size:24px;letter-spacing:-1px;font-weight:800}.dot{display:inline-block;width:18px;height:18px;border-radius:50%;background:#365c44;margin-right:9px}.navlinks{display:flex;gap:28px}.tag{font-size:11px;font-weight:700;letter-spacing:2px;color:#526357}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;padding:65px 0 56px;align-items:center}h1{font-size:68px;line-height:1.01;letter-spacing:-4px;margin:20px 0 24px;font-weight:800}p{font-size:16px;line-height:1.65;color:#627065;max-width:350px}.cta{display:inline-block;background:#263e30;color:white;border-radius:8px;padding:16px 23px;font-size:14px;font-weight:700;margin-top:12px}.art{height:340px;background:#dce9d8;border-radius:150px 150px 20px 20px;position:relative;overflow:hidden}.circle{position:absolute;width:210px;height:210px;border-radius:50%;background:#c4d8b7;right:-35px;top:40px}.note{position:absolute;background:#fffef9;border:1px solid #e1e1d5;box-shadow:0 15px 25px #263e3012;border-radius:8px;padding:22px;left:35px;right:35px;top:65px;transform:rotate(-5deg)}.note h3{font-size:23px;margin:10px 0 20px;letter-spacing:-.5px}.line{height:7px;border-radius:3px;background:#e6e9df;margin:13px 0}.tick{background:#e7f1c4;color:#354b22;border-radius:5px;padding:10px;font-size:13px;margin-top:20px}.sticker{position:absolute;right:12px;bottom:26px;background:#e9ed99;border-radius:50%;width:96px;height:96px;display:flex;align-items:center;justify-content:center;text-align:center;transform:rotate(12deg);font-size:13px;font-weight:700}.strip{padding:22px 0;border-top:1px solid #d9ddd3;border-bottom:1px solid #d9ddd3;display:flex;justify-content:space-between;font-size:12px;color:#65705d}.section{padding-top:42px}h2{font-size:33px;letter-spacing:-1px;margin:0 0 24px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{padding:24px 20px;border:1px solid #d9ddd3;border-radius:12px;min-height:155px}.card .number{font-size:11px;letter-spacing:1px;color:#6c7a6d}.card h3{font-size:19px;letter-spacing:-.6px;margin:18px 0 10px}.card p{font-size:13px;line-height:1.5;margin:0}.footer{display:flex;justify-content:space-between;margin-top:45px;padding-top:20px;border-top:1px solid #d9ddd3;color:#71806f;font-size:11px}
@media(max-width:600px){main{padding:25px 24px 32px}.brand{font-size:21px}.navlinks{gap:15px;font-size:11px}.hero{grid-template-columns:1fr;padding:36px 0 28px;gap:28px}h1{font-size:55px;letter-spacing:-3px;margin:18px 0}.art{height:300px}.note{top:45px}.strip{font-size:10px;gap:12px}.cards{grid-template-columns:1fr}.card{min-height:130px;padding:22px}.section{padding-top:30px}h2{font-size:29px}.footer{font-size:9px;gap:10px}}
</style></head><body><div class="example-canvas" style="background:#f6f5ef;min-height:1080px"><main><nav><div class="brand"><span class="dot"></span>fieldnotes</div><div class="navlinks"><span>The notebook</span><span>Our story</span></div></nav><section class="hero"><div><span class="tag">A LITTLE SPACE TO THINK</span><h1>Good ideas<br>start here.</h1><p>A quieter home for notes, plans, and the things you don’t want to forget.</p><span class="cta">Open your notebook ↗</span></div><div class="art"><div class="circle"></div><div class="note"><span class="tag">MONDAY, IN FOCUS</span><h3>Make room for<br>what matters.</h3><div class="line"></div><div class="line" style="width:75%"></div><div class="tick">✓ One good idea at a time</div></div><div class="sticker">LESS NOISE.<br>MORE SPACE.</div></div></section><div class="strip"><span>Write freely</span><span>Find your rhythm</span><span>Keep the good stuff</span></div><section class="section"><h2>A small ritual. A clearer day.</h2><div class="cards"><div class="card"><span class="number">01 / COLLECT</span><h3>Catch the thought.</h3><p>Give your ideas somewhere to land before they disappear.</p></div><div class="card"><span class="number">02 / CONNECT</span><h3>See the bigger picture.</h3><p>Bring the pieces together, at your own pace.</p></div><div class="card"><span class="number">03 / CREATE</span><h3>Make something of it.</h3><p>Turn a blank page into your next good thing.</p></div></div></section><div class="footer"><span>Fieldnotes — fictional demo layout</span><span>Made for the Website Screenshot launch demo</span></div></main></div></body></html>
按步骤复现
- 下载共同源码，粘贴到 HTML 截图工具，清空独立 CSS 栏。
- 三次导出都使用桌面（1920 × 1080）、100% 显示缩放、原始尺寸、1000 毫秒等待，并关闭打印样式。
- 先导出 PNG，再选择 JPG 并把质量设为 90；最后只把 JPG 质量改成 60，生成第三张。
- 下载三份原始文件，以 100% 查看文字和图形边缘，并核对下表的实际字节数。
- 选型前用自己的内容重试，不要拿社交平台二次压缩后的预览图与原图比较。
实际导出与原始下载
以下文件于 2026 年 10 月 24 日通过公开工具实际生成，全部为 1920 × 1080。显示缩放为 100%，输出尺寸为原始尺寸，等待 1000 毫秒，打印样式关闭。预览会缩放，判断细节请下载原图。
| 格式 / 设置 | 字节数 | KiB |
|---|---|---|
| PNG | 130,229 | 127.2 |
| JPG · 90 | 100,659 | 98.3 |
| JPG · 60 | 61,617 | 60.2 |
这组对比固定了哪些条件
三张图都来自同一份 Fieldnotes 源码，使用 1920 × 1080 桌面视口、空额外 CSS 和原始尺寸。示例包含系统字体文字与 CSS 图形，没有照片或外部字体。
example-canvas 提供统一的不透明背景。PNG 可以记录透明，JPG 不支持；如果不先固定背景，查看器的背景差异可能被误认为压缩差异。
怎样理解实测体积
下表的字节数来自服务实际下载文件，不是估算。PNG 没有 JPG 质量参数；两张 JPG 使用 90 和 60，这些数值控制编码器，不代表保留细节的百分比。
文件更小的前提是可见效果满足用途。这个布局不能证明 JPG 永远更小，也不能证明不同编码器的同一质量数值效果相同。内容、尺寸和服务更新都可能影响结果。
适合优先尝试 PNG 的情况
文字卡片、界面评审、线条图及需要无损像素图时，PNG 是实用选择。请按最终展示尺寸检查；即便文件无损，经过缩放也可能变软。
当前 HTML 工具为 PNG 请求透明页面背景。需要固定背景色时，将颜色设置在内容容器上，像本示例一样。透明效果不会让按钮或链接保留交互能力。
值得尝试 JPG 的情况
不需要透明、能接受一定压缩时，可以尝试 JPG。用自己的内容比较多档质量，重点观察高反差文字、小字号和细线边缘，再判断较小文件是否可用。
JPG 和 JPEG 是同一种格式。改扩展名不会把 PNG 编码变成 JPEG，请通过转换器导出并检查实际文件；这里的下载是真正的 JPEG。
图片区分于文档用途
PNG 和 JPG 保存静态像素。需要分页文档时，可以考虑 PDF，并单独检查分页、打印样式与文字表现。不能假定图片输出保留可选择文字、可点击链接或无障碍文档结构。
格式对比和手机视口预设都不能替代实体设备或邮件客户端测试。先确定最终用途，再核对交付文件。
常见问题
JPG 质量 90 是无损的吗？
不是。较高质量的 JPG 仍属于有损压缩，数值控制编码器，不保证与原始像素完全相同。
JPG 能保留透明背景吗？
不能。需要透明时选择支持透明的格式，例如 PNG，并检查实际导出的文件。
PNG 一定比 JPG 大吗？
不一定。体积取决于内容、尺寸、编码器和设置，应测量真实导出并比较画质后决定。
参考与测试范围
教程基于上述真实导出。结果适用于这份输入和记录的设置，不代表所有页面的性能、尺寸或兼容性保证。