当我们有srcset属性时，为什么我们需要图片元素？ [英] Why do we need the picture element when we have srcset attribute?

问题描述

元素的 srcset 属性可帮助作者使其网站适应高分辨率显示，从而能够以使用代表相同图像的不同资产。

图片元素可帮助作者基于媒体查询和/或支持来控制用户代理呈现给用户的图像资源对于特定的图像格式。

这两种方法都可以让作者控制显示基于设备分辨率的图像，从而使图像更加灵敏。那么它们之间的主要区别是什么？

我在图片元素草稿，但仍然无法理解其中的差异。以下是例子：

使用 srcset 属性：

 < img src =pic1x.jpgsrcset =pic2x.jpg 2x，pic4x.jpg 4x
 alt =拉德狼width =500高度= 500 > 
  

使用图片元素：

 < picture> 
< source media =（min-width：45em）srcset =large.jpg> 
< source media =（min-width：18em）srcset =med.jpg> 
< img src =small.jpgalt =总裁颁奖。> 
< /图片> 
  

解决方案

srcset 和图片的功能大致相同，但存在细微差别：

• 图片 指示浏览器应使用的图片，而 c $ c> srcset 为浏览器提供了一个选择。很多东西可以用来选择这个选项，比如视口大小，用户偏好，网络条件等等。希望未来的浏览器能够选择合适的图像变得更智能和更智能。 $ b

  支持 srcset 很不错，几乎所有当前的浏览器或多或少都支持它。使用图片元素的情况是稍微差一点。

  
  

  The srcset attribute of the img element helps authors adapt their sites for high-resolution displays, to be able to use different assets representing the same image.

  The picture element helps authors to control which image resource a user agent presents to a user, based on media query and/or support for a particular image format.

  Both these give the author control over displaying images based on the device resolution;thus making the images responsive. So what is the main difference between them?

  I did find some examples on the picture element draft, but still fail to understand the difference. Here are the examples:

  Using srcset attribute:

  <img src="pic1x.jpg" srcset="pic2x.jpg 2x, pic4x.jpg 4x"
   alt="A rad wolf" width="500" height="500">
  

  Using picture element:

  <picture>
    <source media="(min-width: 45em)" srcset="large.jpg">
    <source media="(min-width: 18em)" srcset="med.jpg">
    <img src="small.jpg" alt="The president giving an award.">
  </picture>
  

  解决方案

  Both srcset and picture does approximately the same things, but there is a subtle difference:

  • picture dictates what image the browser should use, whereas
  • srcset gives the browser a choice. A lot of things can be used to select this choice like viewport size, users preferences, network condition and so on. Hopefully in the future browsers would become smarter and smarter with selecting the appropriate image.

  The support for srcset is pretty good and almost all current browsers more or less support it. Situation with a picture element is a little bit worse.

  这篇关于当我们有srcset属性时，为什么我们需要图片元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！