網(wǎng)站圖像優(yōu)化技巧（三）
- 作者：新網(wǎng)
- 來源：新網(wǎng)
- 瀏覽：100
- 2018-02-27 17:42:25
為了提上網(wǎng)站的性能，對(duì)網(wǎng)站的圖片進(jìn)行高效的壓縮，是非常必要的，在不斷開發(fā)殺手級(jí)功能的同時(shí)，確保所有引入的資源都是最精簡的，圖像優(yōu)化就是這樣一項(xiàng)工作。
為了提上網(wǎng)站的性能，對(duì)網(wǎng)站的圖片進(jìn)行高效的壓縮，是非常必要的，在不斷開發(fā)殺手級(jí)功能的同時(shí)，確保所有引入的資源都是最精簡的，圖像優(yōu)化就是這樣一項(xiàng)工作。長久以來，大家認(rèn)為網(wǎng)站的性能應(yīng)該包含哪些功能是一個(gè)商業(yè)問題而非技術(shù)問題，所以就算頁面懂大小總響應(yīng)時(shí)間影響極大，在性能方面也很少討論，足夠得到重視。
<
div>這時(shí)我們可以欺騙一下瀏覽器：
360.jpg 1200w
1200.jpg 9999w
這時(shí)瀏覽器把 360 的圖當(dāng)成了 1200 來用了。這里可能有些疑問，圖像的寬度為什么不是90vw 了哪?因?yàn)闉g覽器被騙了但是自己卻不知道，他依然按照 1200 的圖像，去適配 dpr。414 * 90% *(360 / 1200)約等于 111.7。這種方式很智能，瀏覽器根據(jù)你的 sizes，從 w 列表中選擇最合適的圖像來調(diào)用顯示。
如果我們需要更精確的控制瀏覽器在什么視口大小下顯示多大的圖像，可以使用 picture 元素。
當(dāng)視口大于 960 像素時(shí)，會(huì)加載 960.jpg。大于 768 像素時(shí)，會(huì)加載 768.jpg。視口小于768，則加載默認(rèn)圖像。雖然不是每個(gè)瀏覽器都支持 picture 元素，還可以使用 Picturefill polyfill。
加載以及顯示策略
多圖渲染的情況下，結(jié)合懶加載，又要保證圖像的渲染速度，類似知乎的渲染效果，我們可以使用 progressive-jpg。
相比 baseline-jpg 一行一行的掃描并顯示圖片，當(dāng)然都是從弱網(wǎng)角度考慮，這種顯示可能更合適。但還是有不足。參考了下知乎和 medium 等網(wǎng)站的示圖效果，可以進(jìn)行模擬：
先創(chuàng)建一個(gè)為圖片占位的預(yù)留塊，在這個(gè)塊中會(huì)展示圖片。塊中有另外一個(gè)塊會(huì)先設(shè)置一個(gè) padding-bottom 來撐起塊的高(即保證需要加載圖像也是這個(gè)寬度高度的比例)。這樣防止圖片在加載時(shí)發(fā)生重排。
加載一個(gè)輕量版的圖片。這個(gè)時(shí)候會(huì)先請(qǐng)求一個(gè)圖片的縮略圖。并使用模糊 blur 效果
等滾到到可視區(qū)域，加載高質(zhì)量圖，加載完畢后取消模糊效果。
medium 下的實(shí)現(xiàn)方式更為復(fù)雜點(diǎn)，是在縮略圖加載完畢后，繪制到 canvas 畫布，再通過一個(gè)自定義的模糊函數(shù)，類似于 StackBlur，同時(shí)請(qǐng)求高質(zhì)量圖。等到請(qǐng)求完，再隱藏畫布。
商品已成功加入購物車