網(wǎng)站圖像優(yōu)化技巧（二）
- 作者：新網(wǎng)
- 來源：新網(wǎng)
- 瀏覽：100
- 2018-02-27 17:40:59
另外如果考慮到更全的兼容性問題，還是得回歸到 jpg 和 png 上，常規(guī)的的選擇會用 jpg 作為背景圖，png 作為小塊的圖片，當然都需要經(jīng)過壓縮，服務端可以使用 Gzip ，上傳圖片前還能使用工具進行一遍壓縮，比如使用 ps，或者在線壓縮。
另外如果考慮到更全的兼容性問題，還是得回歸到 jpg 和 png 上，常規(guī)的的選擇會用 jpg 作為背景圖，png 作為小塊的圖片，當然都需要經(jīng)過壓縮，服務端可以使用 Gzip ，上傳圖片前還能使用工具進行一遍壓縮，比如使用 ps，或者在線壓縮。
<
div>TinyPNG 或者客戶端工具 ImageOptim。
壓縮可分為有損壓縮和無損壓縮。
使用有損壓縮處理圖像，是去除某些像素數(shù)據(jù)。
使用無損壓縮處理圖像，是對像素數(shù)據(jù)進行壓縮。
壓縮的方案可以根據(jù)需求選擇。
優(yōu)化策略
常見的優(yōu)化方案：
使用 Data URI 即(base64)編碼代替圖片：適用于圖片大小于 2 KB，頁面上引用圖片總數(shù)不多的情況，原理是將圖片轉換為 base64 編碼字符串 inline 到頁面或 CSS 中，可以減少 HTTP 請求。
合并雪碧圖(sprite)：
移動端多圖情況下，可以將多圖合并到一個圖中，通過 CSS 定位背景圖的形式來引用圖片，可以有效減少 HTTP 請求。
使用 CSS、svg、canvas 或者 iconfont 代替圖片：適用于移動端或高級的瀏覽器，而且繪制的圖片比較簡單。
懶加載圖片(lazyload)
響應式圖片可以結合懶加載的形式，這樣可以加強網(wǎng)頁的體驗。很多
網(wǎng)站 logo 就是一個固定寬度的圖像的例子，不管瀏覽器視口的寬度如何，始終保持相同的寬度。
然而在移動端，往往需要不固定的圖像，不同視口，不同的分辨率，需要展示不同的圖像大小，圖雖視口的改變而改變。
這個時候我們需要考慮使用響應式圖片：
src="360.jpg" alt="">
srcset：我們給瀏覽器準備了四個質量的圖像，分別為 360 768 1200 1920
size：我們來告訴瀏覽器，在不同的環(huán)境下圖像的寬度
當視口不大于 360 時，圖像的寬度為 100vw，當視口大于 768 時，圖像顯示為 90vw，以此類推。
最后的 src 是作為默認圖像 url 引入，是一個回退方案，當然瀏覽器不認 srcset 和 sizes 屬性時，直接讀取 src 渲染。
iphone4(320)下，圖像寬度和我們設置的 100vw 一致，而瀏覽器選擇的是 768 圖像沒有選擇 360 圖，因為 iphone4 的 dpr 是 2，瀏覽器智能地選擇了合適的 768。
iphone6p(414)下，由于 6p 的 drp 更高，瀏覽器選擇了 1200 質量的圖像，顯示了 90vw。
商品已成功加入購物車