一張圖片勝過千言萬語，圖片是每個網頁不可或缺的一部分。但這些內容也經常占下載位元組的大部分。透過回應式網頁設計，不僅版面配置可以根據裝置特性變更，圖片也能變更。
回應式網頁設計不僅可根據裝置特性變更版面配置，還能變更內容。舉例來說，在高解析度 (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
您可以使用 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) 變更 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 圖片，或是在頻寬有限的網路上，在 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 語法，根據可視區域大小顯示替代圖片。這項技巧的優點是，如果媒體查詢不相符，就不會下載圖片。舉例來說，只有在瀏覽器寬度為 500 像素或更大時，才會下載 bg.png 並套用至 body：
@media (min-width: 500px) {
body {
background-image: url(bg.png);
}
}
使用 SVG 圖示
在網頁中加入圖示時，請盡可能使用 SVG 圖示，或在某些情況下使用萬國碼 (Unicode) 字元。
摘要
- 使用 SVG 或萬國碼圖示，而非光柵圖片。
使用 Unicode 取代簡單圖示
許多字型都支援多種萬國碼字形，可用來取代圖片。與圖片不同，無論在螢幕上顯示的字型大小為何，Unicode 字型都能順利縮放並保持良好的顯示效果。
除了一般字元集之外，Unicode 也可能包含箭頭 (←)、數學運算子 (√)、幾何圖形 (★)、控制圖片 (▶)、音樂符號 (♬)、希臘字母 (Ω)，甚至是棋子 (♞) 的符號。
加入 Unicode 字元的方式與命名實體相同：&#XXXX，其中 XXXX 代表 Unicode 字元編號。例如：
You're a super ★
你是超級 ★
以 SVG 取代複雜圖示
如需更複雜的圖示需求，SVG 圖示通常較輕巧、易於使用，且可使用 CSS 設定樣式。可擴充向量圖形相較於光柵圖片有許多優點：
- 向量圖形可無限縮放。
- 色彩、陰影、透明度和動畫等 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>
請注意，使用這些技巧確實需要經歷算繪週期，這在行動裝置上可能會造成不小的負擔。如果過度使用，您將無法獲得任何好處，且可能會影響效能。