Metlivi 部落格

如何將高解析度像素藝術改編至小型顯示器且不模糊

針對小型顯示器,請避免使用平滑濾鏡縮小高解析度像素藝術,並指望每個像素細節都能保留下來。首先決定在目標尺寸下必須保持清晰可讀的內容,然後製作專屬的小螢幕版本:簡化細節、使用合適的濾鏡調整大小,並以實際顯示尺寸進行檢查。整數比例有助於保持一致的像素形狀,但無法還原較小影像無法容納的細節。

2026年10月15日閱讀時間 6 分鐘作者:Metlivi Editorial Team
第 1 節

為什麼縮小像素藝術會看起來模糊

高解析度的原始影像所包含的像素數量多於目標畫面所能顯示的數量。調整大小時必須合併或捨棄原始資訊。雙線性內插等平滑濾鏡會根據鄰近像素計算輸出色彩;這可能會使原本分明的色彩邊界變鈍。最近鄰採樣(Nearest-neighbor sampling)會選取某個來源像素並忽略其他像素,因此可以避免色彩混合,但可能會遺漏微小特徵或導致線條不均勻。Godot 的影像參考文件描述了這兩種效果,MDN 也指出瀏覽器的縮放行為取決於所選擇的轉譯模式。Godot: Image MDN: image-rendering

因此,要獲得清晰俐落的效果,並非單純選擇「不模糊」即可。它還取決於目標尺寸、美術作品中的像素形狀與間距,以及最終影像的顯示方式。請將小尺寸版本視為一種設計上的改編,而非將原始大圖進行機械式的縮小。

第 2 節

調整大小前先決定目標尺寸

以像素為單位測量美術作品將要顯示的區域,並維持來源長寬比。如果原圖為 1200 × 800 像素,而目標為 300 × 200,則各方向的縮放比例為 1:4。來源中每個 4 像素寬的區域都能工整對應到 1 個目標像素;這樣的比例相當便利,儘管在此尺寸下微小的特徵仍會消失。

若目標尺寸為 320 × 180 等規格,請先將影像調整至符合該範圍內,且不要進行拉伸。如果長寬比不同,請選擇是要裁切、加上黑邊(letterbox),還是重新編排構圖。請勿硬將影像擠壓以填滿顯示框:這會改變像素形狀,並可能使臉部、輪廓與圖案變形。不同的長寬比需要明確的構圖取捨;Godot 與 Unity 均有說明將裁切或黑邊作為處理顯示比例不符的方法。Godot: Multiple resolutions Unity: Pixel Perfect Camera reference

第 3 節

簡化無法保留的細節

建立來源檔案的複本,並在調整大小前減少細節。移除孤立的單像素高光、過細的輪廓線、極小的文字,以及在目標尺寸下會混雜成噪點的紋理色塊。強化剪影輪廓,並保持重要色彩區域分明。如果某個特徵具有特定意義(例如眼睛、符號或物體邊界),請在目標尺寸下重新繪製,而不要寄望縮小過程能完整保留它。

一個實用的檢查方法是以 100% 比例檢視目標尺寸的預覽圖,並確認每個重要特徵是否依然清晰可辨。放大檢視有助於檢查像素邊緣,但無法告訴您該作品在預期的實體尺寸下是否易於辨識。請保留完整解析度的原始大檔,以免為了單一小型顯示器進行的簡化破壞了其他用途的版本。

第 4 節

根據想要的成果選擇調整大小的方法

當美術作品必須保留嚴格的調色盤與硬邊像素區塊時,請使用最近鄰採樣(nearest-neighbor),然後仔細檢查是否有特徵遺失或線條粗細不均的情況。由於它是選取鄰近的來源像素而非混合周圍色彩,因此可以避免雙線性濾波所產生的模糊過渡。其代價是可能會捨棄大量的原始細節。Pillow: Filters

若希望較小的影像能更平滑地呈現整體原貌,可將 Lanczos 等高品質降取樣濾鏡與較簡單的區域(area)或方塊(box)縮小法進行比較。這些方法會結合來自多個來源像素的資訊,雖然能保留大致輪廓,但在銳利邊緣周圍會產生中間過渡色。Godot 將 Lanczos 描述為一種高品質選項,特別適用於縮小尺寸;Pillow 的文件則記錄了不同濾鏡的取樣方式。可以在包含對角線、細線與高對比邊緣的裁切區塊上測試候選濾鏡,然後透過檢視實際尺寸的結果來做出選擇。Godot: Image Pillow: Filters

第 5 節

在顯示設備支援時使用整數縮放

整數比例在縮放已完成的小影像以供顯示時,或者在來源尺寸能被目標尺寸整除時最為實用。此時每個來源像素都會佔用相同整數數量的輸出像素。非整數比例縮放可能會導致像素分布不均勻;Godot 的範例對比了將 640 × 360 基礎影像以 2 倍縮放至 1280 × 720,以及採用會產生不均勻像素大小的非整數縮放。Godot: Multiple resolutions

對於不符合整數比例的小型顯示器,請保持長寬比並自覺地做出取捨:保留未使用的邊框、進行些微裁切,或是針對特定排版製作專屬版本。整數縮放可能會留下黑邊或使用較少的顯示區域。它並非縮小大型原始檔案的萬靈丹,特別是當來源與目標尺寸無法整除時。

第 6 節

在實際顯示環境中檢查最終影像

匯出為目標像素尺寸,然後在實際的應用程式、瀏覽器或裝置中以預期大小檢視匯出的檔案。如果第二階段進行了平滑縮放,原本清晰的匯出影像也可能變得模糊。對於瀏覽器 canvas 繪圖,平滑化功能預設是開啟的;MDN 說明了當縮放影像需保留硬邊時,應將 imageSmoothingEnabled 關閉。CSS 的 image-rendering: pixelated 也會影響顯示的影像,但 MDN 提醒非整數的裝置像素比(device-pixel ratio)仍可能導致像素顯得不均勻。MDN: imageSmoothingEnabled MDN: Crisp pixel art look

請在實際尺寸下檢查三件事:關鍵細節是否仍可辨識、對角線與輪廓線看起來是否一致,以及影像在匯出後是否被二次拉伸或重新取樣。同時檢查目標顯示器的縮放或比例設定;瀏覽器的縮放與非整數裝置縮放皆會影響像素的均勻度。如果邊緣顯得模糊,請在再次修改美術圖之前,追查從來源到顯示的完整路徑,並找出是在何處產生了平滑化。

第 7 節

實用的決策流程

  1. 設定目標寬度與高度,並決定如何處理任何長寬比差異。
  2. 製作工作複本,並簡化無法容納在該尺寸下的細節。
  3. 匯出最近鄰版本與平滑濾鏡版本進行對比;請包含含有細緻細節與對角線的裁切區塊。
  4. 在實際顯示尺寸下檢視兩者,然後重新繪製任何消失或變得模糊不清的重要特徵。
  5. 確認應用程式或瀏覽器不會套用非預期的二次縮放,並以預期尺寸儲存最終版本。

若需要嚴格的硬邊與適當對齊的比例,請選擇最近鄰採樣;若保留大致形狀比僅維持原始調色盤色彩更為重要,請選擇平滑降取樣濾鏡。如果兩個版本看起來都不夠清晰,請在目標尺寸下直接修改美術作品或構圖框線。重新取樣可以重新分配細節,但無法將較大影像中的每個特徵都塞進更少的像素中。

第 8 節

資料來源

相關閱讀

繼續探索這個主題