浏览器如何使用< img>选择正确的图像“尺寸"和"srcset"属性? [英] How does the browser pick the right image using <img> "sizes" and "srcset" attributes?

问题描述

srcset 属性如何与 sizes 属性一起确定正确的图像?以这张图片为例:

 < img alt =演示图片"尺寸=(最小宽度:1024像素)512像素，100vwsrcset ="img/banner-large.jpg 2048w，img/banner-medium.jpg 1400w，img/banner-small.jpg 800w> 

(我清除了Chrome中的缓存)

我认为由于512px(尺寸)和800w(srcset)的图像宽度，将总是选择最后一个图像(800w)，但是不是总是选择该图像吗?为什么?

解决方案

此处是有关使用

How does the srcset attribute determine the correct image in conjunction with the sizes attribute? Take this image for example:

<img alt="Demo image"
     sizes="(min-width: 1024px) 512px,
             100vw"
     srcset="img/banner-large.jpg 2048w,
             img/banner-medium.jpg 1400w,
             img/banner-small.jpg 800w">

(I cleared the cache in Chrome)

I thought that the last image would always be chosen (800w), because of the 512px (sizes) and the image width of 800w (srcset), but that image did not always get selected? Why?

解决方案

Here is a detailed guide on using Srcset with sizes.

sizes attribute contains a comma-separated list. Each item in the list describes the size of the image in relation to the viewport.

Using the sizes attribute with srcset provides the browser with enough information to start downloading the right image as soon as it sees an <img> tag in HTML without waiting for styles sheets to complete downloading and parsing.

Why do we need sizes?

If you are wondering why the browser is not aware of how big the image will render, checkout how the browser loads a web page.

The syntax:

<img src="image.jpg" 
     srcset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
     sizes="(max-width: 300px) 100vw, (max-width: 600px) 50vw, (max-width: 900px) 33vw, 900px"
/>

Each comma-separated item in sizes has:

1. Media conditions, for example, (max-width: 300px) - It describes a possible state that the screen can be in. (max-width: 300px) means when the viewport width is 300 CSS pixels or less. It is similar to media queries but with some limitations. You cannot use screen or print.
2. An empty space.
3. The width of the image element when the media condition is true. You can provide an absolute length (px, em) or a length relative to the viewport (vw), but not percentages.

Demo - srcset with sizes

Let’s see this in action with a live demo - https://imagekitio.github.io/responsive-images-guide/srcset-sizes.html

The layout is such that:

• If viewport width is above 900px, each image takes a fix 225px width.
• Upto 900px, each image takes up 33vw i.e. 33% width of total viewport width.
• Upto 700px, each image takes up 50vw i.e. 50% width of total viewport width.
• Upto 400px, each image takes up 100vw i.e. the whole viewport width.

HTML markup of a single image element looks like this:

<img src="https://ik.imagekit.io/ikmedia/women-dress-1.jpg" 
     srcset="https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-225 225w,
             https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-300 300w,
             https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-350 350w,
             https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-640 640w"
     sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

Let’s see what happens at different screen size and DPR values -

这篇关于浏览器如何使用< img>选择正确的图像“尺寸"和"srcset"属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！