前端的圖片最佳化的6種方案

1、使用base64編碼代替圖片

場景：適用於圖片大小小於2KB，頁面上引用圖片總數不多的情況 原理：將圖片轉換為base64編碼字串inline到頁面或css中 優勢：減少http的請求次數，並可以放到後臺資料庫中，只傳輸字串，有較多的構建工具可以直接實現劣勢：這種方法僅限於圖片總數較少，而且圖片大小小於2KB的情況。否則圖片字串會變得很長很長

2、合併圖片sprite(雪碧圖)

場景：任何用到頁面圖片的場景 原理：將多個頁面上用到的背景圖片合併成一個大的圖片在頁面中引用 優勢：可以有效的較少請求個數，而且，而不影響開發體驗，使用構建外掛可以做到對開發者透明。適用於頁面圖片多且豐富的場景。劣勢：生成的圖片體積較大，減少請求個數同時也增加了圖片大小，不合理拆分將不利於並行載入

3、使用css、svg、canvas或iconfont代替圖片

css代替圖片

場景：適用於移動端或較高階的瀏覽器，而且繪製的圖案較為簡單。 原理：css方式可以用來繪製相對簡單的團來代替圖片，一般使用before或者after偽元素來豐富圖案的複雜度。 優勢：具有實現簡單，圖片體積小的特點，可以實現簡單的動態效果劣勢：也受限於css的相容性特點，繪製複雜圖案困難svg的描述和適用場景上文已說明。

canvas代替圖片

場景：需要高效能的圖片或動畫 原理：適用html5的canvas元素繪製建立圖片優勢：整個就是畫2D圖形時，頁面渲染效能比較高，頁面渲染效能受圖形複雜度影響小，效能只受圖形的解析度的影響，畫出來的圖形可以直接儲存為 .png 或者.jpg的圖形，適合於畫光柵影象或者不規則圖形 劣勢：沒有dom操作，必須依賴定時器，文字渲染效能差，不能新增描述(title屬性什麼的)，相容性限制

iconfont是一種web字型來代替圖片的解決方案

場景：代替頁面上色彩單一的圖片

優勢：相容性好，應用廣，目前使用也很廣泛

劣勢：但是由於字型的顏色設定單一，只能用於代替顏色單一的圖片，對於色彩複雜的圖片，iconfont處理起來比較困難

4、響應式圖片

場景：不同終端對同一個圖片需求不一樣，可以根據終端載入不同的圖片來節省沒必要的流量 原理：透過picture元素，picturefill或平臺判斷來為不同終端平臺輸出不同的圖片 優勢：減少沒必

選擇合適的圖片格式，轉換圖片格式，減小圖片大小和體積，加快開啟網頁圖片顯示的速度，儘量選擇畫面簡單的圖片，顏色不要太豔麗。

常見的最佳化方案：

使用 Data URI 即（base64）編碼代替圖片：適用於圖片大小於 2 KB，頁面上引用圖片總數不多的情況，原理是將圖片轉換為 base64 編碼字串 inline 到頁面或 CSS 中，可以減少 HTTP 請求。

合併雪碧圖（sprite）：移動端多圖情況下，可以將多圖合併到一個圖中，透過 CSS 定位背景圖的形式來引用圖片，可以有效減少 HTTP 請求。

使用 CSS、svg、canvas 或者 iconfont 代替圖片：適用於移動端或高階的瀏覽器，而且繪製的圖片比較簡單。

懶載入圖片（lazyload）

使用 cdn 提供訪問圖片的入口。

為什麼要進行圖片最佳化?

圖片往往是導致頁面載入緩慢的最主要原因。一些研究表明，以兆位元組計的Web頁面還在穩步增加，圖片更是其中最大的部分。顯然，大部分網站可以透過圖片最佳化大幅提升效能。

圖片最佳化涉及哪些要素?

圖片最佳化的基本要素：圖片大小及調整、圖片格式、圖片質量或壓縮。

根據圖片在Web頁面上實際佔用的空間調整圖片大小及裁剪圖片;將圖片轉換成最恰當的檔案格式，對於不同型別的圖片，情況可能會有所差別，最佳化目標檔案格式的壓縮，最佳化的藝術是找出不會導致可見質量損失的最高壓縮水平。

圖片最佳化涉及哪些技術?

1)CSS效果、CSS動畫。提供與解析度無關的效果，在任何解析度和縮放級別都可以顯示得非常清晰，佔用的空間也很小。

2)網路字型。現在連很多圖示庫都是用字型方式提供，保持文字的可搜尋性同時擴充套件顯示的樣式。

圖片最佳化可藉助哪些工具?

1)使用Kraken.io最佳化圖片

Kraken.io是一項專門針對圖片最佳化的雲服務，其免費方案提供100MB的圖片儲存。Kraken提供一個API，你可以透過程式設計上傳圖片，或者提供一個指向該圖片的URL。在呼叫這個API時，你可以給服務傳送指令，讓其對圖片執行特定的最佳化，並下載最佳化後的新版本。

2)使用Cloudinary最佳化圖片

Cloudinary是一項執行圖片最佳化的雲圖片服務，還提供各種各樣的圖片操作、雲端儲存和CDN分發。Cloudinary的免費方案提供2GB的雲端儲存、75000張圖片、每月7500次圖片轉換。在Cloudinary中，你將圖片上傳到永久雲端儲存，然後Cloudinary服務會將圖片直接分發給你的網站使用者。

3)使用Imgix最佳化圖片

Imgix的工作原理與Cloudinary類似：上傳圖片，然後在你的程式碼中生成一個動態URL，對圖片執行不同的最佳化。和Cloudinary一樣，Imgix是一個全功能的圖片管理解決方案，提供很多圖片操作、雲端儲存和CDN分發。Imgix提供了免費試用方案，允許使用者基於API進行大約3000次圖片操作。

目前市面上的趨勢就是萬物轉前端，其實也不是不行，開發這幾年因為框架和前後端分離的原因，和大批的培訓機構，讓很多不是科班畢業的人也可以有一份滿意的工作，如果真的想學還是比較推薦的，至於圖片最佳化目前幾個比較火的框架基本已經很完善了。畢竟要是真的參加工作你就會發現你只是生產線上的一個小螺絲，做的工作都是一些複用的工作。

我就是做web前端技術出身的，用我的親身經歷告訴你，web前端技術學習起來還是很困難的，不是技術本身難，而是大量css屬性與屬性值難記，還得考慮不同主流瀏覽器的相容性。此外還要學習JavaScript專業知識，初步玩玩可以，要達到高深的水平是需要很長時間的練習。

其次圖片最佳化就簡單了，Photoshop轉存為web格式，質量度稍微調低一些比如80，儲存即可。

現在的前端已經不再是以前的前端了，現在的前端基本都是模組化，有現成的API，現成的框架，複製過來修改下就很快上手，前提是要有以前html的知識