資訊專欄INFORMATION COLUMN
摘要：比如照片全色矢量圖無壓縮內容支持全色而且要支持縮放的時候質量不變。
什么是響應式圖片
組成網站的資源中，圖片往往是網絡負載的主要組成部分，占據了大部分負載而且隨著時間推移，這個現象仍然會保持。雖然現在的網絡連接速度持續改進，但是同樣出現了越來越多的高 DPI 分辨率設備，為了在這些設備上有更好的表現，就需要有更高清晰度的圖片，高清晰的同時就需要更大的文件大小。而因為仍需要支持一些相對非高 DPI 的分辨率設備，就需要有低清晰度的圖片，從而就需要有更好的方案來實現針對不同設備提供不同的圖片，也就是響應式圖片 (Responsive images)。同時還要遵循 Web 資源的準則，保持性能和表現的平衡，合理地提供圖片資源而不加載不需要使用的多余的資源。
其實，響應式圖片簡化來看，關鍵就是針對不同的設備選取合適的類型和清晰度。
給不同的設備提供剛好合適的清晰度分辨率是對性能最優的，過高的清晰度不僅意味著更多的傳輸時間還意味著需要縮放渲染時間，過低的清晰度就會讓高 DPI 設備得不到應該有的最優體驗。理論上來說確實是有可能給所有的設備提供剛好合適的清晰度。但設備的分辨率太多了，還存在不同的 DPI，所以實踐上目前更合理的方案是選擇一系列的主要適配的設備產生對應的圖片集合，其他設備就適當的選擇相近的方案圖片進行縮放。
如果設置響應式圖片取決于你是在哪里進行適配（CSS、HTML、JS）以及用于哪些用途（UI、UX），其中主要出現在 CSS 和 HTML 中，以下主要講解如果選擇合適的圖片類型，以及如果根據清晰度等因素響應式選擇圖片。
Web 圖片的類型目前，主要支持兩個大類：點陣圖（位圖 bitmap images、柵格圖 raster images）、矢量圖（可縮放矢量圖 SVG）
點陣圖根據壓縮的類型又分為有損和無損的圖片，其中使用廣泛的格式主要有 JPEG , PNG, GIF, WebP
矢量圖主要有 SVG (可縮放矢量圖 SVG)
Web 有損點陣圖有損圖片的壓縮算法往往直接從源文件壓縮的過程中丟棄一部分信息，核心就是想通過圖片質量根據等級設置 1 ~ 100 降低來換取更小的大小。
最常用的有損圖片就是 JPEG ，比如：數碼相機拍照的時候存儲成無損格式，但當下載到電腦的時候，通過有損壓縮算法轉換成 JPEG 格式的圖片。
JPEG 支持24位真彩色，但是不支持透明，所以經常用于類似照片、不透明的圖片等方面。它的缺點也很明顯，極致有損的壓縮會導致顯示效果有明顯的不同，特別容易受到二次壓縮的時候的影響，即是從一個已經壓縮的文件中進行有損壓縮的時候效果下降特別明顯。但正常來說，注意選擇合適的壓縮等級，效果下降往往就不會被注意到，同時大小下降百分之幾十。
更出色的有損圖片： WebP，但 WebP 并不是所有瀏覽器都支持的，所以需要實現對不支持瀏覽器的回退到顯示 JPEG 或者 PNG格式
Web 無損點陣圖無損圖片的壓縮算法則正好相反，不會丟棄源文件中的信息。在 Web 中當圖片質量非常關鍵的時候，無損圖片正好合適，例如網站的 icon。
無損圖片根據色值存儲的位數又分為 8位圖（8-bit images - 256-color）、真彩色圖（Full-color images - 16.7-million-colors）
其中，無損的8位圖 有代表如：png、gif，其中 gif 支持動畫，他們都很適合對圖片質量有要求，但是本身不需要全色和多變的透明色。
PS: 雖然 gif 只支持 8位圖，但是動圖可以根據一些 hack 來實現更清晰的視覺表現，參考 知乎網址
其次，無損真彩色圖的代表如：全色的 PNG (24-bit png)，無損的 WebP，其中全色的 PNG 支持的色值會比 WebP 更廣泛。另外注意的是，當你不需要透明色且對質量要求不是特別高的時候，應優先考慮選擇 有損 WebP 或者 JPEG 而不是全色 PNG。
無損圖很合適藝術圖片、肖像研究、攝影等。選用8位圖還是真彩色圖需要經驗，基礎規則就是只使用簡單顏色的圖片使用8位圖格式，當不只是使用簡單顏色或者需要全部透明色支持的圖片就選用全彩色圖。
Web 特殊的格式 WebP從互聯網早起以來，柵格圖格式只有 JPEG，GIF，PNG，為了更優化 Web 圖片的加載速度和性能，谷歌（google）開發了全新的圖片格式 WebP。圖片壓縮體積大約只有 JPEG 的2/3，并能節省大量的服務器帶寬資源和數據空間，在壓縮方面比 JPEG 和 PNG 的效果更優。
雖然截至目前已經有很多瀏覽器支持了 WebP ，比如 Chrome (谷歌瀏覽器) 、國內的 QQ瀏覽器、UC 瀏覽器等 Webkit內核的瀏覽器都支持這種格式，但是同樣有一些如 IE系列、Firefox系列的瀏覽器占比較高的主流瀏覽器對 WebP 不支持，所以使用 WebP 的時候一定要實現相應的回退策略（訂閱本系列教程，我會繼續講解如何更方便地解決這個問題）。
WebP 有著比 JPEG 和 PNG 更優的壓縮效果，有損 WebP 支持透明度也是 JPEG 做不到的，雖然沒有 PNG 色度值多，但是除非是在某些對色值有精度要求的網站圖片，大部分場景開發者都會優先選擇支持 WebP。
另外一方面，WebP 是支持動畫的，而且壓縮和表現效果比 GIF 更優，但因為不好統計以及判斷瀏覽器對動畫 WebP 是否支持，所以不好控制回退，除非你對這種占比較小的瀏覽器（支持 WebP 但是不支持動畫 WebP）用戶不考慮，建議不要使用 WebP 替代 GIF 。
Web 矢量圖 SVG矢量圖 SVG 使用向量矩陣來存儲幾何圖形以及比例實現支持任何尺寸的縮放，可以看到以下圖片的例子，放大幾倍后的 svg 質量依然很完美，這就是 SVG 對比點陣圖的最大優點。
不過現在的設備都是以像素為基礎單位的，所以所有顯示輸出最后都是被轉化為像素。這就能明顯標識矢量圖想要顯示在這些設備上就要經受一個叫柵格化的過程，每當圖片的尺寸有變化、縮放都要經過這個計算柵格化過程，從而保證了每次顯示的圖片質量。
如果你熟悉創建向量矩陣，你應該熟悉注入 AI 之類的設計軟件。即使這些軟件的支持的本地文件格式是二進制，SVG 的格式是 XML（文本類型），它根節點標識了它的媒體類型 image/svg+xml 。這個特性使它可以在文本編輯器中直接修改，或者內聯到 HTML 中，甚至可以直接在 SVG 中使用 CSS 和 media queries (媒體查詢)。
雖然從 1999 年的 W3C 標準中就已經將 SVG 納入了，但真正被網站使用就是在最近這幾年。因為對于不同分辨率設備以及顯示屏的顯示無暇讓它倍受歡迎。
當然啦，SVG 并不是全能的，優勢也主要限制在以下幾個方面，例如：呈現 Logo 、圖標、線形藝術等。另一方面，那些固定色塊由幾何圖形組成的圖片也很適合。
如何選擇通過上面的大致介紹每種圖片格式的使用場景，掌握一個場景選擇哪些圖片格式最適合顯得尤為重要，這里整理了一些常用的注意點以及經驗來劃分圖片格式的選擇，你可以依照表格根據要提供的內容來選擇最合適的圖片格式。
| 圖片格式 | 支持顏色 | 圖片類型 | 壓縮類型 | 合適場景 |
|---|---|---|---|---|
| PNG | 全色 | 柵格圖 | 無損 | 質量缺失不可接受的情況，亦或是展示內容需要完全的透明度或者全色。適用于任何一種圖片格式，但不像適用于照片的 JPEG 壓縮度那么高 |
| PNG (8) | 256 | 柵格圖 | 無損 | 內容不需要全色或者只需要簡單 1 位透明度支持的，比如圖標、像素陣列 |
| GIF | 256 | 柵格圖 | 無損 | 沒有 PNG (8) 壓縮度高，其他一樣，但支持動畫，也主要用于動畫 |
| JPEG | 全色 | 柵格圖 | 有損 | 內容需要全色，或者沒有使用透明度，而且可以接受質量的丟失。比如照片 |
| SVG | 全色 | 矢量圖 | 無壓縮 | 內容支持全色而且要支持縮放的時候質量不變。特別適合線形藝術、幾何圖形、其他非照片類型的內容，不需要特別處理就優化了多分辨率顯示的效果 |
| WebP(有損) | 全色 | 柵格圖 | 有損 | 其他方面跟 JPEG 一樣，但更好的是支持透明度以及壓縮性能以及效果 |
| WebP(無損) | 全色 | 柵格圖 | 無損 | 其他方面跟全色 PNG 一樣，但有更好的壓縮性能 |
最新系列教程，可以關注我的博客 https://biaomingzhong.github.io/
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/111945.html
摘要：比如照片全色矢量圖無壓縮內容支持全色而且要支持縮放的時候質量不變。 什么是響應式圖片 組成網站的資源中，圖片往往是網絡負載的主要組成部分，占據了大部分負載而且隨著時間推移，這個現象仍然會保持。雖然現在的網絡連接速度持續改進，但是同樣出現了越來越多的高 DPI 分辨率設備，為了在這些設備上有更好的表現，就需要有更高清晰度的圖片，高清晰的同時就需要更大的文件大小。而因為仍需要支持一些相對非...
摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...
摘要：一引言前端的高性能部分，主要是指減少請求數減少傳輸的數據以及提高用戶體驗，在這個部分，圖片的優化顯得至關重要。 Web 發展的速度讓許多人嘆為觀止，層出不窮的組件、技術，只需要合理的組合、恰當的設置，就可以讓 Web 程序性能不斷飛躍。所有 Web 的思想都是通用的，它們也可以運用到 Java Web。這一系列的文章，主要講解網頁前端性能優化，是與用戶最直接接觸的。事實證明，與其消耗...
摘要：楊冀龍是安全焦點民間白帽黑客組織核心成員，被浪潮之巔評為中國新一代黑客領軍人物之一他在本文中依次分享了對于黑客的定義如何從黑客成為一名安全創業者技術創業踩過的坑給技術創業者建議等內容。 showImg(https://segmentfault.com/img/remote/1460000012377230?w=1240&h=796); 前端每周清單專注前端領域內容，以對外文資料的搜集為...
閱讀 3627·2021-10-20 13:49
閱讀 3012·2021-09-29 09:34
閱讀 3912·2021-09-01 11:29
閱讀 3221·2019-08-30 11:01
閱讀 1000·2019-08-29 17:10
閱讀 1125·2019-08-29 12:48
閱讀 2970·2019-08-29 12:40
閱讀 1564·2019-08-29 12:30
