你的移動(dòng)網(wǎng)頁明明UI設(shè)計(jì)精美，但在真機(jī)上打開，要么首屏圖片加載超過3秒用戶直接劃走，要么文字清晰圖片卻一片模糊，要么一個(gè)banner占了半屏流量。這些問題的根源幾乎不在設(shè)計(jì)稿，而在你落地圖片時(shí)，尺寸和格式的選擇沒有照顧到移動(dòng)端的物理特性。
移動(dòng)端的圖片場(chǎng)景遠(yuǎn)比PC端復(fù)雜：屏幕物理寬度從320px到428px不等，設(shè)備像素比（DPR，Device Pixel Ratio）從1到3甚至更高，網(wǎng)絡(luò)條件在Wi-Fi和弱信號(hào)4G之間搖擺，用戶每一次滾動(dòng)都在考驗(yàn)圖片加載的優(yōu)先級(jí)和資源體積。如果你還沿用一張2000px寬度的JPEG全屏圖，用<img>的width="100%"粗暴縮放，等于讓2G網(wǎng)絡(luò)用戶下載一張毫無意義的印刷級(jí)大圖。
本文將把手機(jī)網(wǎng)站圖片的選型拆解為三個(gè)決策節(jié)點(diǎn)：你要展示的圖形類型決定了尺寸的計(jì)算邏輯，載入環(huán)境決定了格式的最佳選項(xiàng)，而前端代碼決定了瀏覽器最終接收哪一份資源。每一個(gè)節(jié)點(diǎn)都有可驗(yàn)證的約束條件和具體的實(shí)施步驟。
先定尺寸，再談清晰度：移動(dòng)端圖片尺寸的三種計(jì)算模式
移動(dòng)端寫圖片尺寸，不能像PC端那樣只給一個(gè)固定像素值。你需要根據(jù)圖片在布局中的角色，選擇不同的計(jì)算模式。
模式一：通欄或固定寬度位圖——選擇目標(biāo)顯示寬度×DPR
這是最常用的場(chǎng)景：一個(gè)占據(jù)屏幕100%寬度的輪播圖，或者卡片內(nèi)50%寬度的縮略圖。正確的物理像素尺寸不是設(shè)計(jì)稿里隨手給的值，而是一個(gè)公式：
圖片物理寬度 = 在布局中的CSS寬度 × DPR
示例：你的頂圖在iPhone 14（視口寬度390px，DPR=3）上要全寬顯示。那么CSS寬度為390px（或100vw），實(shí)際需要的圖片寬度應(yīng)為 390 × 3 = 1170px。同理，一個(gè)在兩列布局中占50%寬度的商品圖，CSS寬度約195px，圖片寬度需要 195 × 3 = 585px。
不要忽略DPR。如果你只按CSS寬度（390px）提供圖片，在DPR=3的屏幕上瀏覽器會(huì)把一張390px的圖片拉伸到1170個(gè)物理像素去渲染，結(jié)果必然是模糊。同樣，不需要為DPR=3的設(shè)備提供超過上述計(jì)算結(jié)果的大圖，因?yàn)槎喑龅南袼刂粫?huì)增加文件體積而不會(huì)提升顯示清晰度。
實(shí)操約束：
- 如果你不確定用戶設(shè)備的DPR分布，用2x和3x兩檔就可以覆蓋絕大多數(shù)場(chǎng)景。提供1x圖片（即CSS寬度）作為低端機(jī)回退。
- 對(duì)于Icon、線條圖形等，直接使用SVG可以完全繞開DPR問題。
模式二：固定高度或受限高度的橫圖——高度決定寬度
當(dāng)你有一個(gè)高度受約束的容器，比如一個(gè)高200px的橫向滑動(dòng)卡片區(qū)，或者一個(gè)4:3的固定比例區(qū)域，圖片的裁切或留白就變得敏感。此時(shí)應(yīng)該先確定渲染高度，再根據(jù)設(shè)計(jì)比例反推寬度。
例如：一個(gè)橫向滾動(dòng)卡片列表，卡片容器高度固定為200px，寬高比16:9。圖片物理高度 = 200 × DPR = 600px（DPR=3），物理寬度 = 600 × 16/9 ≈ 1067px。這個(gè)寬度同樣是最終資源的上限，不應(yīng)無限放大。
模式三：可縮放矢量圖形——永遠(yuǎn)優(yōu)先考慮SVG
Logo、圖標(biāo)、簡(jiǎn)單插畫、裝飾形狀，只要不是真實(shí)拍攝的照片，優(yōu)先問自己“能否用SVG”。SVG的物理尺寸概念消失，文件體積通常遠(yuǎn)小于高DPR下的位圖，且永不模糊。唯一需要注意的是復(fù)雜SVG（路徑點(diǎn)極多）在低端機(jī)上渲染可能卡頓，這種情況才需要退化到PNG或WebP。
格式?jīng)]有銀彈：JPEG、WebP、AVIF與PNG的邊界在哪
確定了物理尺寸后，格式選擇直接決定同一張圖是50KB還是200KB。這里的關(guān)鍵是理解每種格式對(duì)“內(nèi)容類型”的適應(yīng)邊界，而不是追求某個(gè)格式的最優(yōu)。
照片和復(fù)雜漸變——用WebP或AVIF，JPEG作為終極回退
對(duì)于相機(jī)拍攝的照片、復(fù)雜漸變背景、帶陰影的大圖，有損壓縮格式是唯一選擇。
- JPEG：兼容一切，但壓縮效率最低。在相同視覺質(zhì)量下，文件體積通常比WebP大30%-50%。僅用作不支持現(xiàn)代格式的舊瀏覽器回退。
- WebP：當(dāng)前移動(dòng)端兼容性已經(jīng)達(dá)到96%以上（覆蓋所有現(xiàn)代瀏覽器和iOS 14+的Safari）。支持有損、無損和透明度。作為主力格式風(fēng)險(xiǎn)極低。
- AVIF：壓縮效率比WebP再高20%-30%，尤其在高分辨率圖片上優(yōu)勢(shì)明顯，且HDR色彩支持更好。但編碼速度慢，部分早期Android設(shè)備解碼性能弱。適合對(duì)質(zhì)量要求極高且可接受異步解碼延遲的場(chǎng)景。
你的默認(rèn)策略：首發(fā)WebP，提供JPEG回退。如果流量和性能指標(biāo)允許，對(duì)首屏大圖嘗試AVIF并監(jiān)控解碼耗時(shí)。
界面元素、Logo、帶透明度的圖形——PNG只在你不能用WebP無損時(shí)保留
UI元素（按鈕、分割線、帶陰影的卡片）過去用PNG-8或PNG-24?，F(xiàn)在WebP的無損模式和無損帶Alpha通道模式完全可以替代絕大多數(shù)PNG場(chǎng)景，而且體積更小。唯一的例外是需要精確像素控制、且WebP有損下的邊緣噪點(diǎn)不可接受的小尺寸圖形，此時(shí)保留PNG作為最終備選。
如何讓瀏覽器自主選擇：srcset與picture的正確組合
選好了尺寸和格式，前端必須用響應(yīng)式圖像標(biāo)記告訴瀏覽器哪張圖才是合適的，而不是讓單一<img src>去適應(yīng)所有屏幕。
用srcset做分辨率切換
當(dāng)你同一張圖提供了多個(gè)像素寬度版本時(shí)（比如同一內(nèi)容，寬度有390w、780w、1170w），使用srcset配合w描述符和sizes屬性，通知瀏覽器根據(jù)自身屏幕特性選擇。
<img
src="image-default.jpg"
srcset="img-390.jpg 390w,
img-780.jpg 780w,
img-1170.jpg 1170w"
sizes="(max-width: 767px) 100vw, 50vw"
alt="產(chǎn)品展示圖">說明：sizes告訴瀏覽器圖片在布局中實(shí)際占多寬。移動(dòng)端（小于768px）按100vw計(jì)算，瀏覽器會(huì)比對(duì)DPR和當(dāng)前網(wǎng)絡(luò)，從srcset中挑最優(yōu)寬度。src作為不兼容瀏覽器的兜底。
用picture做格式切換
現(xiàn)代瀏覽器支持WebP或AVIF，但老瀏覽器需要JPEG。你不能讓所有瀏覽器都下載同一個(gè)WebP。使用<picture>元素按兼容性提供格式列表，瀏覽器選第一個(gè)支持的格式加載。
<picture>
<source srcset="img.avif" type="image/avif">
<source srcset="img.webp" type="image/webp">
<img src="img.jpg" alt="風(fēng)景照片">
</picture>你可以將格式切換與分辨率切換結(jié)合在一起：
<picture>
<source
srcset="img-390.avif 390w, img-780.avif 780w, img-1170.avif 1170w"
sizes="100vw"
type="image/avif">
<source
srcset="img-390.webp 390w, img-780.webp 780w, img-1170.webp 1170w"
sizes="100vw"
type="image/webp">
<img
src="img-1170.jpg"
srcset="img-390.jpg 390w, img-780.jpg 780w, img-1170.jpg 1170w"
sizes="100vw"
alt="全寬輪播圖">
</picture>針對(duì)移動(dòng)端首屏的懶加載與fetchpriority
非首屏圖片必須懶加載，但首屏關(guān)鍵圖片（LCP，最大內(nèi)容繪制元素）需要提前聲明優(yōu)先級(jí)。
<img src="hero.webp" loading="lazy" fetchpriority="high" alt="首屏大圖">注意：loading="lazy"應(yīng)加在非首屏元素上；首屏LCP圖片避免設(shè)置loading="lazy"，否則瀏覽器會(huì)延遲加載影響LCP時(shí)間。fetchpriority="high"則顯式提升該圖片的網(wǎng)絡(luò)優(yōu)先級(jí)。
避開自動(dòng)化工具的陷阱：CDN動(dòng)態(tài)壓縮與對(duì)象存儲(chǔ)參數(shù)
很多時(shí)候你不是手動(dòng)導(dǎo)出每一套圖，而是依賴CDN或圖片服務(wù)（如Cloudinary、imgix、七牛、又拍云）對(duì)一張?jiān)瓐D進(jìn)行參數(shù)化裁剪和格式轉(zhuǎn)換。這種方式能極大減少前端切圖工作，但必須約束好參數(shù)規(guī)則，否則自動(dòng)生成的尺寸或格式可能反向傷害性能。
- 必須顯式傳入寬度參數(shù)：不要依賴客戶端設(shè)置
width屬性來縮放，務(wù)必通過URL參數(shù)指定圖片的物理寬度等于目標(biāo)CSS寬度×DPR。例如原圖存儲(chǔ)為image.jpg，你的圖片服務(wù)可以通過image.jpg?w=1170&format=webp直接返回正確尺寸和格式。 - 禁止依賴服務(wù)端自動(dòng)轉(zhuǎn)換格式而不做回退處理：如果使用CDN自動(dòng)轉(zhuǎn)換格式（Accept頭判斷），當(dāng)服務(wù)異常時(shí)可能返回原圖導(dǎo)致過大。最穩(wěn)定的方案還是在URL上通過參數(shù)指定
format/auto，同時(shí)前端<picture>中保留不帶格式轉(zhuǎn)換參數(shù)的JPEG回退URL。 - 限制DPR和尺寸閾值：防止攻擊者通過無限增大
?w=參數(shù)消耗源站流量。在CDN或圖片服務(wù)側(cè)設(shè)置最大寬度（如2560px）和格式白名單。
行動(dòng)建議：從一張圖片的整改到系統(tǒng)化設(shè)計(jì)
一次選錯(cuò)尺寸和格式，影響的可能只是一個(gè)頁面；但沒有規(guī)范，整站都會(huì)重蹈覆轍。給出四個(gè)立即可執(zhí)行的動(dòng)作：
- 建立你的圖片寬度分級(jí)表：梳理整站所有布局中的圖片CSS寬度和主要設(shè)備DPR，生成一組標(biāo)準(zhǔn)物理寬度（例如：390、585、780、1170），所有新資源必須來自這幾檔尺寸。
- 格式?jīng)Q策樹：照片→AVIF（條件允許）或WebP+JPEG回退；圖形與Icon→SVG或WebP無損/PNG；透明元素→WebP無損或PNG。寫入你的組件文檔。
- UI組件強(qiáng)制要求響應(yīng)式圖像標(biāo)記：任何圖片組件不接受簡(jiǎn)單的
src字符串，必須暴露尺寸配置和格式數(shù)組，組件內(nèi)部自動(dòng)生成picture或srcset。 - 在CI中加入圖片體積門檻：對(duì)構(gòu)建產(chǎn)物中的圖片文件設(shè)定上限，任何單張圖片超過規(guī)定閾值（例如80KB）觸發(fā)告警，迫使開發(fā)者回到尺寸和格式選擇上重新權(quán)衡。
把這四個(gè)動(dòng)作做成代碼規(guī)范和設(shè)計(jì)稿交付要求，你就能從被動(dòng)救火變成系統(tǒng)性控制移動(dòng)端圖片的性能基線。