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

问题描述

img元素的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?

我确实在picture元素草稿上找到了一些示例，但仍然无法理解它们之间的区别.以下是示例:

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

使用srcset属性:

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

使用picture元素:

<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>

推荐答案

srcset和picture的作用大致相同，但存在细微差别:

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

• picture 指示浏览器应使用的图像，而
• srcset 使浏览器可以选择.可以使用很多方法来选择此选项，例如视口大小，用户首选项，网络状况等.希望将来，通过选择适当的图像，浏览器将变得越来越聪明.

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

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屋！