具有srcset、大小和媒体查询的响应图像-防止加载大图像以获得更高的像素密度

Question

很长一段时间以来，我使用picture element处理每个视口中不同大小的响应图像。它工作得很好，但现在我不得不切换到响应

经过长时间的搜索，我找到了很好的文档：

https://www.dofactory.com/html/img/sizes 详情请浏览：https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

带有图片的代码如下所示：

<picture>
    <source media="(max-width: 740px)" src="740.jpg" type="image/jpeg">
    <source media="(max-width: 980px)" src="1280.jpg" type="image/jpeg">
    <source media="(max-width: 1280px)" src="1600.jpg" type="image/jpeg">
    <source media="(max-width: 1480px)" src="1920.jpg" type="image/jpeg">
    <img src="740.jpg" title="..." alt="..." />
</picture>  

我重写了这样一个响应img：

<img src="740.jpg" title="..." alt="..." 
    srcset="
       740.jpg 740w,
       1280.jpg 1280w,
       1600.jpg 1600w,
       1920.jpg 1920w" 
    sizes="
       (max-width: 740px) 740px,
       (max-width: 980px) 1280px,
       (max-width: 1280px) 1600px,
       (max-width: 1480px) 1920px"
/>

在浏览器中的第一次测试中，这似乎非常有效。但后来我注意到，在移动设备上，它加载了太大的图像。

原因是一些移动设备的像素密度不同，如在a-complete-guide-for-responsive-images上解释的

我试图通过将代码更改为

<img src="1920.jpg" title="..." alt="..." 
    srcset="
       740.jpg 740w 1x,
       1280.jpg 1280w 1x,
       1600.jpg 1600w 1x,
       1920.jpg 1920w 1x" 
    sizes="
       (max-width: 740px) 740px,
       (max-width: 980px) 1280px,
       (max-width: 1280px) 1600px,
       (max-width: 1480px) 1920px"
/>

不起作用。。。（始终为所有视点加载最小的图像）

我尝试了使用img srcset处理响应图像时不使用媒体查询大小的解决方案

没有像我需要的那样工作。。。

所以最大的问题是，如何将宽度和密度的选择结合起来。

在我的示例中，它应该加载：

• 宽度为0-740时为740.jpg

我不希望它为像素密度更大的设备加载更大的图像。

我知道Stackoverflow中有很多类似的问题，我花了几个星期寻找一个有效的解决方案，但似乎没有什么像预期的那样有效，所以我希望有人能提供一个解决方案

更新：我发现，在讨论这个问题时，存在一个gitlab问题。

（请参见响应映像导致性能问题）

但目前看来，这个问题似乎没有最终的解决办法。

如果有人能提供新的想法，我会非常高兴。




Answer 1

我找到了两种可能的解决方案：

两者都使用最小分辨率媒体查询来定义每个像素密度的独立大小。我用一个比问题中更简单的例子来解释它：

想法1

<img src="500.jpg" title="..." alt="..." 
    srcset="
       500.jpg 500w,
       1000.jpg 1000w"
    sizes="
       (min-resolution: 3dppx) 33vw,
       (min-resolution: 2dppx) 50vw,
       (min-resolution: 1dppx) 100vw"
/>

我使用了100vh示例，并“还原”了浏览器使用*像素密度拍摄的图像是current\u。

此解决方案适用于全屏图像，但您可以使用自定义视口。

想法2

<img src="500.jpg" title="..." alt="..." 
    srcset="
       500.jpg 500w,
       1000.jpg 1000w"
    sizes="
       (min-resolution: 3dppx) and (max-width: 600px) 1500px,
       (min-resolution: 3dppx) and (max-width: 1200px) 2000px,

       (min-resolution: 2dppx) and (max-width: 600px) 1000px,
       (min-resolution: 2dppx) and (max-width: 1200px) 2000px,

       (min-resolution: 1dppx) and (max-width: 600px) 500px,
       (min-resolution: 1dppx) and (max-width: 1200px) 1000px"
/>

我根据屏幕宽度创建了类似的媒体查询，但添加了“还原”大小，即浏览器使用*像素密度拍摄当前图像。

此解决方案适用于所有图像，即使它们不是全尺寸图像。在这里，您可以使用自定义视口，但它的代码相对较多。

两者背后的基本理念是：

• 例如，对于像素密度为2x和500px的屏幕宽度，浏览器选择srcset为双倍大小，这是在大小媒体查询中定义的，并采取1000px-图像
• 所以我试图定义新的媒体查询我想要的大小的两倍（例如1000px），这需要浏览器得到我想要的500px，当它是由像素比

在Summery中，这意味着：

如果您希望恢复浏览器为具有大像素密度的mobil设备拍摄更大图像的效果，则必须为每个像素密度的大小计算新值。

对于这两种解决方案，您也应该通过css定义显示大小。

例如，这个简单的php代码示例显示：

<?php
  $viewport = [
    // Viewport => Image-Size
    600  => 500,
    1200 => 1000
  ];

  // walk over all pixel-densities
  for($i=3; $i>0; $i--) {
    foreach($viewport as $vp => $w) 
      echo "(min-resolution: {$i}dppx) and (max-width: {$vp}px) "
            .floor($w/$i) . "px,\n";
  }
?>