Je code donc je suis là.

0%

RWD 圖片選擇的 Html 屬性

Posted on Edited on In

RWD (responsive web design）中文為「響應式設計」簡單來說就是網頁會依照我們使用的載具(電腦、平版、手機)的螢幕大小與螢幕的像素密度不同，而顯示指定的圖片圖像。
而針對 RWD 中的網頁圖像的處理，我們稱為是響應式圖片(responsive image)，使用 JS 或是 CSS 都可以操控要顯示的圖像，但使用具有語義性的 HTML 方法與屬性，可以讓瀏覽器原生就支援這個功能。

如果只是把一張圖片以<img>包起來，如<img src="paris.png">，那麼在手機或是在桌上型電腦上瀏覽時都會出現「同一張」paris.png的圖片。使用同意張圖片，卻要給不同的載據顯示，可能造成的問題會是在大螢幕瀏覽這張圖時解析度可能不夠、在手機上瀏覽這張圖時，會因為過大而顯示很慢。這時依照載具的條件不同，來載入相對應的圖像就變得很重要。

HTML 提供了多個方法與屬性，讓我們可以在「響應式設計」上更彈性，以下是幾個常用的屬性。

srcset 螢幕的像素密度選擇

一般的桌上型顯示器是單倍像素密度，而手機的螢幕往往是多倍像素密度，就是多個像素合成為一個像素，也稱為 Retina 。有時圖像在桌上型顯示器看很清晰，但從手機上看會有點模糊，因為大部分的手機螢幕像素的像素密度有可能是 1.5 或是 2 倍，所以在手機上圖像像素被擴充放大了。

這時如果我們希望依不同的載具來顯示不同大小的圖片與像素密度，<img>的屬性srcset 就可派上用場。srcset屬性用來指定多張圖像，來適應不同像素密度的螢幕，語法為<img srcset="[圖像][像素密度描述符]">，不同的尺寸以逗點隔開。圖像後面的像素密度描述符，格式是像素密度倍數 + 字母 x。1x 表示單倍像素密度，可以省略。

1
2
3
4
<img srcset="paris-320w.png,
             paris-480w.png 1.5x,
             paris-640w.png 2x"
      src="paris-640w.png" >

瀏覽器會依照當前螢幕設備的像素密度，去選擇載入的圖像，如果srcset屬性都沒有符合的條件，那麼就會去載入src的圖像。

srcset + sizes 屬性 = 圖像大小的選擇

想要依照螢幕的「像素密度」和「螢幕大小」顯示載入的圖像，就必須加上sizes 屬性，使用時必須在不同的圖像後加上「寬度描述符」。
「寬度描述符」其實就是圖像原始的寬度，再加上代表寬度的w。所以在paris-320.png 320w裡的320w表示這張圖像的原始寬度為 320。

1
2
3
4
5
6
7
8
<img srcset="paris-320.png 320w,
             paris-480.png 480w,
             paris-640.png 640w,
             paris-1280.png 1280w"
      sizes="(max-width: 440px) 100vw,
             (max-width: 800px) 33vw,
             320px"
      src="paris-1280w.png" >

sizes屬性會列出不同載據的圖像顯示寬度，語法：sizes="([媒體查詢表達式]) [圖像的顯示寬度]。
(max-width: 440px) 100vw＝ 如果載具的螢幕最大寬度是(不超過) 440px，圖像顯示寬度就為 100％。
(max-width: 800px) 33vw＝ 載具螢幕寬度 441~800px，圖像顯示寬度就為 33％。
最後一個320px即是載具螢幕寬度為 800px 以上，圖像顯示寬度就為 320px。

小測試

問題 - What is the meaning of the “800px” value below?
“800px” 在下列程式碼中代表什麼？

1
2
3
4
5
6
7
8
9
<img
  srcset="
    https://i.imgur.com/wdpNu4W.jpeg 480w,
    https://i.imgur.com/mY3Cz2I.jpg  800w
  "
  sizes="(max-width:600px) 480px, 800px"
  src="https://i.imgur.com/JiVQRCg.jpg"
  alt=""
/>

答案：如果螢幕大小最大是 600px 就把圖片寬度以 480px 顯示，600px 以上就顯示 800px。答對了嗎？

後記：每一個語言和技術都會有新的語法和擴充功能，雖然 HTML 和 CSS 用了這麼多年，但每次碰到這些問題，都還是覺得自己所學不足，所以特地記錄一下。

參考：