適應性強的視覺效果

將視覺效果上傳到您的網站後，Webflow 會產生您上傳的視覺效果的變體，以確保它們無縫適應並在任何裝置上快速載入。這可以將行動頁面載入速度提高多達 10 倍。

為了使視覺效果具有適應性，您的瀏覽器會根據頁面上的尺寸和螢幕解析度（透過合併 來源集 和 尺寸 屬性給你的 <img> 元素）。為了允許瀏覽器存取不同大小版本的視覺效果，Webflow 為每個視覺效果上傳後製作一組變體，然後為瀏覽器提供編碼指令，以確定何時提供每個變體。

至關重要的： 如果您的初始視覺效果已充分壓縮，Webflow 會採用您的原始視覺效果。

在整個網站中手動建立適應性視覺效果的指南

當您造訪網站頁面時，Webflow 會評估您的視覺效果並產生適應性變化。儘管如此，您可能會引入影響其他頁面視覺效果的修改（例如，編輯組件或 category）。為了確保所有視覺效果保持適應性，您可以導航到受影響的頁面或使用鍵盤快捷鍵 命令 + 轉移 + 我 （在 Mac 上）或 控制 + 轉移 + 我 （在 Windows 上），設計器將為您分析和重新校準所有頁面。

為 2016 年 9 月之前建立的網站產生適應性視覺效果的說明

如果您的網站是在 2016 年 9 月 14 日之前創建的，您將需要執行一個簡單的過程來在您的網站上產生適應性強的視覺效果。下次造訪設計器時，將出現一個對話方塊提示您開始遷移過程。 

此過程可能需要幾分鐘，具體取決於您網站的大小。如果您希望稍後執行此操作，您可以隨時從 資產面板 或使用鍵盤快速鍵 命令 + 轉移 + 我 （在 Mac 上）或 控制 + 轉移 + 我 （在 Windows 上）。

決定不採用適應性視覺效果

若要針對特定視覺效果停用此功能（例如，如果您希望強制瀏覽器使用原始視覺尺寸）：

1. 選擇畫布上的視覺效果
2. 使用權 設定面板 > 影像設定
3. 取消選擇 影像適應性強 檢查kbox

透過互動控制自適應視覺效果

Webflow 從其常規狀態中派生出適應性強的視覺效果，而不是懸停狀態或可能調整視覺效果大小的交互作用。嵌入懸停狀態樣式或互動後，建議在發布之前徹底檢查您的網站。

在某些情況下，您可能需要合併補充設計來涵蓋尺寸屬性對視覺元素尺寸的影響。例如，您可能必須將視覺物件的寬度指定為 100% 才能佔據其容器。 

經常問的問題

支援哪些類型的視覺效果？

此功能為所有內聯 JPG、PNG 和 WebP 視覺效果制定適應性變體，不包括透過富文本元素整合的變體。此外，它不會擴展到背景視覺效果。我們建議使用 SVG 和 PNG 來實現複雜或基於向量的視覺效果，因為它們具有無損壓縮。

每個視覺效果有幾種變化？

Webflow 產生的變化數量取決於原始視覺效果的大小。如果寬度超過 3200px，Webflow 將產生 7 種變化：3200px、2600px、2000px、1600px、1080px、800px 和 500px。

視覺效果應以什麼尺寸上傳？

您可以上傳任何尺寸的視覺效果，只要它們不超過我們的 4MB 限制。您的瀏覽器將根據設備尺寸和解析度提供最佳變體。例如，如果您上傳 4000 像素寬的原始視覺效果，但它僅在行動裝置上以 300 像素寬度顯示，則您的瀏覽器將呈現 Webflow 建立的 500 像素變體。

適應性變體是否已導出？

肯定的、適應性強的視覺效果將在導出的網站中具有 srcset 和尺寸屬性，並且變體將與原始視覺效果一起儲存在 .zip 檔案的 /images 目錄中。

在 Webflow 部落格上獲得有關自適應視覺效果的更多見解。對於有興趣深入研究適應性視覺技術的個人， 埃里克·波蒂斯 (Eric Portis) 在《A List Apart》中的文章 也可能被證明是有益的。