使用 srcset 和尺寸的响应式图像

Question

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

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

<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/