常見的響應式圖片設計方式
我們常用的設計方式大概可見到以下兩種:
- 設定圖片
width: 100%;，其少好處是父元素寬度是多少 ( 以父元素是 body 為例 )，圖片就會跟著瀏覽器寬度自適應延伸，但要特別注意如果圖片在解析度較大的螢幕上顯示 ( 放太大 )，可能會有糊掉失真的問題。 - 設定圖片
max-width: 100%;( 建議使用 )，好處是除了可以保有圖片原始的寬度，當瀏覽器寬度小於圖片原始寬度時，也會自適應地伸縮。
響應式圖片的 reset 教學
我們在寫網頁的時候，一般都會做 CSS reset 的部分，在針對響應式網頁圖片時也是，目的是避免有些圖片解析度太大，導致圖片因為太大張出現 X 軸，因次我們會加入img CSS reset 的設定 max-width: 100%; 和 height: auto;，使其高度自適應，這樣無論是自己設計的圖片，或是使用者透過開發平台上船圖片時，皆不用擔心會導致網頁破版了。
圖片 Size 規劃，刻意設計大張一點的技巧
假設一張寬度 300px 的圖片皆設定 width: 100%;，在 PC 以三欄式的方式呈現，在 PC 看起來也許是沒問題的，但如果在 ipad 時以雙欄式呈現 ( ipad 直式為 768px ，雙欄式呈現圖片可能會被拉到 360px 以上 ) 或在手機以滿版呈現時，圖片可能因為解析度不夠而看起來會變得模糊，如圖一，通常有以下解決辦法 :
- 在 ipad 或手機會設計另外一張較大解析度的圖片，如圖二，通常寬度 600 px 的圖片即可，太大的圖片也會造成網頁 loading 太慢的問題
- 維持原圖小圖片 300px ，但捨去圖片
width: 100%的設定，這樣圖片雖然不會滿版呈現，但可以透過圖片置中、加上邊線使其美化。
圖片使用時機的判斷
圖片的格式常見的有 jpg、png、svg、gif 等等，這邊統整了一下各種類型的使用時機 :
- svg 向量圖片 : 常被使用在網頁 logo，通常是設計師透過繪圖軟體設計匯出 ( 下方也會針對此格式說明 )
- png 圖片 : 支援透明，像是社群 FB、Instagram 這種小 logo ，或是首頁的大圖 Banner 會使用
- jpg 圖片 : 不支援透明，通常是文中的小圖、電商網站的商品圖，或是首頁的大圖 Banner 會使用
什麼是 SVG 向量圖片 ?
- 可縮放向量圖形 Scalable Vector Graphics，簡稱 SVG，是一種基於可延伸標記式語言 ( XML )，用於描述二為向量圖片的圖片格式
- 維持向量的方式呈現的圖片，不會受放大的影響變模糊，依然可以清晰呈現
補充 : Iconfinder 是一個提供各種 icon 的網站，其中有很多免費的資源可以使用，並且可以依照需求下載 svg、png 格式的圖片唷~
將網頁 LOGO 取代為 SVG 格式吧！（透過圖片取代文字 ) ⭐
早期可能有些瀏覽器還不支援 SVG 格式，需要同時設定 PNG 檔作為備案，但近期的瀏覽器幾乎都有支援了，下面就來說明將 Logo 取代為 SVG 格式的作法 :
- 建立一個裡面的
a連結並輸入名稱，EX:<h1 class="logo"><a href="#">公司名稱</a></h1>( 寫文字是為了給搜尋引擎看到內容，有助於 SEO ) - 設定
a連結display: block;，使其變成區塊元素 - 透過
background-image: url();，載入 SVG 格式的圖片，並設定width、height - 將 SVG 圖片取代文字，透過下列的語法隱藏文字 :
.logo a {
text-indent: 101%; // 縮排或凸排的語法，使文字縮排至原本的區域外
overflow: hidden; // 當元素超出範圍時，元素就隱藏
white-space: nowrap; // 文字到達元素最大範圍時，通常會自動換行，這邊強制文字不得進行換行只顯示在第一行
}大圖 Banner 設計的注意事項
前面有提到響應式網頁的圖片透過 CSS reset 設定，使圖片自適應地縮放，那圖片式怎麼縮放的呢? 其實就是按照圖片原始的寬高等比例縮放。舉例來說，一張在 PC 呈現 1000x400 的 Banner，假設在一個手機寬度 500 解析度下，圖片自動會被縮為 500x200 的大小，這邊要注意以下幾點 :
- 圖片由電腦縮至手機時，是否過多資訊濃縮在一張圖片裡，如果有必要可以換一張較小的圖，且呈現必要資訊即可
- 通常 Banner 上方都還會有表頭 / 導覽列等等，在手機須注意圖片加表頭的高度是否超出螢幕範圍
那如果不想要等比縮放呢 ? 想要固定高度 …
當然可以，如果想要固定 Banner 的高度，讓 Banner 用截圖式的方式呈現，我們可以透過下面的作法 :
- 設定 Banner 區塊的
height，使區塊高度固定 - 設定
background-color，用意是當螢幕解析度大於圖片時，有背景可以呈現 - 透過
background-image載入圖片 - 設定
background-repeat: no-repeat且background-position: center center，使 Banner 不重覆呈現且置中 - 透過
@ media的設定，在手機版切換成一張較小的圖，高度一樣固定不變，達到響應式的設計
透過以上幾點，我們就可以做到使 Banner 高度固定，讓圖片用被截掉的呈現，這樣也是一種不錯的設計方式唷！
最後，補充一個超好用的壓縮圖片的好工具 TinyPNG ，用它來優化你的響應式網頁吧！
如果覺得我的文章寫得不錯或是有幫助到你，可以拍手讓我知道，對我來說是很大的鼓勵，謝謝:)
