[Vuejs]-Browser doesn't download the correct responsive image

by

0👍

✅

I think I have solved the problem.

Chrome shows high quality images if they are in the cache. Why download additional lower quality images if they already have higher quality images in the pocket, right? See this article.

Next, modify the order of media queries in sizes, from high to low:

<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">
👤Joshua Leung

Leave a comment