將 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 是為您的特定網站佈局產生正確像素尺寸的任何值。