網站圖像優化技巧(一)
- 作者:新網
- 來源:新網
- 瀏覽:100
- 2018-02-27 17:43:26
網頁圖像的要求是在盡可能短的傳輸時間里,發布盡可能高質量的圖像。因此在設計和處理網頁圖像時就要求圖像有盡可能高的清晰度與盡可能小的尺寸,從而使圖像的下載速度達到最快。為此,必須對圖像進行優化。
網頁圖像的要求是在盡可能短的傳輸時間里,發布盡可能高質量的圖像。因此在設計和處理網頁圖像時就要求圖像有盡可能高的清晰度與盡可能小的尺寸,從而使圖像的下載速度達到最快。為此,必須對圖像進行優化。
<
div>前端優化有很多,圖像優化也是其中的一部分。無論是漸進增強還是優雅降級,圖像優化成為了開發上不可忽視的一部分。
知其然,須知其所以然
圖像優化的前提是需要了解圖像的基本原理。常規的圖像格式分為矢量圖和位圖。
原理:
矢量圖形使用線、點和多邊形來表示圖像。
光柵圖形,也可以成為位圖,通過對矩形格柵內的每個像素的值進行編碼表示圖像。
矢量格式適用于簡單形狀圖形,并且變換顏色方便,僅通過 CSS 中的 fill 屬性便可以改變顏色。并且在多大的縮放下都能保證清晰,矢量格式不能滿足復雜的圖像,例如照片,高清圖。這時候我們就需要位圖,位圖的格式有很多:
GIF
PNG
JPEG
JPEG-XR
WebP
Bpg
其中 Webp 是比較流行的圖像格式方案,目前
移動端 Android 4.0 以上、PC 端 chrome 10+(14 ~ 16 有渲染 bug )、opera 11+ 均支持
webp 格式圖片,相比 jpg 體積減少了 65%,但編碼解碼速度慢了很多,雖然 webp 會額外增加解碼時間,但由于體積小了,縮短了加載時間,實際上文件的渲染速度反而快了。