html - 如何在手机上使用图片元素获得清晰的图像

Question

图片元素正在迅速普及(http://caniuse.com/#search=picture)，我认为这是避免提供过大/过小图片的好方法，特别是当您想要在移动设备和桌面设备上以 100% 的比例显示相同的图片时视口(viewport)宽度。

可以这样解决:

<img
    srcset="large.jpg  1920w, 
            medium.jpg  720w,
            small.jpg   360w"
    src="medium.jpg">

这让浏览器很聪明，可以决定加载哪张图片，但我发现这种做法有一个问题:许多移动设备的像素密度为2或更大!因此，当以 360w 显示它时，如果我们希望该图像看起来清晰，我们实际上需要中等图像。可以这样做:

<picture>
   <source srcset="http://goo.gl/LsuU9t" media="(min-width: 720px)">
   <source srcset="http://goo.gl/LsuU9t" media="(min-width: 360px and min-resolution: 2dppx)">
   <img src="http://goo.gl/LsuU9t">
</picture>

在我看来，这里的问题是它会随着屏幕分辨率的增加而增加，我们失去了浏览器巧妙地决定最佳选择的好处。

所以，我的问题是，如果两者之间有中间点，那么我仍然可以将 html 和 css 分开。

Answer 1

浏览器在选择图像时会考虑像素密度。因此，具有 360 CSS px 宽视口(viewport)和 2x 像素密度的设备将选择 medium.jpg。这正是 w 描述符和 sizes 属性旨在解决的问题!不要在这里使用图片。

另见 https://ericportis.com/posts/2014/srcset-sizes/