浏览器没有下载正确的响应图像

Question

<img :src="project.thumbnails.small[0]" 
         class="card-img-top"
         :srcset="`${project.thumbnails.small[0]} 300w, ${project.thumbnails.medium[0]} 900w, ${project.thumbnails.high[0]} 1400w`"
         sizes="(min-width: 300px) 90vw, (min-width: 768px) 20vw, (min-width: 991px) 10vw" 
         width="100%"
         :alt="project.title">

视口大于991px时，图片宽度仅为视口的10%；因此浏览器应该获得 900w 或 300w 的图像，但它下载了 1400w 的图像。我在这里做错了什么？

这是在浏览器中呈现的代码。

<img data-v-5857f165="" src="http://placehold.it/330x330" 
 srcset="http://placehold.it/330x330 300w, http://placehold.it/900x900 900w, http://placehold.it/1400x1400 1400w" 
 sizes="(min-width: 300px) 90vw, (min-width: 768px) 20vw, (min-width: 991px) 10vw" 
 width="100%" alt="sit amet" class="card-img-top">

如果相关的话，我正在使用 Chrome 版本 57.0.2987.133（64 位）。

Answer 1

我想我已经解决了问题。

Chrome 显示缓存中的高质量图像。如果口袋里已经有更高质量的图像，为什么还要下载其他质量较低的图像，对吗？参见 this article。

接下来，修改媒体查询的大小顺序，从高到低：

<img :src="project.thumbnails.small[0]" 
         class="card-img-top"
         :srcset="`${project.thumbnails.small[0]} 300w, ${project.thumbnails.medium[0]} 900w, ${project.thumbnails.high[0]} 1400w`"
         sizes="(min-width: 991px) 10vw, (min-width: 768px) 20vw, 300px" 
         width="100%"
         :alt="project.title">

浏览器没有下载正确的响应图像

Browser doesn't download the correct responsive image

vue.js

responsive-images

vuejs2