HTML5 srcset：混合x和w語法

我想找出一種方法來向iOS8客戶端提供高dpi圖像，同時還爲支持w語法的瀏覽器提供響應式圖像資源。根據W3C標準，應該可以對兩種語法在一個srcset屬性混合：HTML5 srcset：混合x和w語法

<img alt="The Breakfast Combo" 
    src="banner.jpeg" 
    srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x">

（來源：http://drafts.htmlwg.org/srcset/w3c-srcset/）

然而，當我運行在瀏覽器與實施例38（OS X，沒有高dpi），在其他情況下支持w語法的瀏覽器總是加載最大的圖像（banner-HD.jpeg），而與視口大小無關。當我添加

banner.jpeg 1x

到srcset Chrome使用的形象，但仍然忽略100W的圖像。

在我的情況，我想指定圖像的兩個較小的版本，以及2個資源：

<img src="default.png" 
    srcset="small.png 480w, [email protected] 480w 2x, medium.png 1x, [email protected] 2x">

這似乎在2X iOS8上的設備，其挑中@ 2個工作因爲它們不支持w語法。不過，無論視口大小如何，Chrome仍然不會關心和加載medium.png。

我在這裏做錯了什麼，或者這是Chrome的實施srcset中的已知問題？

來源

2014-11-14 s2b

不要看其他瀏覽器做什麼。 Chrome是唯一正確執行此操作的人員。（和FF 38+）
不要看這個草案。它不是也不會被執行。這是正確的：https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset

混合X與W的一個描述符是無效的，瀏覽器將丟棄這些候選人，因爲AW描述總是計入斧描述：

<!-- invalid --> 
<img srcset="a.jpg 1x 300w, b.jpg 2x 600w" />

混合X與針對不同的考生AW描述符用於/瀏覽器解析，但無效，在99％的所有情況下沒有意義：

<!-- makes no sense: --> 
<img srcset="300.jpg 1x, 600.jpg 600w" sizes="100vw" /> 

<!-- would make sense, because sizes is static in layoutpixel defined (i.e: 600/300 = 2x): --> 
<img srcset="300.jpg 1x, 600.jpg 600w" sizes="300px" />

這意味着，如果你用W描述你自動售貨機也爲視網膜優化，您不需要使用額外的x描述符。（即：480瓦特2X =960瓦特）

Aditionaly，在使用AW描述符的大多數情況下，你的默認/備用圖像也應在srcset定義：

<img src="small.png" 
    srcset="small.png 480w, mediumg.png 640w, large.png 960w" 
    sizes="100vw" />

試respimage polyfill（dilettantish嘗試公佈我的填充工具）

來源

2014-11-14 19:13:57

謝謝你的澄清。突然間，我讀到的關於這個話題的很多博客文章對我來說更有意義，顯然有一些解釋了舊的和一些新的實現。我已經嘗試過你的polyfill並非常喜歡它（尤其是因爲智能圖像加載）。不幸的是，在這種情況下，我受到CMS以及固定圖像寬度規格（高度和寬度屬性）的限制。 – s2b

哦，這是不好的。用尺寸實現respimg在實踐中確實很難。您可能需要檢查lazysize width data-sizes =「auto」。只要您嘗試一下，您就可以使用* .dev.js版本，它會在控制檯中提供關於您的標記的一些提示。顯然，它只在ff，即safari中做到這一點。事實上，那裏有一些糟糕的教程。另外請記住respimage不僅「快」，大約80％的編碼時間用於修復bug，並且與pf相比改進了標準合成。 Thx for use ;-) –

「在同一srcset屬性中混合使用寬度描述符和像素密度描述符是無效的。」 [MDN]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img） –

你想要做什麼，可以通過圖片的標籤來實現：

<picture> 
 
    <source srcset="http://placehold.it/1400x600/e8117f/fff 1x, http://placehold.it/1400x600/e8117f/fff 2x" 
 
      media="(min-width: 1100px)" /> 
 
    <source srcset="http://placehold.it/700x300 1x, http://placehold.it/1400x600 2x" 
 
      media="(min-width: 720px)" /> 
 
    <source srcset="http://placehold.it/500x600/11e87f/fff 1x, http://placehold.it/1000x1200/11e87f/fff 2x" 
 
      media="(min-width: 450px)" /> 
 
    <img src="http://placehold.it/500x600/eee/ddd" 
 
     alt="image with artdirection" /> 
 
</picture>

來源

2016-04-27 21:38:23

HTML5 srcset：混合x和w語法

回答

相關問題