圖片

圖片元素是可以插入到畫布上的圖像佔位符，與其他元素分開。請記住，圖片元素與應用於節或 div 塊等元素的背景圖像不同。

在本教程中，您將發現：

1. 插入圖片的方法
2. 調整圖片設定的技巧
3. 替換圖片的步驟
4. 設定圖片樣式的方法
5. 包含替代文字的說明

如何插入圖片

您可以將圖片插入您的 Webflow 網站：

• 插入面板
• 資源面板
• 快速搜尋
• 你的裝置

筆記： 圖片的最大檔案大小為 4MB。

有價值的資訊： 當您將圖片上傳到「資源」面板時，Webflow 會產生圖片的響應式變體。儘管如此，建議您在上傳到 Webflow 之前優化您的圖片。了解有關圖片解析度的更多資訊。

了解網路上最常見的圖片檔案格式。

插入面板

若要從「插入」面板插入圖片元素：

1. 導航至 插入面板
2. 點擊並拖曳 圖片 元素到 Webflow 畫布上

要將佔位符替換為您的圖片檔案之一：

1. 選擇 圖片 畫布上的元素
2. 參觀 元素設定面板
3. 選擇 選擇圖片
4. 選擇之前上傳的圖片或點擊“雲” 圖示上傳新圖片 資源面板

資源面板

將照片上傳至 資源面板，您可以將圖片拖曳到畫布上。

您可以透過 3 種方式將圖片上傳到資源面板：

1. 點擊 ”雲” 中的圖標 資源面板 然後從您的裝置中選擇要上傳的圖片
2. 將圖片從您的裝置拖放到 資源面板
3. 將圖片直接拖放到畫布上

了解有關如何將圖片插入資源面板的更多資訊。

快速搜尋

快速搜尋是 Webflow Designer 中整合的強大搜尋欄。您可以使用以下命令啟動快速搜索 命令 + 乙 （在 Mac 上）或 控制 + 乙 （在 Windows 上）並按名稱搜尋您上傳到「資源」面板的所有圖片。

你的裝置

您可以將圖片直接從裝置拖曳到畫布上。

如何解決圖片上傳問題

如果您在嘗試上傳圖片時收到「上傳失敗」警報，請檢查以下各項：

• 圖片檔案：確保圖片檔案未損壞，具有正確且受支援的檔案副檔名，且不大於 4MB
• 檢查您的網路連接：即使網路連線速度較慢（至少 5 mbps），您也應該能夠上傳圖片。為確保網路速度不成問題，請仔細檢查您的網路連線並確認訊號強度。了解如何解決您的網路連線問題。
• 檢查您的瀏覽器擴充：將圖片上傳到 Webflow Designer 時，某些瀏覽器擴充功能可能會導致問題。嘗試從隱身或私密瀏覽視窗上傳圖片，或了解如何對瀏覽器擴充功能進行故障排除。

如何調整圖片設定

要存取圖像設置，有四種方法可用。首先，選擇畫布上的圖像組件，然後：

1. 雙擊影像組件
2. 打 進入/返回 鍵盤上的鍵
3. 點擊位於圖像組件標籤旁的類似“齒輪”的圖標
4. 按 D 或導航至 元素設定面板

之內 影像設定，您有能力：

• 選擇影像 — 將預設佔位符替換為 資產面板。只需雙擊圖像組件並選擇 選擇圖片 來自 影像設定 窗戶
• 調整影像尺寸 — 指定影像寬度或高度的特定像素值。這些尺寸將應用於所有斷點，但寬度和高度的單獨設定可以覆蓋 元素設定面板 對於每個斷點。您也可以選擇拖曳圖像的角落來調整圖像的大小。注意調整圖片大小不會超過其父元素的尺寸
• 啟用影像的 HiDPI 模式 — 選取此方塊後，影像的像素寬度將減半。例如，寬度為 600 像素的影像將以 300 像素顯示。此像素密度可確保大多數 HiDPI 行動顯示器上的最佳影像質量
• 指定載入行為— 修改映像載入首選項。 「延遲」加載在頁面加載時加載可見折疊上方的圖像，並在用戶滾動到它們時加載折疊下方的圖像，「急切」加載在網站加載期間立即加載頁面上的所有圖像，「自動」加載根據瀏覽器的設定

替換圖片內容

將圖像插入畫布後，您可以在必要時靈活地替換它。要交換影像：

1. 在畫布上突出顯示圖像
2. 導航至 元素設定面板 > 影像設定
3. 選擇 替換圖片 打開 資產面板
4. 選擇現有圖像或上傳新圖像

提升影像美感

利用 風格面板 以增強影像的視覺吸引力。請注意，某些樣式屬性不適用於影像，例如背景樣式。對於影像的疊加效果，請考慮使用背景影像。

利用類別來風格化影像，這可以優化時間效率，因為您可以將一個類別應用於多個影像。套用於該類別的任何樣式都會影響與其關聯的所有圖像。當透過以下方式建立尺寸規格時，該方法被證明特別有利 風格面板 而不是 元素設定面板。透過利用類，您可以無需手動調整每個影像的大小。

以下是一些樣式屬性範例，您可以利用這些屬性為圖像添加風格： 

• 角落半徑： 在一側或多側實現圓角。若要定義半徑，請訪問 風格面板 > 邊框 > 半徑.
• 投影： 建立陰影效果以增強影像的外觀。要設定陰影，請訪問 風格面板 > 效果 > 盒子陰影.
• 過濾器： 應用各種濾鏡，例如模糊、灰階或棕褐色調。若要新增過濾器，請導航至 風格面板 > 效果 > 過濾器.

新增替代文本

描述性文字是對隱藏在圖像「內部」的圖像的簡潔描述（這意味著它在網站頁面上不可見，與標題不同），當圖像無法顯示或查看時解釋該圖像。這有助於有視覺障礙或失明的人理解您的圖像內容，或在圖像檔案尚未載入或使用者選擇不查看圖像時代替圖像呈現。搜尋引擎利用替代文字來辨識圖像的內容。

要將替代文字引入圖像：

1. 選擇畫布上的圖片
2. 訪問 元素設定面板 > 影像設定
3. 繼續 替代文字 並選擇 自訂描述
4. 在下拉式選單下方的空間中建立替代文本

如果圖像只是裝飾性的（即，它不提供有價值的資訊），您也可以選擇 裝飾性的 從替代文字下拉清單中。

您也可以在中指定替代文本 資產面板 這樣，每次您從「資源」面板將圖像附加到網站時，該圖像都會配備替代文字。

實現動態替代文本

您可以在動態集合清單和集合範本頁面上使用圖片元素。了解有關圖像欄位的更多詳細資訊。

若要為這些圖像配置動態替代文字：

1. 選擇 影像
2. 導航至 元素設定面板 > 影像設定
3. 核實 從以下位置取得替代文本
4. 選擇包含圖像替代文字的部分（例如“名稱”）