回應式圖片

本程式碼研究室是 Google Developers 培訓小組所開發的「開發漸進式網路應用程式」訓練課程。這個課程將逐步介紹程式碼研究室，讓您充分發揮本課程的效益。

如需本課程的完整詳細資料，請參閱開發漸進式網路應用程式總覽。

引言

本研究室說明如何讓你的網頁在各種裝置上呈現良好效果。

課程內容

  • 如何將圖片調整為回應式格式，並符合多種板型規格的大小調整尺寸
  • 如何使用 srcset 和 sizes 顯示適用於可視區域寬度的合適圖片
  • 如何將 picture 和 source 與媒體查詢搭配使用，讓系統在視窗調整大小時自動放大網頁上的圖片

注意事項

  • 基本 HTML 和 CSS

您需要準備的項目

  • 文字編輯器
  • 具備終端機/殼層存取權的電腦

從 GitHub 下載或複製 pwa-training-labs 存放區，並視需求安裝 Node.js LTS 版。

如果您沒有偏好的本機開發伺服器，請安裝 Node.js http-server 套件：

npm install http-server -g

瀏覽至 responsive-images-lab/app/ 目錄並啟動伺服器：

cd responsive-images-lab/app
http-server -p 8080 -a localhost -c 0

您隨時可以透過 Ctrl-c 終止伺服器。

開啟瀏覽器並前往 localhost:8080/。

注意：請取消註冊所有 Service Worker，並清除 localhost 的所有服務工作站快取，以免它們幹擾研究室。在 Chrome 開發人員工具中，您可以在「應用程式」分頁的「清除儲存空間」部分中按一下 [清除網站資料]，藉此清除設定檔資料。

如果您的文字編輯器可讓您開啟專案，請開啟 responsive-images-lab/app/ 資料夾。以便讓一切井然有序。如果不是，則請在電腦的檔案系統中開啟資料夾。您要建立研究室的 app/ 資料夾。

這個資料夾包含以下內容：

  • 「images」資料夾包含範例圖片，每個圖片都有多種不同的解析度
  • 「index.html」是範例網站/應用程式的主要 HTML 網頁
  • styles/main.css 是範例網站的層疊式樣式表

將圖片設為回應式前，請先確定圖片不會讓螢幕溢位。

使用以下程式碼取代 styles/main.css 中的 TODO 2：

img {
  max-width: 100%;
}

在瀏覽器中儲存程式碼，然後重新整理網頁。請調整視窗大小。圖片寬度應完全保留在視窗中。

說明

max-width 中的值代表包含元素的百分比，在本例中為 article 元素。

注意：您也可以使用 vw 單位 (例如 100vw) 指定可視區域寬度的 max-width。在這種情況下，我們會使用百分比值來讓圖片與文字保持相同寬度。

目的是讓瀏覽器擷取最小版本，且尺寸仍大於圖片的最終顯示大小。srcset 可讓我們依據不同解析度列出一組圖片，讓瀏覽器在擷取圖片時可選擇。瀏覽器的選擇取決於可視區域維度、相對於可視區域的圖片大小、使用者裝置的像素密度，以及來源檔案尺寸。

在圖片中加入 srcset

如要在 index.html 中完成 TODO 3.1，請將下列 srcset 屬性新增至包含 SFO 圖片的 img 元素：

srcset="images/sfo-1600_large.jpg, images/sfo-1000_large.jpg, images/sfo-800_medium.jpg, images/sfo-500_small.jpg"

在瀏覽器中儲存程式碼，然後重新整理網頁。開啟瀏覽器的開發人員工具，並查看網路要求。請嘗試以不同的視窗大小重新整理頁面。您應該會看到瀏覽器正在擷取 images/sfo-1600_large.jpg，無論視窗大小為何。

說明

「images/」資料夾中有多個 SFO 圖片，每個版本都有不同的解析度。我們會在 srcset 屬性中列出這些屬性，讓瀏覽器可以選擇要使用的檔案。不過，瀏覽器在載入檔案前無法決定檔案大小，因此一律會選擇清單中的第一張圖片。

在 srcset 中新增寬度描述元

如要根據可視區域寬度載入正確的圖片大小，我們需要先在瀏覽器上擷取每個檔案的大小，再擷取檔案。

如要在 index.html 中完成 TODO 3.2，請在 SFO img 元素中加入寬度描述元：

srcset="images/sfo-1600_large.jpg 1600w, images/sfo-1000_large.jpg 1000w, images/sfo-800_medium.jpg 800w, images/sfo-500_small.jpg 500w"

在瀏覽器中儲存程式碼，然後重新整理網頁。重新整理網頁以各種視窗大小顯示，並檢查網路請求，看看系統如何擷取各大小的圖片版本。在 1x 螢幕上，瀏覽器會在視窗小於 500 像素時擷取 sfo-500_small.jpg，在小於 800 像素時擷取 sfo-800_medium.jpg，依此類推。

注意：如果瀏覽器 (HTTP) 快取中有較新版本的圖片，有些瀏覽器可能會載入該圖片，即使該圖片不是 srcset 指定的圖片 (這是因為瀏覽器是否已在本機儲存解析度較高的圖片，何不使用這些圖片呢？)。如要在研究室中停用這項功能，請務必在開發人員工具中停用 HTTP 快取。

注意：在 Chrome 中開啟 DevTools 時，瀏覽器視窗會調整大小，如下所示 (請參閱下圖)。這項功能在程式碼研究室中十分實用。

chrome-dimensions.png

說明

為 srcset 中的每個檔案加上寬度描述元，系統就會在將圖片擷取到「之前」告訴瀏覽器每個圖片的寬度 (以像素為單位)。然後，瀏覽器可以使用這些寬度，根據視窗的大小來決定要擷取的圖片。系統擷取圖片時，寬度下限仍大於可視區域寬度。

注意：您也可以視需要指定像素密度，而非寬度。不過，您無法在同一個 srcset 屬性中同時指定像素密度和寬度。我們將在稍後的章節中說明使用像素密度。

在可視區域寬度的一半 (50vw) 顯示圖片

使用以下程式碼取代 styles/main.css 中的 TODO 4.1：

img#sfo {
  transition: width 0.5s;
  max-width: 50vw;
}

在瀏覽器中儲存程式碼，然後重新整理網頁。請嘗試以不同的視窗大小重新整理網頁，並檢查各大小的網路要求。瀏覽器所擷取的圖片大小與之前相同。

說明

由於 CSS 在執行階段的 HTML 經過剖析後，瀏覽器無法得知擷取圖片時，最終顯示的圖片大小為何。除非另外說明，否則瀏覽器會假設圖片會以可視區域寬度 100% 顯示，並依據這項資訊擷取圖片。如果圖片要以不同尺寸顯示，我們就必須事先告知瀏覽器。

在圖片中新增尺寸屬性

我們可以提供 img sizes 屬性，用來在擷取圖片前，讓瀏覽器顯示圖片的顯示大小。

如要在 index.html 中完成 TODO 4.2，請將 sizes="50vw" 加入 img 元素，如下所示：

<img id="sfo" src="images/sfo-500_small.jpg" srcset="images/sfo-1600_large.jpg 1600w, images/sfo-1000_large.jpg 1000w, images/sfo-800_medium.jpg 800w, images/sfo-500_small.jpg 500w" sizes="50vw" alt="View from aircraft window near San Francisco airport">

在瀏覽器中儲存程式碼，然後重新整理網頁。以不同視窗大小重新整理頁面，並每次檢查網路要求。您應該會看到，您用於測試上一個步驟的約略視窗大小，瀏覽器會擷取較小的圖片。

說明

sizes 值與 CSS 中的圖片 max-width 值相符。瀏覽器現在已提供選擇正確圖片版本所需的一切功能。瀏覽器知道使用者裝置的可視區域寬度和像素密度，因此我們提供來源檔案 (使用寬度描述元) 和相對於可視區域的圖片大小 (使用 sizes 屬性)。

瞭解詳情

在 CSS 中新增媒體查詢

我們可以使用媒體查詢，根據可視區域寬度即時調整圖片大小。

將 styles/main.css 中的 TODO 5.1 替換為下列程式碼：

@media screen and (max-width: 700px) {
  img#sfo {
    max-width: 90vw;
    width: 90vw;
  }
}

在瀏覽器中儲存程式碼，然後重新整理網頁。將視窗縮減為小於 700 像素 (在 Chrome 中，如果 [開發人員工具] 開啟，可視區域維度將顯示在螢幕上)。請務必調整圖片大小，填滿視窗寬度的 90%。

說明

媒體查詢會測試螢幕的可視區域寬度，如果可視區域的寬度小於 700 像素，則會套用 CSS。

瞭解詳情

將媒體查詢新增至大小屬性

我們可以告訴瀏覽器 sizes 屬性中的媒體查詢，進而在圖片變更大小時，擷取正確的圖片。

如要在 index.html 中完成 TODO 5.2，請更新 SFO 圖片中的 sizes 屬性：

sizes="(max-width: 700px) 90vw, 50vw"

在瀏覽器中儲存程式碼，然後重新整理網頁。將瀏覽器視窗調整為寬 600 像素。在 1x 螢幕上，瀏覽器應該擷取 sfo-800_medium.jpg。

我們可以使用 picture 元素和 source 元素搭配媒體查詢，在視窗大小改變時變更圖片來源。

使用以下程式碼取代 index.html 中的 TODO 6：

<figure>
    <picture>
    <source media="(min-width: 750px)"
            srcset="images/horses-1600_large_2x.jpg 2x,
                    images/horses-800_large_1x.jpg" />
    <source media="(min-width: 500px)"
            srcset="images/horses_medium.jpg" />
    <img src="images/horses_small.jpg" alt="Horses in Hawaii">
    </picture>
    <figcaption>Horses in Hawaii</figcaption>
</figure>

在瀏覽器中儲存程式碼，然後重新整理網頁。請調整瀏覽器視窗的大小。你應該會在 750 像素和 500 像素看到圖片變更。

說明

picture 元素可讓我們使用 source 標記定義多個來源檔案。這與僅使用 srcset 屬性的 img 標記不同，因為此標記可讓我們為每一組來源新增媒體查詢。我們不用定義瀏覽器的大小，並且讓瀏覽器決定要使用哪些檔案，我們可以定義每個視窗大小所要使用的圖片。

我們提供了多個範例圖片，每個版本都有不同的解析度，且經過裁剪後可縮小圖片的焦點。在上述程式碼中，大於 750 像素時，瀏覽器會擷取 horses-1600_large_2x.jpg (如果裝置的螢幕為 2 倍) 或 horses-800_large_1x.jpg。如果視窗寬度小於 750 像素但大於 500 像素，瀏覽器就會擷取 horses_medium.jpg。瀏覽器會在 500 像素內擷取備用圖片 horses_small.jpg。

注意：如果使用者的瀏覽器不支援 picture 元素，則會擷取 img 元素中的任何內容。picture 元素僅用於為其中的 img 元素指定多個來源。img 元素是顯示圖片的內容。

瞭解詳情

你已瞭解如何讓網頁上的圖片在各種裝置上都能正常顯示！

資源

瞭解自動化程序

進一步瞭解 srcset 和 size

進一步瞭解藝術方向

如要查看 PWA 訓練課程的所有程式碼研究室課程，請參閱歡迎程式碼研究室課程。