響應式網站 ( 三 )

• 為網站添加圖像時，首先要考慮是否真的需要使用，因為下載圖像會影響網頁讀取時間，有許多不同的添加方法，取決於圖像的用途：

1. 按鈕：用 CSS 替代圖像，以 CSS 賦予的樣式元素比較具響應性，可以隨意改變長寬尺寸而不失品質。
2. 背景圖像：使用 CSS 的 background 屬性。

body { background-image: url(檔案名稱.副檔名);}

3. 內容圖像：使用 HTML 的 標籤，請記得設定 alt 屬性，圖片無法下載時才有文字替代來幫助理解。

<img src="檔案路徑" alt="文字註解">

4. 圖像拼合：將許多小圖接合成一個大圖，能減少下載的檔案數量，再利用 CSS 定位圖像在網頁上的位置及功能。
5. 圖示字型 ( icon font )：以符號圖示代替文字，其本質為字型，故可自由縮放大小而不改變顯示品質。

@font-face {
   font-family:字型名稱;
   src: url('檔案所在位置');
}

• 一般網站上常使用的檔案格式包含 JPG ( JPEG )、GIF、PNG 與 SVG 檔( 未受所有瀏覽器支援 )。

1. JPG ( JPEG )： WEB 上最常使用的類型。
2. GIF：可具有透明區域，最多顯示256色，故檔案較小，不適合用於相片，僅適合用於標誌或插圖。
3. PNG：8位元的檔案支援256色，類似 GIF 檔但檔案尺寸會小些。( 允許透明 )
   24位元的檔案支援數百萬色，類似 JPG 檔但檔案尺寸會大些。( 允許透明、半透明)
4. SVG：向量式圖型格式，存放 XML 格式的資料，可以調整圖像大小而不影響品質，適合圖形但不適合相片。

• 像素 ( pixel ) 是一個實體色點，是螢幕能顯示的最小點，
• 當裝置像素超過參考像素(因為縮小像素)，被稱作高密度螢幕，Apple 的 retina display 即是此種螢幕。
• 因為裝置像素與參考像素的差異，所以在 WEB 設計中建議使用相對單位 ( em 與百分比 ) 。
• 可使用 Smush.it 或 JPEGmini 等網站來協助在不失真的情況下壓縮圖檔。
• 請保留原始的、高解析度的圖檔，以備不時之需。
• 響應式設計上，若要讓內容圖像與其外層元素保持相對大小，可參考以下範例：

div img { width:50%; }
// 表示img圖檔固定佔外層元素一半的寬度

• 使用 HTML 的方式來設定圖像尺寸，會讓其無法具有響應性，請改用 CSS 來設定。
• 增加圖像到設計時，從寬螢幕到窄螢幕可能會比較容易，因為圖像尺寸不會超過其實際尺寸。