如何使用srcset图片属性？

Question

刚刚了解srcset属性。我试图运行它没有任何成功。当我在谷歌浏览器上为IPhone或IPad运行它时，我预计至少会看到1个图像加载，但没有任何显示。

<img srcset="img1.png 1x low-bandwidth, img2.png 2x high-bandwidth"> 

Answer 1

According to the w3c，srcset属性仍处于草稿状态。这意味着它还不被推荐使用它，因为规范仍然可以改变，并且网络浏览器不会被实现。

顺便说一下，请注意，low-bandwidth和high-bandwidth不是当前草案的一部分。很可能因为很难找到客观定义的“低”和“高”带宽，这在十年内仍然是合理的。

Answer 2

srcset属性尚未在任何浏览器中实现。

此外 - 您的示例中的low-bandwidth/high-bandwidth零件不属于与srcset相关的任何规范或提案。

Answer 3

第一个srcset的实现刚落在WebKit中，请参阅announcement post。

Answer 4

这是在v34测试版的铬，现在v33是稳定版本。

因此，如果没有改变，它很快就会变成铬。

---

我跑V34这个测试和它的工作如预期 - 甚至不得不出高清晰度的图像与缩放级别的奖金在200，我没想到（但很明显，现在我想想）。您当然可以检查元素并实时进行更改，如果您没有高分辨率屏幕，则可以放大浏览器。镀铬的

<img src="unsupported.jpg" 
    srcset="cat@1x.jpg 1x,cat@2x.jpg 2x" width="100" height="100"> 

• 所以预V34版本，你会经常看到unsupported.jpg
• V34或更高版本，你会看到高清晰度
• 当然cat@1x.jpg正常屏幕和cat@2x.jpg你通常把cat@1x.jpg作为标准src属性，这只是为了演示。

记住这不会在iPad/iPhone尚未:-(

Answer 5

Firefox浏览器是不会支持它在不久的将来，你可以找到它的支持在这里。Srcset support in different browsers

没有在此属性的高带宽和低带宽元素。我们需要的URL，目标设备的宽度，你可以在这里找到它。

<img src="fallback.jpg" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, large.jpg 1x,  large-hd.jpg 2x" alt="…"> 

它可以与HTML5的图像元素来使用。如果你是intereste d详细了解它，请阅读这篇文章。 http://www.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing/

Answer 6

简而言之，Srcset是一个新属性，它允许您为不同的屏幕尺寸/方向/显示类型指定不同类型的图像。用法很简单，你只需提供很多不同的图像，用逗号分隔它们即可：<img src="image.jpg" alt="image" srcset="<img> <descriptor>, ..., <img_n> <descriptor_n>">。这里是一个例子：srcset="image.jpg 160w, image2.jpg 320w, image3.jpg 2x"

---

这是一个较长的答案，它解释了更多细节的事情。

首先你错过了要求src属性为srcset只增强img标签。

srcset与图片之间的区别。 srcset和picture的功能大致相同，但存在细微差别：picture指示浏览器应该使用哪种图像，而srcset则为浏览器提供了一种选择。很多东西可以用来选择这个选项，比如视口大小，用户偏好，网络条件等等。对srcset的支持很不错，almost all current browsers或多或少支持它。 picture元素的情况是little bit worse。

描述符只是一种显示资源后面隐藏了哪种图像的方法。有各种各样的描述符：

• 密度描述。 srcset="image.jpg, image-2X.jpg 2x" 显示密度值 - 1x，2x等被称为显示密度描述符。如果没有提供显示密度描述符，则假定为1x。瞄准视网膜显示的好变种。
• 宽度描述符。 srcset="image-240.jpg 240w, image-640.jpg 640w"。我相信这是不言自明的。唯一的问题是，自身的宽度描述符并不是真的有用。 Why? read here
• 大小描述符，这只有在使用宽度描述符时才有意义。 srcset="image-160.jpg 160w, image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w" sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">。浏览器的说明如下所示：(max-width: 480px) 100vw - 如果视口宽度为480像素或更小，则图像将为视口宽度的100％。 (max-width: 900px) 33vw - 如果视口宽度为480像素或更小，则由于之前的介质条件，此规则将永远不会到达。而254px是没有列出媒体条件时，假定其长度被认为是其他媒体条件都不符合时使用的默认值。

只是为了完整性将增加在这里有在CSS背景图像和其他一些有用的链接here

Answer 7

使用srcset与尺寸

<img sizes="(min-width: 1200px) 580px, 
     (min-width: 640px) 48vw, 
     98vw" 
    srcset="img/hello-300.jpg 300w, 
     img/hello-600.jpg 600w, 
     img/hello-900.jpg 900w, 
     img/hello-1200.jpg 1200w" 
    src="img/hello-900.jpg" alt="hello"> 

sizes的image-set()属性都像媒体查询描述图像占用视口的空间。

• 如果视口大于1200像素，图像恰好是580像素（例如，我们的内容以最大1200像素宽的容器为中心，图像占半边距减去边距）。
• 如果视口在640像素和1200像素之间，则图像占用视口的48％（例如图像与我们的页面缩放并占用一半视口宽度减去页边距）。
• 如果视口是任何其他大小，在我们的例子中小于640px，图像需要视口的98％（例如图片与我们的页面缩放，并且视口的全宽减去页边距）。 最后一项必须省略媒体条件。

srcset只是告诉浏览器我们有什么图像可用，它们的大小是多少。

• img/hello-300.jpg是300像素宽，
• img/hello-600.jpg为600像素宽，
• img/hello-900.jpg是900px宽，
• img/hello-1200.jpg是1200像素宽

src总是强制图像源。在与srcset一起使用的情况下，如果浏览器不支持srcset，则src将提供后备图像。

而不尺寸

<img src="img/hello-300.jpg" alt="hello" 
    srcset="img/hello-300.jpg 1x, 
     img/hello-600.jpg 2x, 
     img/hello-1200.jpg 3x"> 

srcset使用srcset提供可用图像的列表，以及设备的像素比例x描述符。

• 如果设备的像素比为1，则使用img/hello-300.jpg
• 如果设备的像素比为2时，使用img/hello-600.jpg
• 如果设备像素比为3时，使用img/hello-1200.jpg

src是总是强制性的图像源。在与srcset一起使用的情况下，如果浏览器不支持srcset，则src将提供后备图像。