Google 會運用 AI 技術將內容翻譯成你偏好的語言，但可能會出錯。

回應式圖片

一張相片勝過千言萬語，圖片是每個網頁不可或缺的一部分。但通常也占了下載位元組的大部分。回應式網頁設計不僅能根據裝置特性調整版面配置，還能調整圖片。

Pete LePage

回應式網頁設計不只代表版面配置會根據裝置特性而改變，內容也會隨之調整。舉例來說，在高解析度 (2x) 螢幕上，高解析度圖形可確保清晰度。如果瀏覽器寬度為 800 像素，寬度為 50% 的圖片可能可以正常運作，但在窄版手機上會占用過多空間，而且縮小至適合較小螢幕時，需要相同的頻寬負擔。

美術指導

有時可能需要大幅調整圖片，例如變更比例、裁剪，甚至更換整張圖片。在這種情況下，變更圖片通常稱為藝術指導。如需更多範例，請參閱 responsiveimages.org/demos/。

回應式圖片

你知道嗎？載入網頁所需的位元組中，平均有超過 60% 來自圖片。

在本課程中，您將瞭解如何在現代網路上使用圖片，讓圖片在任何裝置上都能呈現精美外觀，並快速載入。

在這個過程中，您將學到各種技能和技巧，順利將回應式圖片整合至開發工作流程。課程結束時，您將能開發可配合不同可視區域大小和使用情境調整及回應的圖片。

這是 Udacity 提供的免費課程

參加課程

標記中的圖片

img 元素功能強大，可下載、解碼及算繪內容，而且新式瀏覽器支援多種圖片格式。在跨裝置上加入圖片與在電腦上加入圖片並無不同，只需進行一些微調，即可打造良好的體驗。

摘要

圖片請使用相對大小，避免意外溢出容器。
如要根據裝置特性指定不同圖片 (又稱美術指導)，請使用 picture 元素。
在 img 元素中使用 srcset 和 x 描述元，提示瀏覽器在選擇不同密度時，應使用哪張圖片。
如果網頁只有一兩張圖片，且這些圖片未用於網站其他位置，建議使用內嵌圖片，減少檔案要求。

使用相對大小的圖片

指定圖片寬度時，請記得使用相對單位，以免圖片不小心超出可視區域。舉例來說，width: 50%; 會使圖片寬度為包含元素寬度的 50% (而非可視區域的 50% 或實際像素大小的 50%)。

由於 CSS 允許內容溢出容器，因此您可能需要使用 max-width: 100% 來防止圖片和其他內容溢出。例如：

img, embed, object, video {
    max-width: 100%;
}

請務必透過 img 元素的 alt 屬性提供有意義的說明，為螢幕閱讀器和其他輔助技術提供背景資訊，讓網站更易於使用。

使用 `srcset` 強化高 DPI 裝置的 `img`

srcset 屬性可強化 img 元素的行為，輕鬆為不同裝置特性提供多個圖片檔。與 CSS 原生的 image-set CSS 函式類似，srcset 可讓瀏覽器根據裝置特性選擇最佳圖片，例如在 2x 螢幕上使用 2x 圖片，未來也可能在頻寬有限的網路上，在 2x 裝置上使用 1x 圖片。

<img src="photo.png" srcset="photo@2x.png 2x" ...>

如果瀏覽器不支援 srcset，則會直接使用 src 屬性指定的預設圖片檔。因此，請務必一律加入 1x 圖片，確保任何裝置都能顯示圖片，無論裝置功能為何。如果支援 srcset，系統會在提出任何要求前，剖析以逗號分隔的圖片/條件清單，並只下載及顯示最合適的圖片。

雖然條件可以包含從像素密度到寬度和高度的所有內容，但目前只有像素密度受到良好支援。如要兼顧目前的行為和未來功能，請在屬性中提供 2 倍大小的圖片。

使用 `picture` 調整回應式圖片的藝術指導

如要根據裝置特性變更圖片 (也稱為藝術指導)，請使用 picture 元素。picture 元素定義了宣告式解決方案，可根據不同特性 (例如裝置大小、裝置解析度、螢幕方向等) 提供多個版本的圖片。

注意： picture 元素已開始在瀏覽器中推出。雖然並非所有瀏覽器都支援這個屬性，但由於其強大的回溯相容性，以及可使用 Picturefill polyfill，我們仍建議使用。詳情請參閱 ResponsiveImages.org 網站。

如果圖片來源有多種密度，或回應式設計在某些類型的螢幕上需要顯示略有不同的圖片，請使用 picture 元素。與 video 元素類似，您可以加入多個 source 元素，以便根據媒體查詢或圖片格式指定不同的圖片檔案。

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

試試看

在上述範例中，如果瀏覽器寬度至少為 800 像素，則會根據裝置解析度使用 head.jpg 或 head-2x.jpg。如果瀏覽器介於 450 像素和 800 像素之間，則會使用 head-small.jpg 或 head-small- 2x.jpg，同樣取決於裝置解析度。如果螢幕寬度小於 450 像素，且為了回溯相容而不支援 picture 元素，瀏覽器會改為算繪 img 元素，因此應一律包含該元素。

相對大小的圖片

如果無法得知圖片的最終大小，可能就很難為圖片來源指定密度描述元。如果圖片寬度會依瀏覽器大小等比例縮放，就更需要這麼做。

您可以指定每張圖片的大小，方法是新增寬度描述元和圖片元素的大小，而不是提供固定的圖片大小和密度，讓瀏覽器自動計算有效的像素密度，並選擇要下載的最佳圖片。

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

試試看

上述範例會顯示寬度為可視區域一半 (sizes="50vw") 的圖片，並根據瀏覽器的寬度和裝置像素比例，讓瀏覽器選擇正確的圖片，無論瀏覽器視窗有多大。舉例來說，下表顯示瀏覽器會選擇哪張圖片：

瀏覽器寬度	裝置像素比例	使用的圖片	有效解析度
400px	1	`200.jpg`	1x
400px	2	`400.jpg`	2 倍
320px	2	`400.jpg`	2.5 倍
600px	2	`800.jpg`	2.67 倍
640px	3	`1000.jpg`	3.125 倍
1100px	1	`800.png`	1.45 倍

考量回應式圖片中的中斷點

在許多情況下，圖片大小可能會因網站的版面配置中斷點而異。舉例來說，在小螢幕上，您可能希望圖片橫跨整個可視區域寬度，但在大螢幕上，圖片應只占一小部分。

<img src="400.png"
     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
     srcset="100.png 100w, 200.png 200w, 400.png 400w,
             800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">

試試看

在上述範例中，sizes 屬性使用多個媒體查詢來指定圖片大小。當瀏覽器寬度大於 600 像素時，圖片會是可視區域寬度的 25%；介於 500 像素和 600 像素之間時，圖片會是可視區域寬度的 50%；低於 500 像素時，圖片會是完整寬度。

讓產品圖片可展開

J. Crews 網站，含有可展開的產品圖片 — J. Crew 的網站，其中包含可展開的產品圖片。

消費者想看到自己購買的商品。在零售網站上，使用者希望能夠查看產品的高解析度特寫，以便更清楚地瞭解細節，如果無法做到，研究參與者會感到沮喪。

J. Crew Crew 網站。消失的疊加層表示圖片可輕觸，提供放大的圖片，並顯示精細細節。

其他圖片技術

壓縮圖片

壓縮圖片技術會向所有裝置提供高度壓縮的 2x 圖片，無論裝置的實際功能為何。視圖片類型和壓縮程度而定，圖片品質可能不會改變，但檔案大小會大幅縮減。

試試看

JavaScript 圖片替換

JavaScript 圖片替換功能會檢查裝置的功能，並「採取適當行動」。您可以透過 window.devicePixelRatio 判斷裝置像素比例、取得螢幕寬度和高度，甚至可能透過 navigator.connection 或發出假要求，進行網路連線探查。收集完所有資訊後，您就可以決定要載入哪張圖片。

這個方法的一大缺點是，使用 JavaScript 意味著您至少要等到預先剖析器完成後，才能載入圖片。也就是說，在 pageload 事件觸發前，圖片甚至不會開始下載。此外，瀏覽器很可能會同時下載 1x 和 2x 圖片，導致網頁權重增加。

內嵌圖片：光柵和向量

建立及儲存圖片的方式有兩種，這會影響您部署圖片的回應方式。

光柵圖片：例如相片和其他圖片，以個別彩色點的網格表示。光柵圖片可能來自相機或掃描器，或使用 HTML 畫布元素建立。PNG、JPEG 和 WebP 等格式用於儲存光柵圖片。

向量圖片 (例如標誌和線條藝術) 是由一組曲線、線條、形狀、填滿顏色和漸層所定義。向量圖片可使用 Adobe Illustrator 或 Inkscape 等程式建立，或使用 SVG 等向量格式手寫程式碼。

SVG

SVG 可讓您在網頁中加入回應式向量圖形。向量檔案格式相較於光柵檔案格式的優點，在於瀏覽器可以算繪任何大小的向量圖片。向量格式會描述圖片的幾何圖形，也就是圖片如何由線條、曲線和顏色等構成。另一方面，光柵格式只包含個別顏色點的資訊，因此瀏覽器在縮放時必須猜測如何填補空白。

下圖是同一張圖片的兩個版本：左側是 PNG 圖片，右側是 SVG 圖片。SVG 在任何大小下看起來都很棒，而旁邊的 PNG 在較大的顯示大小下開始模糊。

如要減少網頁提出的檔案要求數量，可以使用 SVG 或資料 URI 格式，以內嵌方式編寫圖片程式碼。如果查看這個網頁的原始碼，會發現下方兩個標誌都是內嵌宣告：資料 URI 和 SVG。

SVG 在行動裝置和電腦上都支援良好，且最佳化工具可大幅縮減 SVG 大小。以下兩個內嵌 SVG 標誌看起來一模一樣，但一個約 3 KB，另一個只有 2 KB：

資料 URI

這是一種納入圖片等檔案的方法，只要按照下列格式將 img 元素的 src 設為 Base64 編碼字串，即可內嵌圖片：

<img src="data:image/svg+xml;base64,[data]">

上述 HTML5 標誌的程式碼開頭如下所示：

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">

(完整版本超過 5000 個字元！)

您可以使用 jpillora.com/base64-encoder 等拖曳工具，將圖片等二進位檔案轉換為資料 URI。與 SVG 相同，行動裝置和電腦版瀏覽器也支援資料 URI。

CSS 內嵌

資料 URI 和 SVG 也可以內嵌在 CSS 中，行動裝置和電腦都支援這種做法。以下是兩個外觀相同的圖片，在 CSS 中實作為背景圖片；一個是資料 URI，一個是 SVG：

內嵌的優缺點

圖片的內嵌程式碼可能很冗長，尤其是資料 URI，那麼為什麼要使用這種程式碼呢？減少 HTTP 要求！SVG 和資料 URI 可讓整個網頁 (包括圖片、CSS 和 JavaScript) 透過單一要求擷取。

缺點：

在行動裝置上，資料 URI 的顯示速度可能比外部 src 的圖片慢得多。
資料 URI 可能會大幅增加 HTML 要求的大小。
這會增加標記和工作流程的複雜度。
資料 URI 格式比二進位檔大得多 (最多 30%)，因此不會減少總下載大小。
資料 URI 無法快取，因此每次使用時都必須下載。
IE 6 和 7 不支援，IE 8 則不完全支援。
使用 HTTP/2 時，減少素材資源要求數量的重要性會降低。

如同所有回應式廣告，您需要測試哪種做法最有效。使用開發人員工具，評估下載檔案大小、要求數量和總延遲時間。資料 URI 有時適用於光柵圖片，例如在只有一兩張相片且未在其他地方使用的首頁上。如需內嵌向量圖片，SVG 是更好的選擇。

CSS 中的圖片

CSS background 屬性是強大的工具，可將複雜的圖片加入元素，輕鬆新增多張圖片，並讓圖片重複等。與媒體查詢搭配使用時，背景屬性會變得更強大，可根據螢幕解析度、可視區域大小等條件載入圖片。

摘要

根據螢幕特性 (例如螢幕大小、裝置解析度和網頁版面配置)，使用最合適的圖片。
使用 min-resolution 和 -webkit-min-device-pixel-ratio 的媒體查詢，變更 CSS 中高 DPI 螢幕的 background-image 屬性。
除了標記中的 1x 圖片外，請使用 srcset 提供高解析度圖片。
使用 JavaScript 圖片替換技術，或向低解析度裝置提供高度壓縮的高解析度圖片時，請考量效能成本。

使用媒體查詢，依條件載入圖片或美術指導

媒體查詢不僅會影響網頁版面配置，還能用來根據可視區域寬度，有條件地載入圖片或提供美術指導。

舉例來說，在下方範例中，較小的螢幕只會下載 small.png 並套用至內容 div，而較大的螢幕則會將 background-image: url(body.png) 套用至內文，並將 background-image: url(large.png) 套用至內容 div。

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

試試看

使用 image-set 提供高解析度圖片

CSS 中的 image-set() 函式可強化 background 屬性的行為，讓您輕鬆為不同裝置特性提供多個圖片檔案。這樣一來，瀏覽器就能根據裝置特性選擇最合適的圖片，例如在 2x 螢幕上使用 2x 圖片，或在頻寬有限的網路上使用 1x 圖片。

background-image: image-set(
    url(icon1x.jpg) 1x,
    url(icon2x.jpg) 2x
);

除了載入正確的圖片外，瀏覽器也會相應縮放圖片。換句話說，瀏覽器會假設 2x 圖片的大小是 1x 圖片的兩倍，因此會將 2x 圖片縮小 2 倍，讓圖片在頁面上顯示的大小相同。

image-set() 支援功能仍是新功能，僅支援 Chrome 和 Safari，且含有 -webkit 供應商前置字元。請務必加入備用圖片，以便在不支援 image-set() 時使用，例如：

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
  background-image: image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
}

試試看

上述程式碼會在支援 image-set 的瀏覽器中載入適當的素材資源，否則會改用 1x 素材資源。顯而易見的缺點是，雖然 image-set() 瀏覽器支援度較低，但大多數瀏覽器都會取得 1x 素材資源。

使用媒體查詢提供高解析度圖片或美術指導

媒體查詢可根據裝置像素比例建立規則，為 2x 和 1x 螢幕指定不同的圖片。

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
    /* High dpi styles & resources here */
}

Chrome、Firefox 和 Opera 都支援標準 (min-resolution: 2dppx)，而 Safari 和 Android 瀏覽器則需要使用不含 dppx 單位的舊版供應商前置語法。請注意，只有在裝置符合媒體查詢時，系統才會載入這些樣式，而且您必須指定基本案例的樣式。如果瀏覽器不支援解析度專用的媒體查詢，這種做法也能確保系統會算繪某些內容。

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
}

@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */
{
  .sample {
    background-size: contain;
    background-image: url(icon2x.png);
  }
}

試試看

您也可以使用 min-width 語法，根據可視區域大小顯示替代圖片。這項技術的優點是，如果媒體查詢不相符，就不會下載圖片。舉例來說，只有在瀏覽器寬度為 500px 以上時，系統才會下載 bg.png 並套用至 body：

@media (min-width: 500px) {
    body {
    background-image: url(bg.png);
    }
}

使用 SVG 格式的圖示

在網頁中加入圖示時，請盡可能使用 SVG 圖示，或在某些情況下使用萬國碼 (Unicode) 字元。

摘要

圖示請使用 SVG 或 Unicode，而非光柵圖片。

以 Unicode 取代簡易圖示

許多字型都支援各種 Unicode 字元，可用來取代圖片。與圖片不同，Unicode 字型可妥善縮放，無論在螢幕上顯示的大小為何，看起來都很美觀。

除了正常字元集外，Unicode 還可能包含箭頭 (←)、數學運算子 (√)、幾何形狀 (★)、控制圖片 (▶)、音樂符號 (♬)、希臘字母 (Ω)，甚至是西洋棋棋子 (♞) 的符號。

加入萬國碼 (Unicode) 字元的方式與命名實體相同：&#XXXX，其中 XXXX 代表萬國碼 (Unicode) 字元編號。例如：

You're a super &#9733;

你是超級 ★

以 SVG 取代複雜圖示

如果圖示需求較複雜，SVG 圖示通常輕巧、易於使用，且可使用 CSS 設定樣式。SVG 比光柵圖片有許多優點：

這些是可無限縮放的向量圖形。
CSS 效果 (例如顏色、陰影、透明度和動畫) 相當簡單。
SVG 圖片可以直接內嵌在文件中。
它們是語義。
使用適當的屬性，提供更完善的無障礙功能。

With SVG icons, you can either add icons using inline SVG, like
this checkmark:
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       width="32" height="32" viewBox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
  </svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.

試試看

謹慎使用圖示字型

圖示字型很受歡迎，而且容易使用，但與 SVG 圖示相比，有一些缺點：

這類向量圖形可無限縮放，但可能會經過反鋸齒處理，導致圖示不如預期清晰。
CSS 樣式有限。
視行高、字母間距等因素而定，要達到像素完美的定位可能很困難。
這類元素不具語意，可能難以搭配螢幕閱讀器或其他輔助技術使用。
如果沒有適當設定範圍，即使只使用一小部分圖示，也可能導致檔案過大。

With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

試試看

市面上有數百種免費和付費圖示字型，包括 Font Awesome、Pictos 和 Glyphicons。

請務必在額外 HTTP 要求和檔案大小的權重，與圖示需求之間取得平衡。舉例來說，如果您只需要幾個圖示，建議使用圖片或圖片精靈。

最佳化圖片效能

圖片通常占下載位元組的大部分，也往往占據網頁上大量的視覺空間。因此，最佳化圖片通常可以為網站節省大量位元組並提升效能：瀏覽器需要下載的位元組越少，用戶端頻寬的競爭就越少，瀏覽器下載及顯示所有素材資源的速度就越快。

摘要

請勿隨意選擇圖片格式，而是要瞭解各種可用格式，並使用最合適的格式。
在工作流程中加入圖片最佳化和壓縮工具，縮減檔案大小。
將常用圖片放入圖片精靈，減少 HTTP 要求數量。
如要縮短初始網頁載入時間並降低初始網頁權重，建議只在圖片捲動到檢視畫面後才載入。

選擇合適的格式

您需要考量兩種圖片類型：向量圖片和光柵圖片。如果是光柵圖片，您也需要選擇正確的壓縮格式，例如：GIF、PNG、JPG。

光柵圖片 (例如相片和其他圖片) 會以個別點或像素的格線表示。光柵圖片通常來自相機或掃描器，也可以使用 canvas 元素在瀏覽器中建立。圖片尺寸越大，檔案大小也會越大。如果將光柵圖片放大到超過原始大小，圖片會變得模糊，因為瀏覽器需要猜測如何填補缺少的像素。

向量圖片 (例如標誌和線條藝術) 是由一組曲線、線條、形狀和填滿顏色定義。向量圖片是使用 Adobe Illustrator 或 Inkscape 等程式建立，並儲存為向量格式，例如 SVG。由於向量圖片是以簡單的原型建構而成，因此可以縮放，而不會降低品質或變更檔案大小。

選擇適當格式時，請務必考量圖片來源 (光柵或向量) 和內容 (顏色、動畫、文字等)。沒有任何一種格式適用於所有圖片類型，每種格式各有優缺點。

選擇合適的格式時，請先參考下列指南：

JPG 適用於攝影圖片。
SVG 適用於向量藝術和純色圖片，例如標誌和線條藝術。如果沒有向量圖，請嘗試 WebP 或 PNG。
請使用 PNG，而非 GIF，因為前者可提供更多顏色，且壓縮率較高。
如要製作較長的動畫，建議使用 <video>，因為這種格式可提供更佳的圖片品質，並讓使用者控制播放。

縮減檔案大小

儲存圖片後，您可以透過「後製」大幅縮減圖片檔案大小。市面上有許多圖片壓縮工具，包括有損和無損、線上、GUI、指令列等。建議盡可能自動執行圖片最佳化作業，將其納入工作流程。

您可以使用多種工具，對 JPG 和 PNG 檔案進行進一步的無損壓縮，而不會影響圖片品質。如果是 JPG，請嘗試 jpegtran 或 jpegoptim (僅適用於 Linux，請使用 --strip-all 選項執行)。如果是 PNG，請嘗試 OptiPNG 或 PNGOUT。

使用圖片精靈

CSS 合併圖片是一種將多張圖片合併成單一「精靈圖」的技術。接著，您可以指定元素的背景圖片 (精靈圖)，並加上偏移量來顯示正確的部分，藉此使用個別圖片。

.sprite-sheet {
  background-image: url(sprite-sheet.png);
  width: 40px;
  height: 25px;
}

.google-logo {
  width: 125px;
  height: 45px;
  background-position: -190px -170px;
}

.gmail {
  background-position: -150px -210px;
}

.maps {
  height: 40px;
  background-position: -120px -165px;
}

試試看

Sprite 的優點是可減少取得多張圖片所需的下載次數，同時仍可啟用快取。

考慮延遲載入

如果長網頁在不需捲動位置包含許多圖片，延遲載入功能可視需要載入圖片，或在主要內容載入及算繪完成後再載入圖片，大幅加快載入速度。除了提升效能，使用延遲載入功能還能打造無限捲動體驗。

建立無限捲動網頁時請務必小心，因為內容是在顯示時才載入，搜尋引擎可能永遠不會看到這些內容。此外，如果使用者想在頁尾尋找資訊，由於系統會持續載入新內容，因此他們永遠看不到頁尾。

完全避免使用圖片

有時，最適合的圖片其實根本不是圖片。請盡可能使用瀏覽器的原生功能，提供相同或類似的功能。瀏覽器會生成先前需要圖片才能呈現的視覺效果。這表示瀏覽器不再需要下載個別圖片檔，因此可避免圖片縮放不當。您可以使用萬國碼 (Unicode) 或特殊圖示字型來顯示圖示。

將文字放在標記中，而非嵌入圖片

請盡可能以文字形式呈現文字，而非嵌入圖片中。舉例來說，如果將圖片用於標題，或直接在圖片中加入聯絡資訊 (例如電話號碼或地址)，使用者就無法複製及貼上資訊，螢幕閱讀器也無法存取資訊，而且不具回應性。請改為在標記中加入文字，並視需要使用網路字型來達到所需樣式。

使用 CSS 取代圖片

新式瀏覽器可以使用 CSS 功能建立樣式，而這些樣式在過去需要圖片才能建立。例如：您可以使用 background 屬性建立複雜的漸層、使用 box-shadow 建立陰影，以及使用 border-radius 屬性新增圓角。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque porta ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Fusce placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis ornare fringilla dui non vehicula. In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.

<style>
    div#noImage {
    color: white;
    border-radius: 5px;
    box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
    background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
    }
</style>

請注意，使用這些技術需要轉譯週期，這在行動裝置上可能相當重要。如果過度使用，可能會失去任何可能獲得的好處，並可能阻礙效能。

回應式圖片 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

美術指導

回應式圖片

標記中的圖片

摘要

使用相對大小的圖片

使用 srcset 強化高 DPI 裝置的 img

使用 picture 調整回應式圖片的藝術指導

相對大小的圖片

考量回應式圖片中的中斷點

讓產品圖片可展開

其他圖片技術

壓縮圖片

JavaScript 圖片替換

內嵌圖片：光柵和向量

SVG

資料 URI

CSS 內嵌

內嵌的優缺點

CSS 中的圖片

摘要

使用媒體查詢，依條件載入圖片或美術指導

使用 image-set 提供高解析度圖片

使用媒體查詢提供高解析度圖片或美術指導

使用 SVG 格式的圖示

摘要

以 Unicode 取代簡易圖示

以 SVG 取代複雜圖示

謹慎使用圖示字型

最佳化圖片效能

摘要

選擇合適的格式

縮減檔案大小

使用圖片精靈

考慮延遲載入

完全避免使用圖片

將文字放在標記中，而非嵌入圖片

使用 CSS 取代圖片

回應式圖片

使用 `srcset` 強化高 DPI 裝置的 `img`

使用 `picture` 調整回應式圖片的藝術指導