scss 响应式图像，srcset，图片标签

Posted 2021-05-18

// srcset
// comma separated list of one or more URLs pointing at images to be used by the user agent.
// the browser chooses the best suitable image from the srcset and replaces the src with it
// if the browser doesn't support srcset attribute, it will just use src
<img src='1.png' srcset='small.png, medium.png, large.png'>

// w (width descriptor)
// optional descriptor, specifies the width of the image
// upto 400px, browser will show small.png, then upto 800px medium and then large
<img src='1.png' srcset='small.png 400w, medium.png 800w, large.png 1200w'>
// note: In a 2x display, css 400px = device 800px, 
// so upto 400px perceived width, browser will show 800px image


// x (pixel density descriptor)
// optional descriptor indicating the target pixel density for each image file listed in srcset
// default 1x
// use either width descriptor or pixel, using both can cause problems
<img src='1.png' srcset='small.png, medium.png 2x, large.png 3x'>

// sizes attribute
// can be applied to an image element that contains the srcset attribute
// to provide the browser with the information about the width of the displayed image
// in relation to the overlall layout
// last option must be a width value without media condition, which the browser picks when no media condition match
<img src='1.png' srcset='small.png 400w, medium.png 800w' sizes='(min-width: 1200px) 1200px, (min-width: 600px) 90vw, 100vw'>
// in the above example, for view port width >= 1200px, browser will display 1200px image
// for width >= 600px, image with 90% of the view port width
// say viewport width = 700px, image width to be chosen = 630px, now based on 630px, browser will pick the image from srcset attribute

// <picture> tag
// specifies media conditions for the use of specific image files.
// Typically used for art direction
// with srcset attribute, browser decides what to do, but with picture tag, we force the browser to do what we want

<picture>
  <source srcset="large.png" media="(min-width:800px)">
  <source srcset="medium.png" media="(min-width:600px)">
  <img srcset="small.jpg" alt="Cherry Blossoms">
</picture>

//note: srcset is not supported by all browsers, picturefill (it's a pollyfill) can be used to bridge that gap

// generally based on the device and resolution, you generate different size images
// e.g. 600px, 960px, 1440px, 1800px, 2400px, 3600px

// picture tag is also used for progressive enhancement
// for old browsers use a png and for browsers that support svg use svg

<picture>
  <source type="images/svg+xml" sourceset="images/hero.svg">
  <img src="images/hero.png" alt="super hero">
</picture>