如何使用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將提供後備圖像。