解决高DPI移动端误加载桌面图、平板/桌面误显移动端图问题

问题背景 #

• 原响应式<img>代码中，移动端图片仅在设备像素密度1x且视口宽度≤576px时加载显示。像iPhone 12这类高DPI小屏设备，明明视口小于576w，却加载了桌面图片。
• 尝试给srcset添加移动端图片的1x/2x/3x配置后，移动端显示正常，但平板和桌面端反而始终加载移动端图片，问题出现反转。

原代码 #

<img src="{{ $column['mobile_image']['url'] }}"
    srcset="{{ $column['mobile_image']['url'] }} 576w,
        {{ $column['tablet_image']['url'] }} 992w,
        {{ $column['desktop_image']['url'] }} 1200w"
    sizes="(max-width: 576px) 576px,
    (max-width: 992px) 992px,
    1200px"
    alt="{{ $column['alt'] ?? '' }}"
    class="{{ $block }}__image">

修改后代码 #

<img src="{{ $column['mobile_image']['url'] }}"
    srcset="{{ $column['mobile_image']['url'] }} 1x,
        {{ $column['mobile_image']['url'] }} 2x,
        {{ $column['mobile_image']['url'] }} 3x,
        {{ $column['tablet_image']['url'] }} 992w,
        {{ $column['desktop_image']['url'] }} 1200w"
    sizes="(max-width: 576px) 576px,
    (max-width: 992px) 992px,
    1200px"
    alt="{{ $column['alt'] ?? '' }}"
    class="{{ $block }}__image">

问题根源 #

1. 原代码问题：使用w单位的srcset配合sizes时，浏览器会通过「视口宽度×设备像素密度」计算所需图片的最小像素值。以iPhone 12为例，视口390px×3DPI=1170px，接近1200w的桌面图，因此优先加载桌面资源。
2. 修改后问题：混合使用x（像素密度）和w（视口宽度）单位时，浏览器会优先匹配x标记的资源——不管视口宽度多大，只要设备DPI对应，就会加载移动端图片，导致大屏设备适配失效。

最优解决方案 #

方案一：纯HTML适配（推荐，无额外依赖） #

给每个断点的图片提供对应DPI的版本，用w单位配合sizes，让浏览器自动计算最优资源。

<img src="{{ $column['mobile_image']['url'] }}"
    srcset="
        {{ $column['mobile_image_1x']['url'] }} 576w,
        {{ $column['mobile_image_2x']['url'] }} 1152w,
        {{ $column['mobile_image_3x']['url'] }} 1728w,
        {{ $column['tablet_image_1x']['url'] }} 992w,
        {{ $column['tablet_image_2x']['url'] }} 1984w,
        {{ $column['tablet_image_3x']['url'] }} 2976w,
        {{ $column['desktop_image_1x']['url'] }} 1200w,
        {{ $column['desktop_image_2x']['url'] }} 2400w,
        {{ $column['desktop_image_3x']['url'] }} 3600w"
    sizes="(max-width: 576px) 100vw,
        (max-width: 992px) 100vw,
        1200px"
    alt="{{ $column['alt'] ?? '' }}"
    class="{{ $block }}__image">

• 每个断点的图片按1x/2x/3x生成对应宽度的w标记（比如移动端2x图为576×2=1152w）
• 将sizes中的固定宽度改为100vw，贴合实际视口，提升计算准确性
• 浏览器会自动匹配当前设备「视口宽度×DPI」对应的最优图片

方案二：<picture>+CSS媒体查询（适配多场景） #

用<picture>按视口范围分组，每组内单独处理DPI适配，逻辑更清晰。

<picture>
    <!-- 移动端：视口≤576px -->
    <source media="(max-width: 576px)" 
            srcset="
                {{ $column['mobile_image']['url'] }} 1x,
                {{ $column['mobile_image_2x']['url'] }} 2x,
                {{ $column['mobile_image_3x']['url'] }} 3x">
    <!-- 平板：视口≤992px -->
    <source media="(max-width: 992px)" 
            srcset="
                {{ $column['tablet_image']['url'] }} 1x,
                {{ $column['tablet_image_2x']['url'] }} 2x,
                {{ $column['tablet_image_3x']['url'] }} 3x">
    <!-- 桌面端：默认 -->
    <source srcset="
                {{ $column['desktop_image']['url'] }} 1x,
                {{ $column['desktop_image_2x']['url'] }} 2x,
                {{ $column['desktop_image_3x']['url'] }} 3x">
    <!-- 降级兼容 -->
    <img src="{{ $column['mobile_image']['url'] }}" 
         alt="{{ $column['alt'] ?? '' }}" 
         class="{{ $block }}__image">
</picture>

• <picture>会按顺序匹配符合条件的source，确保不同视口加载对应断点的图片组
• 每组内用x单位处理该断点下的高DPI设备需求

方案三：JS动态切换（适合特殊场景） #

若无法修改HTML结构，可通过JS监听视口变化和设备DPI，动态更新srcset。

function updateImageSource() {
    const img = document.querySelector('.{{ $block }}__image');
    const viewportWidth = window.innerWidth;
    const dpr = window.devicePixelRatio || 1;

    let srcset = '';
    if (viewportWidth <= 576) {
        srcset = `${{{ $column['mobile_image']['url'] }}} 1x,
                  ${{{ $column['mobile_image_2x']['url'] }}} 2x,
                  ${{{ $column['mobile_image_3x']['url'] }}} 3x`;
    } else if (viewportWidth <= 992) {
        srcset = `${{{ $column['tablet_image']['url'] }}} 1x,
                  ${{{ $column['tablet_image_2x']['url'] }}} 2x,
                  ${{{ $column['tablet_image_3x']['url'] }}} 3x`;
    } else {
        srcset = `${{{ $column['desktop_image']['url'] }}} 1x,
                  ${{{ $column['desktop_image_2x']['url'] }}} 2x,
                  ${{{ $column['desktop_image_3x']['url'] }}} 3x`;
    }
    img.srcset = srcset;
}

// 初始化
updateImageSource();
// 监听窗口变化
window.addEventListener('resize', updateImageSource);

内容的提问来源于stack exchange，提问作者wharfdale