影像品質

圖片品質表示基於像素的圖像的尺寸。高影像品質意味著影像將顯得銳利或清晰。相反，低影像品質意味著影像看起來很差或有顆粒感。

大多數由相機拍攝或由視覺藝術家製作的圖像都以高品質保存，如下圖所示。

合適的尺寸

如果您希望影像填滿螢幕的整個寬度，請先確保影像尺寸準確。

圖片尺寸不夠

質量為 200 x 150 的圖片將適合寬度為 100 像素、高度為 75 像素的空間。但是，如果拉伸覆蓋寬度為 800 像素、高度為 600 像素的螢幕，則會顯得模糊且像素化。在這種情況下，品質將不夠。

圖片尺寸過大

當縮小到覆蓋 800 x 600 螢幕時，品質為 57600 x 38400 的圖片看起來是可以接受的。相反，品質低得多的圖像（例如，1000 x 800）將是合適的並且沒有過多的數據。品質過大的圖片效果不佳，需要更長的上傳和/或下載時間。這也會降低您的網頁速度。

圖片品質指南

在將圖片新增至網站之前，請確保：

• 選擇合適的圖片格式
• 增強您的照片

最適合上傳的圖片檔案類型是 PNG、JPEG、SVG 和 WebP。 了解有關網絡上最常見的圖片文件類型的更多信息.

在 Webflow 使用圖片

您可以使用兩種方法將圖片合併到您的 Webflow 網站： 

• 作為嵌入圖像
• 作為背景圖片

嵌入影像

當您的網站中包含嵌入圖像時，Webflow 將自動增強並創建該圖像的不同品質的各種版本。

當用戶打開包含嵌入圖像的頁面時，瀏覽器將根據該用戶的螢幕品質提供最佳的圖像。 探索有關響應式圖像的更多信息. 

背景圖片

在零件或容器等元素上設定背景影像時，將套用原始影像。 Webflow 不會為背景影像建立回應版本。這意味著您應該上傳具有適當品質的增強影像。

增強圖片效果的最佳技術是規劃常規、實用的展示，並考慮網站的受眾。

例如，15 吋 MacBook Pro 的解析度為 2880 x 1800。在更大的顯示器上，圖像可以放大並且看起來仍然令人印象深刻。

然而，行動裝置上的網站使用者將下載在較大斷點上使用的相同大背景圖像，這並不理想。您可以上傳背景圖像的變體，並向每個斷點引入新的背景圖像版本。這可以優化您的背景圖像以獲得更寬或更窄的斷點。

修改圖片壓縮

您可以使用 Photoshop 等圖片編輯器來修改圖片格式的品質。圖片編輯器可以壓縮圖片並減小檔案大小。