使用 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" 
/>

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

使用 srcset 和大小的响应图像

Responsive Images using srcset and sizes

html

css

image

srcset

responsive