html - 使用 srcset 和大小的响应图像

Question

我试图弄清楚为什么在我的代码中，当我的分辨率大约为 400 像素时，浏览器正在加载大图像和小图像。如果我的分辨率很小，我只需要加载小图像，对吗？即使在 Retina 显示器中，也应该加载中等图像。

在过去的几个小时里，我一直在努力研究这个。

<img    
    srcset="https://s18.postimg.org/t9xyf7mix/small.jpg  320w,
            https://s18.postimg.org/w5b1m2qix/medium.jpg 640w,
            https://s18.postimg.org/ues0kl8zt/large.jpg  1024w" 

    sizes= "(min-width: 1024px) 50vw,
            (min-width:  640px) 50vw,
            (min-width:  320px) 50vw"

    src="https://s18.postimg.org/t9xyf7mix/small.jpg"
    alt="Test image behavior" 
/>

JSFiddle 链接:https://jsfiddle.net/italoborges/v8yftgj2/2/

我做错了什么？

谢谢。

Answer 1

这里有一个很好的解释和演示这个决策背后的数学:
https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

此外，您可以在这里找到一个不错的自动响应断点生成器，它使用高级分析为特定图像提取最佳优化的断点集:
http://www.responsivebreakpoints.com/