含图片的HTML生成PDF体积远超原图的原因及优化方法

编辑说明 #

此前Chromium出现的异常是由一个Bug导致的，目前该Bug已修复。感谢所有协助排查问题的人士！

问题详情 #

有一张大小约1.6MB的图片，将其嵌入如下HTML文件后，通过Chromium打印生成的PDF文件体积达5.3MB，远大于原图体积，请问原因是什么？该如何优化？

示例HTML代码 #

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Example</title>
        <style>
            body {
                position: relative;
                width: 148mm;
                height: 210mm;
                margin: 0;
                display: flex;
                flex-direction: column;
                font-family: "Times New Roman", Times, serif;
                border: 1px dashed black;
                user-select: none;
            }
            div.textarea {
                position: relative;
                flex-grow: 1;
                margin: 12mm 15mm 20mm 15mm;
            }
            img {
                width: 100%;
            }
            @media print {
                @page {
                    size: A5;
                    margin: 0;
                }
            }
        </style>
    </head>
    <body>
        <div class="textarea odd">
            <img src="https://cdn.wallpapersafari.com/21/63/kGOzq7.jpg" />
        </div>
    </body>
</html>

原因分析 #

• 图片重新编码：Chromium生成PDF时不会直接嵌入原图，会对图片进行重新编码。哪怕原图是JPG，也可能因使用更高压缩参数、格式转换（如适配打印色彩空间）导致体积膨胀。
• PDF结构开销：PDF本身包含元数据、字体子集嵌入、页面布局信息等额外内容，这些都会增加文件体积。
• 渲染精度适配：为匹配PDF默认的300DPI打印精度，Chromium会对图片重采样或调整尺寸，确保打印清晰度，这也会让体积变大。

优化方案 #

• 预优化图片：
  • 提前将图片压缩到与PDF页面匹配的分辨率（比如A5页面300DPI对应宽度约1754像素，无需更高分辨率）。
  • 用图片工具（如ImageOptim、Squoosh）压缩JPG至视觉可接受的质量后再嵌入HTML。
• 调整Chromium打印设置：
  • 打印时进入“更多设置”，将分辨率调整为合适值（如150DPI，非高精度打印场景适用）。
  • 关闭“背景图形”等不必要选项，减少冗余渲染内容。
• 命令行参数控制：
  • 用Chromium命令行生成PDF时，添加--print-to-pdf-quality=75参数（数值0-100，75为质量与体积的平衡点），示例命令：

    chromium --headless --print-to-pdf=output.pdf --print-to-pdf-quality=75 your-file.html
    

• 后期压缩PDF：
  • 生成PDF后用工具（如Ghostscript、PDFsam Basic）压缩，例如Ghostscript命令：

    gs -sDEVICE=pdfwrite -dPDFSETTINGS=/ebook -o compressed.pdf input.pdf
    

    /ebook参数会平衡质量与体积，适合多数场景。

内容的提问来源于stack exchange，提问作者Barock