一張圖片勝過千言萬語，圖片是每個網頁不可或缺的一部分。但這些內容也經常占下載位元組的大部分。透過回應式網頁設計，不僅版面配置可以根據裝置特性變更，圖片也能變更。
回應式網頁設計不僅能根據裝置的特性變更版面配置，內容也可能隨之改變。舉例來說，在高解析度 (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 屬性提供有意義的說明，為螢幕閱讀器和其他輔助技術提供背景資訊，讓您的網站更容易使用。
針對高 DPI 裝置，使用 srcset 增強 img
srcset 屬性可強化 img 元素的行為，方便您為不同裝置特性提供多個圖片檔。與 image-set 原生於 CSS 的 CSS 函式 類似，srcset 可讓瀏覽器根據裝置的特性選擇最佳圖片，例如在 2x 螢幕上使用 2x 圖片，以及在頻寬有限的網路上，在 2x 裝置上使用 1x 圖片 (這項功能可能會在未來推出)。
<img src="photo.png" srcset="photo@2x.png 2x" ...>
在不支援 srcset 的瀏覽器上，瀏覽器只會使用 src 屬性指定的預設圖片檔案。因此，請務必一律加入 1x 圖片，這樣無論裝置功能為何，都能在任何裝置上顯示。支援 srcset 時，會在發出任何要求之前剖析以逗號分隔的圖片/條件清單，且只會下載並顯示最適當的映像檔。
雖然條件可以包括像素密度、寬度和高度等所有內容，但目前僅支援像素密度。為了平衡目前的行為與日後的功能，請只在屬性中提供 2x 圖片。
使用 picture 在回應式圖片中設定藝術方向
如要根據裝置特性 (又稱藝術方向) 變更圖片，請使用 picture 元素。picture 元素定義了宣告式解決方案，可根據裝置大小、裝置解析度、螢幕方向等不同特性提供多個版本的圖片。
如果圖片來源存在於多種密度，或是回應式設計在某些螢幕類型上顯示略有不同的圖片，請使用 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")。根據瀏覽器的寬度和裝置像素比例，無論瀏覽器視窗有多大，瀏覽器都能選擇正確的圖片。舉例來說，下表顯示瀏覽器會選擇哪張圖片：
| 瀏覽器寬度 | 裝置像素比例 | 使用的圖片 | 有效解決方法 |
|---|---|---|---|
| 400 像素 | 1 | 200.jpg |
1x |
| 400 像素 | 2 | 400.jpg |
2 倍 |
| 320 像素 | 2 | 400.jpg |
2.5 倍 |
| 600 像素 | 2 | 800.jpg |
2.67 倍 |
| 640 像素 | 3 | 1000.jpg |
3.125 倍 |
| 1100 像素 | 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 提供可輕觸的可展開圖片範例。團隊網站。消失的重疊圖層表示可點選圖片，可提供放大圖片，顯示精細細節。
其他圖片技巧
壓縮圖片
壓縮圖片技術可為所有裝置提供高度壓縮的 2x 圖片，不受裝置實際功能的影響。視圖片類型和壓縮程度而定，圖片品質可能不會有明顯變化，但檔案大小會大幅縮減。
JavaScript 圖片取代
JavaScript 圖片替換功能會檢查裝置的功能，並「執行正確的操作」。您可以透過 window.devicePixelRatio 判斷裝置像素比例、取得螢幕寬度和高度，甚至可以透過 navigator.connection 或發出假要求來監聽網路連線。收集所有這類資訊後，您就可以決定要載入哪個圖片。
這種做法的一大缺點是，使用 JavaScript 會延遲圖片載入，直到至少預測解析器完成為止。這表示映像檔必須等到 pageload 事件觸發後才能開始下載。此外，瀏覽器很可能會同時下載 1x 和 2x 圖片，導致網頁重量增加。
內嵌圖片：光柵和向量
建立和儲存圖片的方式有兩種，這會影響您如何以回應式方式部署圖片。
光柵圖片 (例如相片和其他圖片) 是以個別色點格線的形式呈現。算術影像可能來自相機或掃描器，或是使用 HTML 畫布元素建立。像 PNG、JPEG 和 WebP 這樣的格式用於儲存光柵圖片。
向量圖片 (例如標誌和線條圖) 是指一組曲線、線條、形狀、填充顏色和漸層。您可以使用 Adobe Illustrator 或 Inkscape 等程式建立向量圖片，也可以使用 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 要求的大小。
- 這會讓標記和工作流程變得更複雜，
- Data URI 格式比二進位檔大得多 (最多 30%)，因此不會縮減總下載大小。
- 無法快取資料 URI，因此必須針對所有使用這些 URI 下載頁面。
- 不支援 IE 6 和 7，IE8 支援不完整。
- 在 HTTP/2 中，減少素材資源要求數量不再是優先事項。
如同所有回應式設計，您需要測試哪種做法最有效。請使用開發人員工具測量下載檔案的大小、要求數量，以及總延遲時間。資料 URI 有時可用於處理光柵圖片，例如主畫面上只有一或兩張未在其他地方使用的相片。如果您需要內嵌向量圖片，SVG 會是更好的選擇。
CSS 中的圖片
CSS background 屬性是一項強大的工具，可用於在元素中加入複雜圖片，讓您輕鬆新增多張圖片，並讓圖片重複顯示等。搭配媒體查詢使用時，背景屬性就會變得更強大，可根據螢幕解析度、檢視區大小等因素，啟用條件式圖片載入功能。
摘要
- 根據螢幕的特性使用最佳圖片，並考量螢幕大小、裝置解析度和頁面版面配置。
- 使用媒體查詢 (搭配
min-resolution和-webkit-min-device-pixel-ratio)，變更高 DPI 螢幕的 CSS 中的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 屬性，方便您為不同裝置特性提供多個圖片檔。這可讓瀏覽器根據裝置的特性選擇最佳圖片，例如：在 2 倍螢幕上使用 2 倍圖片，或在有限頻寬網路的情況下，使用 2 倍裝置的 1 倍圖片。
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 素材資源。
使用媒體查詢提供高解析度圖片或藝術方向
媒體查詢可根據裝置像素比例建立規則，因此可以為 2 倍和 1 倍的螢幕指定不同的圖片。
@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 語法，根據可視區域大小顯示替代圖片。這項技巧的好處是，如果媒體查詢不相符，就不會下載圖片。舉例來說，只有在瀏覽器寬度為 500 像素或更大時，系統才會下載 bg.png 並套用至 body：
@media (min-width: 500px) {
body {
background-image: url(bg.png);
}
}
為圖示使用 SVG
在網頁中加入圖示時，請盡可能使用 SVG 圖示，或在某些情況下使用萬國碼字元。
摘要
- 使用 SVG 或萬國碼圖示，而非光柵圖片。
使用 Unicode 取代簡單圖示
許多字型支援多種萬國碼字符，可用於取代圖片。與圖片不同，無論在螢幕上顯示的字型大小為何，Unicode 字型都能順利縮放並保持良好的顯示效果。
除了一般字元集之外，Unicode 也可能包含箭頭 (←)、數學運算子 (√)、幾何圖形 (★)、控制圖片 (▶)、音樂符號 (♬)、希臘字母 (Ω)，甚至是棋子 (♞) 的符號。
加入 Unicode 字元的方式與命名實體相同：&#XXXX，其中 XXXX 代表 Unicode 字元編號。例如：
You're a super ★
你是超級 ★
以 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"></span>)
or by adding special classes to an <i> 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 工作表) 和偏移量，藉此顯示正確的部分。
.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;
}
使用 Spriting 的好處是，可減少取得多張圖片所需的下載次數，同時仍可啟用快取功能。
考慮使用延遲載入
延遲載入可在載入主要內容時，或在主要內容完成載入及算繪後，視需要載入下方折疊區塊中的多張圖片，大幅加快長網頁的載入速度。除了提升效能外，使用延遲載入功能可能也會創造無限捲動體驗。
建立無限捲動頁面時請小心，因為內容會在可見時載入，搜尋引擎可能永遠不會看到該內容。此外，如果使用者想查看頁尾資訊，但系統一律會載入新內容，因此使用者永遠不會看到頁尾。
完全避免使用圖片
有時最佳圖片其實不是圖片。請盡可能使用瀏覽器的原生功能，提供相同或類似的功能。瀏覽器會產生先前需要圖片的視覺效果。這表示瀏覽器不再需要下載個別圖片檔案，因此可避免圖片縮放不當。您可以使用 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>
請注意，使用這些技巧確實需要經歷算繪週期，這在行動裝置上可能會造成不小的負擔。如果過度使用，您將無法獲得任何好處，且可能會影響效能。