图片(源)元素 VS img srcset 属性 [英] picture (source) element VS img srcset attribute

问题描述

img 元素的 srcset 属性可帮助作者调整他们的网站以进行高分辨率显示，以便能够使用代表同一图像的不同资产.

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

这两者都使作者能够根据设备分辨率控制显示图像；从而使图像具有响应性.那么它们之间的主要区别是什么?

我确实在 picture 元素 draft 上找到了一些示例，但仍然失败了解差异.以下是示例:

使用 srcset 属性:

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

使用picture元素:

<图片><source media="(min-width: 45em)" srcset="large.jpg"><source media="(min-width: 18em)" srcset="med.jpg"><img src="small.jpg" alt="总裁颁奖."></图片>

解决方案

srcset 和 picture 做了大致相同的事情，但有一个细微的区别:

• picture 规定浏览器应该使用什么图像，而
• srcset 给浏览器一个选择.很多东西都可以用来选择这个选项，比如视口大小、用户偏好、网络条件等.希望未来的浏览器能够通过选择合适的图片变得越来越聪明.

对srcset 的支持非常好，几乎所有当前浏览器或多或少支持它.带有 picture 元素的情况是有点糟糕.

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.

这篇关于图片(源)元素 VS img srcset 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！