将 PDF 页面转换为网站的图像需要特定的像素尺寸，而不是通用的 DPI 设置。以 300 DPI 转换的 PDF 页面会生成数千像素宽的图像，远远大于任何网站布局可以显示的图像。将该图像上传到网站会浪费带宽并减慢页面加载速度。按照网站布局所需的精确像素尺寸进行转换，可以生成快速加载并清晰显示的图像。用于 Web 使用的PDF 到图像 转换是将输出尺寸与图像在页面上占据的特定位置相匹配。
要点
网站图像尺寸以像素为单位，而不是英寸。要将 PDF 页面转换为正确的像素大小，请确定网站上图像的最大显示宽度，然后将转换输出设置为该宽度，同时保持页面的纵横比。标准网站内容宽度范围从针对移动优化布局的 720 像素到针对全宽桌面布局的 1920 像素。在这些特定尺寸上进行转换产生的图像既不是不必要的大，也不是令人失望的模糊。
确定您的网站所需的确切像素尺寸
对于使用具有自动图像调整大小功能的内容管理系统的网站，请以高于显示尺寸的分辨率进行转换，并让 CMS 处理调整大小。从一次上传生成多个尺寸的 CMS 需要足够大的源图像来支持最大生成尺寸。以 CMS 生成的最大大小的两倍进行转换可确保所有生成的变体都是清晰的。
对于响应式网站，图像显示宽度在不同的屏幕尺寸下会发生变化。以图像出现的最大宽度进行转换，这通常是内容图像的 1200 到 1400 像素的桌面断点。浏览器可以有效地缩小图像以适应较小的屏幕。较大转换带来的额外文件大小将提供给所有用户，包括将看到缩小版本的移动用户。对于带宽敏感的实现，请使用响应式图像标记在不同的断点处提供不同的图像大小。
测量网站内容区域的宽度（以像素为单位）。在浏览器中打开网站，右键单击内容区域，然后选择“检查”以打开开发人员工具。计算出的内容容器宽度显示在盒模型图中。这是图像应有的最大宽度。如果您的网站具有响应能力并适应不同的屏幕尺寸，请选择最宽的断点，通常是宽度为 1200 到 1400 像素的桌面布局。此宽度的图像在桌面上看起来会很清晰，但在平板电脑和手机上会按比例缩小。
对于图片库和灯箱，以更高分辨率进行转换以支持全屏查看。在网格布局中以 400 像素宽显示的图库图像在单击进行全屏查看时可能需要扩展到 1600 像素宽。以全屏显示尺寸进行转换，确保放大后的图像清晰。网格视图加载缩小版本，浏览器可以很好地处理。以图库显示尺寸进行转换并为全屏查看提供相同的图像会导致模糊的放大。考虑您网站的最大显示场景，而不仅仅是默认视图。
以精确像素尺寸转换 PDF 页面
对于同时包含文本和图像的 PDF 页面，以 2 倍显示宽度进行转换可在高 DPI 屏幕上保留文本清晰度。以 1 倍显示宽度渲染的文本在 Retina 显示屏上看起来可能会稍微柔和，因为字体的精细笔画受益于额外的像素密度。 2 倍转换大约使文件大小增加了一倍，这对于优先考虑文本可读性的文档页面来说是值得的权衡。对于主要是照片的页面，1 倍转换就足够了，因为眼睛对照片内容的分辨率差异不太敏感。
打开 PDF 到图像转换工具并查找输出尺寸设置。有些工具使用像素尺寸，例如 1200 像素宽。其他人则将 DPI 与物理页面大小结合使用。如果该工具使用 DPI，则通过将目标像素宽度除以页面宽度（以英寸为单位）来计算所需的 DPI。 Letter 尺寸的页面宽 8.5 英寸。要生成 1200 像素宽的图像，请将 DPI 设置为 1200 除以 8.5，大约等于 141 DPI。输入 141 DPI 可生成网站所需的精确 1200 像素宽度。
对于将图像嵌入文章或博客文章中的数字出版，请以 2 倍显示宽度进行转换，以支持高 DPI Retina 和类似显示器。显示 800 像素宽图像的内容区域需要 1600 像素宽的源图像。浏览器将 2 倍图像提供给高 DPI 屏幕，并将其缩小到 800 像素显示区域，从而生成比 800 像素源图像更清晰的文本和图形。 2 倍转换使文件大小加倍，但在现代屏幕上产生明显更好的质量。 WukongPDF 的 PDF 到图像转换器接受像素宽度作为直接输入，因此您输入目标宽度，该工具会自动计算相应的 DPI。
选择正确的网站交付图像格式
| 格式 | 最适合 | 压缩 | 注释 |
|---|---|---|---|
| 巴布亚新几内亚 | 文字、图表、线条艺术 | 无损 | 更大的文件，清晰的文本，支持透明度 |
| JPEG | 照片、扫描页 | 有损 | 文件较小，逼真，无透明度 |
| 网络P | 现代网站，所有内容 | 两个都 | 最佳压缩，非常旧的浏览器不支持 |
| AVIF | 尖端的网络性能 | 两个都 | 文件最小，PDF 转换工具支持有限 |
对于大多数 PDF 到网站的转换，WebP 提供了质量和文件大小的最佳平衡。典型文档页面的 1200 像素宽 WebP 图像比同等的 PNG 小 40% 到 60%，同时保持视觉上相同的质量。如果您的网站不支持 WebP，则对于包含文本的文档页面，PNG 是次佳选择；对于包含照片的页面，次佳选择是 85% 到 90% 质量的 JPEG。
批量转换网站图库的多页 PDF
对于具有数百页的非常大的 PDF，请将批量转换分成 50 页的组。某些转换工具具有内存限制，这会导致非常大的批次失败。较小组中的处理需要相同的总时间，但避免了第 400 页第 347 页转换失败而需要重新启动整个批次的麻烦。
对于将成为网站图片库的多页 PDF，请在一次批量操作中将所有页面转换为相同的像素尺寸。该批次生成大小一致的图像，在图库布局中均匀显示。使用一致的命名约定（包括页码）命名输出文件，例如 document-page-01.webp、document-page-02.webp 等。此命名约定可以轻松地与图库插件和需要按顺序编号的图像文件的自定义 JavaScript 集成。
转换后，通过图像优化工具运行图像，以进一步减小文件大小，而不会造成明显的质量损失。 ImageOptim、TinyPNG 和 Squoosh 等工具应用了 PDF 转换器可能未应用的附加压缩。第二次压缩可将 PNG 和 JPEG 文件的文件大小额外减少 20% 到 40%。对于包含 50 个文档页面的图库，累积的带宽节省对于网站的托管成本和访问者的页面加载时间都很有意义。
常见问题
我应该将 PDF 页面转换为 sRGB 色彩空间中的图像以供 Web 使用吗？是的。大多数网站图像应采用 sRGB 色彩空间，因为它是 Web 浏览器的标准色彩空间。转换为 sRGB 可确保在不同浏览器和操作系统上保持一致的颜色外观。如果 PDF 使用 CMYK 或 Adobe RGB 色彩空间，则转换为 sRGB 可能会导致轻微的色彩偏移。发布前在浏览器中预览转换后的图像，以确认颜色可接受。
如果我的网站是响应式的并且图像显示宽度随屏幕尺寸变化怎么办？
以图像出现的最大显示宽度（通常是桌面断点）进行转换。浏览器会自动缩小图像以适应较小的屏幕。在手机上以 400 像素显示的 1200 像素宽的图像看起来很清晰，因为它是按比例缩小的，而不是放大的。桌面优化转换产生的额外文件大小将提供给所有用户，这是支持全分辨率范围的权衡。对于带宽敏感的实现，请使用响应式图像标记，在不同的断点处提供不同的图像大小。
我可以将 PDF 页面转换为透明背景的图像吗？
仅当 PDF 页面本身没有背景时。大多数 PDF 页面都有明确的白色背景，该背景会转换为图像中的白色背景。要生成具有透明背景的图像，请在转换之前从 PDF 中删除页面背景。这需要一个可以从页面内容流中删除背景对象的 PDF 编辑器。生成的 PDF 页面将具有透明背景，将其转换为 PNG 将保留透明度。
我是否应该按照通常建议的那样将 PDF 页面转换为 72 DPI 的图像以供网络使用？
72 DPI 建议已经过时。它起源于大多数计算机显示器的物理像素密度约为每英寸 72 像素。现代显示器的像素密度为每英寸 100 到 200 或更多像素。以 72 DPI 转换 PDF 页面并在现代显示器上以 100% 缩放显示它会产生明显柔和的图像。使用上述像素尺寸方法而不是固定 DPI。正确的 DPI 是为您的特定网站布局产生正确像素尺寸的任何值。