Elementor圖片看起來一樣大，卻選了不同的Image Resolution，並不奇怪。這個選項和Style裡的圖片寬度不是同一件事：前者選擇可用圖片尺寸，後者影響畫面上的排版大小。前台若另外輸出srcset，瀏覽器還可能從多個候選檔選擇實際使用的圖片。
要判斷圖片是否合適，應分開看選項、畫面尺寸、currentSrc及圖片檔本身。不能只因為下拉選單選了Full，就認定所有裝置一定下載原圖；也不能只看naturalWidth，就直接把它當成檔案的編碼像素寬度。
同一張圖，先比較編輯器尺寸選項
本例在隔離本地WordPress 7.1.2、Elementor Free 4.3.3與Twenty Twenty-Five使用傳統Image，選的是同一個1800×1200測試附件。新版有Atomic Elements，本文不把不同元件的圖片控制混在一起。
在Content的Image Resolution依次選Thumbnail、Medium、Large與Full。這個附件的編輯器讀值分別是150×150、300×200、1024×683與1800×1200。Thumbnail是正方形裁切版本，和原圖的比例不同；尺寸選項不僅影響細節，也可能影響構圖。
本例Large與Full在編輯畫布的顯示寬度都約625px，並沒有因為Full檔案像素較多，就把頁面圖片撐成1800px寬。這是來源尺寸與排版尺寸分開作用的結果。正式頁面仍應核對Style、容器寬度和圖片比例，而不是只盯著來源數字。
編輯畫布沒有srcset，不代表前台也沒有
這次編輯器中的Image沒有讀到srcset與sizes，選Full時currentSrc直接使用原圖。儲存草稿後的前台則輸出多個寬度候選與sizes，瀏覽器會依那份前台HTML選擇圖片。兩者不能混為同一次量測。
WordPress官方Responsive Images說明，系統可為圖片提供srcset與sizes支援。實際有沒有輸出，仍要看使用的元件、圖片資料和網站設定。不能只因為網站是WordPress，就跳過檢查，假定每張手寫圖片都已具備同樣的候選尺寸。
所以應先儲存頁面，再重新開啟前台。若是在草稿階段，需要有相應權限才能看預覽；測量本地登入預覽與公開網站是不同情境，不要把登入頁的結果當成已確認所有匿名訪客的載入方式。
currentSrc指出瀏覽器選中的檔案
在本例1280px、DPR 1的儲存前台預覽，Image的src仍指向1800×1200原圖，但currentSrc選中1536×1024版本。圖片的實際版面盒子約645×430px。這三項數值各有用途，不能只看src的原圖網址就說瀏覽器正在使用原圖。
將預覽改為390px、DPR 1後，currentSrc改為768×512版本，版面盒子約330×220px。這是本例當下的候選選擇，不是保證所有手機都會選768px。不同DPR、sizes、版面和瀏覽器條件，可能得到其他結果。
MDN對currentSrc的說明是瀏覽器目前選中的圖片URL，它本身不證明圖片已成功載入。檢查時還應確認圖片確實有內容、載入完成，必要時查看網路回應或直接核對該檔案，不把一個非空網址當成所有條件都通過。
naturalWidth不是未校正的檔案像素
本例桌面currentSrc選中1536×1024檔，但naturalWidth讀到1280；手機選中768×512檔，naturalWidth則為390。這不表示檔案已被改成1280或390像素。直接讀取選中檔案的尺寸，仍分別是1536×1024與768×512。
MDN說明naturalWidth是以CSS像素表示、經密度校正的固有寬度。它和圖片檔內編碼的像素尺寸，可能不是相同數字。因此診斷時應把currentSrc、naturalWidth與檔案尺寸分開記錄；不要拿其中一個值代替另外兩個。
本例只測DPR 1，沒有把它說成高密度裝置的完整驗證。若網站圖片在高DPR螢幕顯得模糊，可以在自己的裝置另行測試候選選擇與清晰度，再決定來源尺寸，而不是用這組桌面數字直接推導所有裝置。
像素較少，不保證檔案較小
這張測試圖是適合壓縮的規律圖案，原始1800×1200 PNG只有13,158bytes，而1536×1024衍生PNG為53,872bytes。這個例子明確顯示：較小的像素尺寸，不必然在每一個檔案上得到較少bytes。
不能把這個特殊圖案推成「原圖永遠比較省」。不同圖片內容、格式、壓縮和衍生處理，會影響檔案大小。選尺寸時應看實際下載檔，而不是只用寬高猜載入成本，也不要在沒有量測下承諾改一個選項就一定加速。
若目的是減少下載量，可以先核對目前currentSrc對應的bytes，再評估格式、壓縮和必要尺寸。畫面品質也要一起看；只追求最小檔案，卻讓文字或產品細節模糊，未必符合頁面用途。
儲存後用同一組條件比較
比較前後時記下視窗寬度、DPR、Image Resolution、版面盒子尺寸和currentSrc。先保留同一張圖和同一版面，再改一個相關控制，結果才容易解釋。若同時換圖、改容器、改格式和字級，就不能只把變化歸因於Resolution。
也應重新載入前台後確認候選結果，不把尚未更新的編輯畫布當成正式圖片。不同瀏覽器快取或已載入候選可能影響測量方式，應清楚保存本次觀察條件，而不是先假設每次縮小視窗都會立即換成另一個檔。
最後依圖片用途判斷清晰度與載入量。Image Resolution提供尺寸選擇，Style控制呈現，瀏覽器依前台候選選檔；把三者分開核對，才能找到圖片太糊、來源過大或版面尺寸不符的真正原因。
先保留需要的構圖和細節
Thumbnail裁切後可能只剩圖片中央，這對某些縮圖很合適，卻可能切掉產品名稱、人物或重要標示。選小尺寸之前先查看實際版本，不要只因為它是清單裡最小的選項，就拿來顯示需要完整內容的圖。
若圖片包含細小文字，應在它最後顯示的大小下確認可讀性。把來源選成Full可以提供較多細節，但版面仍很窄時，文字不會因此自動容易閱讀。必要說明可放在正文，避免要求所有訪客放大圖片才知道重要資訊。
Style裡若另外固定高度或使用裁切呈現，也應和來源尺寸分開檢查。檔案本來的比例正確，不表示版面上沒有被裁切或拉伸。先核對來源版本，再看它放進容器後的比例與可見區域，才能找到構圖變掉的原因。
替代文字與圖說也要跟著圖片用途維護。換了裁切或換了素材後，舊描述可能已不符合現在可見內容；選好尺寸只是圖片交付的一部分，不能取代內容核對。
評論0