一張相片勝過 1, 000 字，而圖片是每個頁面不可或缺的一環。但它們通常也是大部分的下載位元組。使用回應式網頁設計時，我們不僅會根據裝置特性調整版面配置，還能根據圖片變更版面配置。
採用回應式網頁設計，不只能根據裝置特性調整版面配置，內容也可能隨之調整。舉例來說，在高解析度 (2 倍) 螢幕上，高解析度圖像可確保清晰度。當瀏覽器寬度為 800 像素時，寬度為 50% 的圖片可能就能正常運作，但在小手機上使用過多空間，而螢幕縮小時也需要相同的頻寬負擔，以配合較小的螢幕。
藝術方向
有時候，圖片的變更可能需要大幅變更，例如變更比例、裁剪，甚至是取代整張圖片。在這種情況下，變更圖片通常稱為圖片方向。如需更多範例，請參閱 responsiveimages.org/demos/。
回應式圖片
您知道嗎？平均而言，載入網頁所需的圖片佔用了超過 60% 的位元組。
在本課程中，您將瞭解如何在新型網路上處理圖片，讓您的圖片在各種裝置上都能美觀且快速載入。
在過程中，您可以學習各種技能和技術，將回應式圖片完美整合至開發工作流程。完成本課程後，您將使用符合不同可視區域大小和使用情況的圖片進行開發。
這個免費課程由 Udacity 提供
標記中的圖片
img 元素功能強大，可用來下載、解碼並轉譯內容，而新型瀏覽器也支援多種圖片格式。加入能在各種裝置上運作的圖片，與電腦版相同，只要稍微微調即可提供良好的體驗。
摘要
- 使用相對大小的圖片，以免圖片意外溢出容器。
- 如要根據裝置特性 (即圖片方向) 指定不同的圖片，請使用
picture元素。 - 在
img元素中使用srcset和x描述元，就可向瀏覽器提供提示，告訴瀏覽器在選擇不同密度時適合使用的圖片。 - 如果您的網頁只有一或兩張圖片，且未在網站上的其他位置使用，請考慮使用內嵌圖片，以減少檔案要求。
使用相對大小的圖片
請記得在指定圖片寬度時使用相對單位，以免意外溢出可視區域。舉例來說，width: 50%; 會導致圖片寬度為所含元素的 50%，而非可視區域的 50%，或實際像素大小的 50%。
由於 CSS 允許內容溢位其容器，因此您可能需要使用最大寬度：100%，以免圖片和其他內容溢位。例如：
img, embed, object, video {
max-width: 100%;
}
請務必透過 img 元素上的 alt 屬性提供有意義的說明；這些說明可讓螢幕閱讀器和其他輔助技術瞭解相關背景資訊，讓您的網站更易於存取。
使用 srcset 為高 DPI 裝置增強 img
srcset 屬性可強化 img 元素的行為，方便您為不同裝置特性提供多個圖片檔。srcset 與 CSS 原生的 image-set
CSS 函式類似，可讓瀏覽器根據裝置的特性選擇最佳圖片，例如在 2 倍的螢幕上使用 2 倍圖片；未來也可能在頻寬有限的網路上，在 2 倍的裝置上選擇 1 倍圖片。
<img src="photo.png" srcset="photo@2x.png 2x" ...>
在不支援 srcset 的瀏覽器中，瀏覽器只會使用 src 屬性指定的預設圖片檔。因此，無論功能如何，請務必提供在任何裝置上可顯示的 1 倍映像檔。如果支援 srcset，系統會在發出任何要求之前剖析以半形逗號分隔的圖片/條件清單，而且只會下載並顯示最合適的圖片。
雖然這些條件可包含像素密度、寬度和高度等所有條件，但目前只支援像素密度。如要平衡目前行為與日後推出的功能，請持續在屬性中提供 2 倍的圖片。
使用 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%；介於 500px 和 600px 之間，圖片佔可視區域寬度的 50%，低於 500 像素時，則是完整寬度。
製作可展開式產品圖片
消費者想查看購買的產品。在零售網站上，使用者會希望能夠查看高解析度的產品特寫，以進一步瞭解詳細資料，而無法參與研究的參與者也會感到不悅。
J. 提供了可輕觸的可展開圖片範例。Crew 網站。 重疊消失表示圖片可以輕觸，讓放大的圖像也能清楚顯示細節。
其他圖片技巧
壓縮圖片
壓縮圖片技術可為所有裝置提供高度壓縮的 2 倍映像檔，而不受裝置的實際功能影響。視圖片的類型和壓縮程度而定，圖片品質可能不會改變，但檔案大小會大幅下降。
替換 JavaScript 圖片
替換 JavaScript 圖片會檢查裝置的功能，以及「正確操作」。您可以透過 window.devicePixelRatio 判斷裝置像素比例、取得螢幕寬度和高度，甚至可以透過 navigator.connection 進行某些網路連線，或發出假要求。收集這些資訊後，您可以決定要載入哪些圖片。
這種做法的一大缺點，就是使用 JavaScript 時，您必須延遲載入圖片的剖析器完成之後，才能延遲載入圖片。也就是說，系統甚至必須等到 pageload 事件觸發後，才會開始下載圖片。此外，瀏覽器很可能會下載 1 倍和 2 倍的圖片，藉此增加網頁寬度。
內嵌圖片：光柵和向量
建立及儲存映像檔的方式基本上有兩種，而這會影響到回應映像檔的方式。
光柵圖片 (例如相片和其他圖片) 以個別色點格線表示。光柵圖片可能來自相機或掃描器，或是使用 HTML 畫布元素製作。PNG、JPEG 和 WebP 等格式用來儲存光柵圖片。
標誌和線條藝術等向量圖片定義為一組曲線、線條、形狀、填滿顏色和漸層。您可以使用 Adobe Illustrator 或 Inkscape 等程式建立向量圖片，也可以用 SVG 等向量格式在程式碼中手動編寫。
SVG
可擴充向量圖形可讓您在網頁中加入回應式向量圖形。與光柵檔案格式相比，向量檔案格式的優點是瀏覽器可以轉譯任何大小的向量圖片。向量格式會說明圖片的幾何圖形，也就是圖片如何從線條、曲線和顏色等建構而成。反之，光柵格式只會取得個別色彩點的資訊，因此瀏覽器在縮放時，必須猜測如何填入空白區域。
以下是同一張圖片的兩個版本：左側為 PNG 圖片，右側為 SVG。可擴充向量圖形在任何大小下都能清晰呈現，而旁邊的 PNG 則會在較大的顯示尺寸中呈現模糊效果。
如要減少網頁發出的檔案要求數量，您可以使用 SVG 或資料 URI 格式，在內嵌圖片中編寫圖片。查看這個頁面的來源時，您會發現以下兩個標誌都是內嵌宣告：資料 URI 和 SVG。
SVG 檔在行動裝置和電腦上都提供強大的支援功能，而最佳化工具也可能會大幅縮減 SVG 大小。下列兩個內嵌 SVG 標誌看起來相同，但其中一個約為 3 KB，另一個則只有 2 KB：
資料 URI
您可以透過資料 URI 使用下列格式將 img 元素的 src 設為 Base64 編碼字串，藉此內嵌圖片等檔案：
<img src="data:image/svg+xml;base64,[data]">
上方 HTML5 標誌的程式碼開頭如下所示：
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">
(完整版的長度超過 5,000 個字元！)
拖曳「n」放置工具 (例如 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 未支援這些 IE8 和 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);
}
}
使用圖片集提供高解析度圖片
CSS 中的 image-set() 函式可以強化 background 屬性，讓您輕鬆為不同裝置特性提供多個圖片檔。如此一來，瀏覽器就能根據裝置的特性選擇最佳圖片，例如在 2 倍的螢幕上使用 2 倍圖片，或在頻寬有限的網路中使用 1 倍的圖片 (在 2 倍的螢幕上使用)。
background-image: image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
除了載入正確的圖片以外，瀏覽器也會縮放圖片。換句話說，瀏覽器會假設 2 倍圖片是 1x 圖片的兩倍，因此將 2 倍的圖片縮小了 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
);
}
上述內容會在支援圖片集的瀏覽器中載入適當的素材資源，否則就會改回使用 1 倍素材資源。顯而易見的是，雖然 image-set() 瀏覽器支援很低，但大多數瀏覽器會採用 1 倍的素材資源。
使用媒體查詢提供高解析度圖片或圖片方向
媒體查詢可以根據裝置像素比例建立規則，為 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);
}
}
您也可以使用最小寬度語法，根據可視區域大小顯示替代圖片。這項技巧的優點是，在媒體查詢不相符時，系統不會下載圖片。舉例來說，只有在瀏覽器寬度為 500 像素或以上時，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 ★
您是超級 ★
以可擴充向量圖形取代複雜的圖示
對於較複雜的圖示要求，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。
使用圖片 Sprite
CSS 合併是一種技術，可將多張圖片合併成單一的「Sprite 工作表」圖片。接著，您可以為元素 (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;
}
擴散的優點是可以減少取得多張圖片所需的下載次數，同時還能啟用快取。
考慮使用延遲載入
延遲載入在包含許多需捲動位置的圖片的長網頁上，可以視需要載入圖片，或等到主要內容完成載入和轉譯時，能大幅加快載入速度。除了效能提升之外，使用延遲載入還可創造無限捲動體驗。
建立無限捲動的頁面時請務必謹慎，因為內容會在使用者可見時載入，因此搜尋引擎可能永遠看不到。此外，如果使用者尋找的頁尾預期會在頁尾看到相關資訊，就不用再看到頁尾，因為系統一律會載入新內容。
完全避免使用圖片
有時候，最好的圖片實際上並不是圖片。請盡可能使用瀏覽器的原生功能來提供相同或類似的功能。瀏覽器會產生原本需要的圖片。這表示瀏覽器不再需要下載個別的圖片檔，因而能避免遭受不當調整的圖片。您可以使用萬國碼 (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 sollicitudinFusce 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>
請注意，使用這些技術確實需要轉譯週期，這對行動裝置來說可能十分重要。如果過度使用，您將失去原有的任何權益，並可能妨礙效能。