什麼是無法在移動設備上加載圖像的有效，高效且現代的方式？

Question

我已經遇到過這麼多次，總是用CSS和JS的組合來解決它，但隨着對響應圖像的支持越來越多，我一直在尋找更有說服力的解決方案。我只是試圖而不是加載移動圖像，同時保留語義（所以沒有CSS background-image），利用瀏覽器預加載（所以沒有JS懶惰加載）。

我該如何做到這一點？

Answer 1

TL;博士

使用srcset屬性與具有about:blank一個URL和1w寬度描述符，並設置sizes屬性的後備<source-size-value>到0vw圖像候選串。然後，添加CSS規則以隱藏較小視口的圖像。最後，將其包裝在<picture>與<source> s絕對控制。

---

srcset

在我看來，這可以通過響應的圖像和CSS位來解決。

考慮以下響應圖像：

儘管學生沒有回退<source-size-value>在sizes，foo-375.png仍然加載。所以看起來我們需要找到一個不會發送任何附加HTTP請求的圖像候選字符串。

我搜索了SO如何基本上設置一個空圖像候選字符串的提示。我發現了幾個方法，所有這些都可以像這樣實現：

<img 
    src="foo-585.png" 
    alt="foo" 
    srcset="[URL] 1w foo-375.png 375w, foo-585.png 585w" 
    sizes="(min-width: 1200px) 585px, (min-width: 768px) 375px, 0vw" 
> 

請注意，新的圖像候選字符串的1w寬度描述符和回退的0vw<source-size-value>加入。在這個例子中，是[URL]對於下面描述的URL之一的佔位符：

空片段

One answer建議使用空片段（#），爲valid選項。不幸的是，我的測試表明這種方法重複發送HTTP請求到當前的URL。不好。

微小的數據URL

Another answer建議Base64編碼的數據URL使用The Tiniest GIF Ever：

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs= 

起初，我以爲，在對自己58個字節，很少有機會對gzip壓縮的，它認爲將GIF保存爲具有較短URL的外部資源可能比多個數據URL更有效，但我錯了; gzip在早餐時吃這個數據URL的多個實例。

但是，如one comment指出的那樣，數據URL是slow on mobile。

沒有計劃，沒有主機，端口0

Yet another answer建議使用一個網址，沒有計劃，沒有主機和端口0（//:0）。這似乎工作，但有關於防火牆警告concerns。 CSS也需要隱藏破碎的圖像樣式。

about:blank

那評論者使用about:blank，這實際上似乎工作不夠好，但像最後的方法，確實需要CSS來隱藏破碎的形象造型建議：

img { 
    display: none; 
} 

@media (min-width: 768px) { 
    img { 
     display: inline-block; 
    } 
} 

對我來說，這似乎是最好的選擇，因爲它是有效的，高效的，並且不會顯示任何面向用戶的警告。那幾行CSS似乎對我很有價值。

<picture>

正如評論所指出的那樣，srcset不能保證。如果瀏覽器出於某種原因決定對您的about:blank圖像候選人，那麼解決方案就會崩潰。爲了解決這個問題，您的包裹在<img><picture>元素，並添加相關<source> S：用一個`srcset`

<picture> 
    <source 
     media="(min-width: 768px)" 
     srcset="[URL] 1w foo-375.png 375w, foo-585.png 585w" 
    > 
    <source srcset="about:blank"> 
    <img 
     src="foo-585.png" 
     alt="foo" 
     srcset="[URL] 1w foo-375.png 375w, foo-585.png 585w" 
     sizes="(min-width: 1200px) 585px, (min-width: 768px) 375px, 0vw" 
    > 
</picture>