標題改好了，配色也合適，課程時間和費用都已經填妥。可是看起來還是像一份範本，因為頁面上的照片放到別家網站，似乎也說得通。
給 HTML 範本換上自己的照片，往往是網頁上線前最後幾項調整之一。AI 生成的落地頁，或設計師交付的頁面，也會遇到同樣的問題。版面已經適合，照片卻還沒跟上目前的產品、服務或新一季內容。直接在原頁面換圖，就能一邊看照片，一邊看它旁邊的文字。
以虛構的 Claywell 陶藝工作坊為例，首屏要讓人想像動手做陶的情景，材質介紹則需要看清一件器物。這次把黑白靜物照換成工作檯照片，再把下方一組杯盤換成一個陶碗的示意圖。
直接在現有 HTML 網頁換圖
先用 HtmlDrag 的線上 HTML 檔案編輯器開啟原檔。使用 「上傳 HTML」 載入檔案。Claywell 的圖片、字型和樣式都已包含在檔案裡，可以直接從完整課程頁著手。
挑素材之前，先看看原頁面怎麼安排照片。Claywell 首屏並排放著陶器靜物照、黃色課程資訊卡和手捏陶的近照。更新左側照片時，標題、價格和右側近照都還在眼前，方便判斷這張新照片是否適合整個首屏。
看訪客想知道什麼，再選替換照片
陶藝課程和陶器商店都會放陶器照片，但訪客想知道的事不一樣。成品照讓人看到最後能做出什麼。工作檯上的陶土和工具，則讓人想像自己動手做陶。對第一次報名的訪客來說，這往往是首圖更值得傳達的資訊。
往下讀到「沒有完美的形狀」這個標題時，訪客看的已經是另一件事。一個陶碗比一組杯盤更容易讓人看清不規則的碗口和釉面。首圖交代活動，細節圖回答接下來的問題。
| 放在哪裡 | 適合的素材 | 要看清什麼 |
|---|---|---|
| 首屏場景圖 | 看得出活動內容，主體周圍留有空間的照片。 | 能一眼看懂活動，旁邊的標題和主要按鈕也好找。 |
| 產品或材質細節圖 | 光線清楚、主體單一、重要邊緣周圍有留白的圖片。 | 形狀、表面質感，以及文字提到的特徵。 |
| 輔助圖 | 其他角度、表面紋理或局部近照。 | 主圖沒有交代的細節。 |
選檔案時，一起考慮長寬比、主體周圍的留白，以及實際顯示時看得見多少細節。橫向照片放進窄框可能會裁掉重點。反過來，主體四周留白充足的直式照片，也可能適合較寬的圖片框。
無論自己挑圖，還是請設計師準備素材，都可以先把需求寫清楚。
這是給初學者的陶藝課程頁。首屏請選一張工作檯的場景照，材質區請選一張只呈現一個陶碗、能看清碗口的圖片。手部和碗口周圍要留些空間，方便桌機和手機畫面裁切。沿用已確認的版面與課程資訊，選用能準確呈現課程內容的圖片。
Claywell 原本在首屏放陶器靜物照，在材質區放一組餐具。看看這兩張圖和相鄰文字，就能知道各自該往哪個方向換。
在原版面更換首屏主圖
新的工作檯照片把工具、陶土和製作環境帶進首屏。旁邊的手部近照補上捏陶的細節。兩張照片放在一起，既能看到場景，也能看清人在做什麼。
在 HtmlDrag 裡，對要換的照片按右鍵，選擇 「替換圖片…」。圖片和資訊卡排得很近時，先確定選到的是那張照片。
換圖視窗提供 「本地上傳」 和 「網路圖片」。前者使用裝置裡的檔案，後者使用已放在網站上的圖片網址。這次的工作檯照片由本機上傳。
換上新圖後，看看它如何影響第一眼的感覺。照片細節多了，課程價格和主要按鈕還容易找到嗎？放回原頁面一起看，比只看相簿裡的縮圖更容易判斷。
這裡的工作檯有豐富的紋理，旁邊的黃色課程卡則很簡潔。照片經過裁切後，主體依然清楚。替自己的網頁換首圖時，也可以檢查訪客能否看懂情景、找到主要按鈕。
換一張細節圖，把重點留給主體
細節照最好能讓人專心看一個特徵。陶器可能要看碗口、釉色或表面紋理，其他產品也許是接合處、表面處理或標籤。先決定要讓訪客看見什麼，再決定畫面要多近。
Claywell 的第二張新圖，是事先準備的 AI 生成陶碗示意圖。淺色釉面和不規則輪廓，呼應材質區對器形的介紹。
這次沿用相同的換圖功能。原檔是直式構圖，桌機版的圖片框較寬。陶碗四周有足夠背景，裁成較寬的畫面時，碗口仍完整。
放大看，碗的形狀和旁邊的說明都很清楚。檢查產品或材質照片時，不妨看看圖片裡是否找得到文字提到的特徵。要是重要邊緣被切掉，先試試留白較多的原圖，或另外準備裁切版本，再考慮調整版面。
為什麼換上的圖片被裁切，或看起來模糊？
原圖有自己的長寬比，網頁也有預先安排的顯示區域。比例不同時，圖片可能會被裁切以填滿框位。像 CSS 的 object-fit: cover 就會維持原有比例，裁去超出圖片框的部分。
所以在相簿裡看起來完整的照片，放上網頁後可能只剩一部分。要保留重要細節，應該在實際版面看主體邊緣，再決定怎麼裁。硬把照片拉長或壓扁，會改變主體原本的形狀。
桌機預覽適合用平常閱讀的尺寸檢查第一眼的效果。看得出來這是什麼活動嗎？新照片能不能配合標題？主要按鈕是不是好找？
材質區的重點則是碗的形狀、表面，以及旁邊的文字是否都好讀。逐張到圖片所在的位置檢查，比看整頁縮圖更容易發現問題。
若圖片沒有被裁掉，卻看起來不清楚，先檢查原檔。把小縮圖放大填滿首屏，細節通常會不足。找一張解析度合適的原圖，匯出適合網頁的檔案，再用訪客實際看到的大小檢查。只縮小畫面上的顯示尺寸，下載的檔案並不會跟著變小。
儲存這次換圖，再看看手機版
確認兩張圖適合原版面後，可以用 「儲存版本」 留下這次修改。需要交付上線時，可在匯出視窗選取 「編輯後 HTML」，再選擇 「下載 HTML」 或 「複製 HTML」。
這次 Claywell 的兩處換圖已儲存在專案裡，日後仍可繼續編輯材質區。下次要更新日期、品項或季節照片，就有現成的版本可以接著做。
手機上也要看一次。圖片框可能變窄，輔助照片可能收起來，課程資訊也可能換位置。重點是確認主體還看得清楚。Claywell 在窄版畫面裡，仍把新的工作檯照片和黃色課程卡排在一起。
換完圖也可能發現旁邊少了一句說明。可以插入圖說介紹材質，或替產品照加上通往詳細頁面的連結。如果訪客需要比較不同課程，也可以用 HtmlDrag 插入表格，再編輯儲存格、列和欄。
調整旁邊的內容時，可以鎖定已完成的元素，減少誤移，也可以刪掉過期的活動資訊。這些改動有助於讓圖片和目前的課程內容一致。
頁面準備交付時，可以用下面幾點快速確認。
- 要更新的圖片都已更換，主體依然清楚。
- 桌機和手機上都看得到訪客需要的細節。
- 圖片已按網頁需求處理，實際顯示大小下也清楚。
- 圖說、替代文字和來源署名都符合新素材。
- 帶連結的圖片指向正確的頁面。
- 專案版本和交付發布的 HTML 都包含這次更新。
圖片主體換了，替代文字也要跟著看。Google 的圖片搜尋指南建議，替代文字應配合頁面內容，說明這張圖為什麼出現在這裡。具體說明圖中的主體，比堆疊關鍵字更有幫助。
更換 HTML 網頁圖片的常見問題
AI 生成的 HTML 網頁也可以換圖嗎？
可以，只要 HTML 檔案能在編輯器正常開啟。確認樣式和素材都已載入，再選取原圖進行替換。新圖已經準備好，就可以直接換上，省去再次請 AI 生成圖片的步驟。
該上傳本機檔案，還是貼上線上圖片網址？
裝置裡有已確認的檔案，就直接上傳。圖片已放在可長期存取的位置，也可以貼上線上圖片網址。請貼上能直接開啟圖片檔的網址。如果手上只有圖庫頁或登入頁的網址，先找到圖片檔本身的連結。
直式照片可以放進橫向圖片框嗎？
可以先看主體周圍留了多少空間。像本例的陶碗，背景夠寬裕，放進橫框後仍能看清楚。若原圖的邊緣就貼著主體，先放進實際的圖片框試試，再用手機尺寸確認。
換圖時，圖說和連結會一起更新嗎？
圖片、圖說、來源署名和連結目的地需要分別檢查。換圖後讀一遍周圍的文字，也點一下圖片連結，確認說的是新圖，開啟的也是正確頁面。
替換網頁圖片時，檔案要準備多大？
解析度要能支援實際顯示尺寸，檔案大小則要適合網頁載入。首屏大圖通常需要比小卡片保留更多細節。看過實際畫面，再比對目前的上傳限制，不必每個位置都用同一種規格。
儲存換圖結果後，公開網站會直接更新嗎？
儲存會把結果留在 HtmlDrag 專案裡。若網站另外架設，請把編輯後的 HTML 交給該網站原本的發布流程。
一張工作檯照片讓人想到動手做陶，一個陶碗讓人看清器物細節。如果現有的 HTML 範本還放著示意照片或舊圖，可以用視覺化 HTML 編輯器開啟原檔，把舊圖換成適合原位置的新圖片。